/* 

Common.css: Styles for Spotlight web pages

This file defines typefaces, colors and typographic
style elements for use on Spotlight web pages.

Applying this stylesheet to an HTML document should
make it consistent with Spotlight's colors and typography,
but should not affect the layout or structure of the document
in any way. There should be no IDs, classes or "special effects"
in this document; it should only apply basic typographic
styling rules to regular HTML tags.

*/

/***********************************************************************************/

/*************
* From the redesign meetings
*************/
html { 
	font-size: 62.5%;	
	background-color: #efeff8;
}
body {
	color: #26247b;
	font-family: Arial, helvetica, Sans-Serif;
	font-size: 1.2em;
	line-height: 1.4em;
}

a {
	color: #8a89c7;
	outline: none;
}

img {
	border: none;
}

.replace {
	display: none;
}

.clear {
	clear: both;
	height: 1px;
	font-size: 1%;
}

.nofloat, input.nofloat {
	float: none !important;
}

.nowidth {
	width: auto !important;
}

.noheight {
	height: auto !important;
	}

.normalWeight {
	font-weight: normal !important;
	}

h1 {
	color: #26247b;
	font-size: 2em;
	padding: 0;
	margin: 10px 0 25px 0;
	line-height: 1.3em;
}

h2 {
	color: #8a89c7;
	font-size: 1.4em;
	line-height: 1.3em;
	margin: 15px 0 10px 0;
}

h3 {
	color: #8a89c7;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 15px 0 10px 0;
	padding: 0;
}

h3.tight 
{
    margin: 15px 0 10px 0;
}

h4 {
	color:  #26247b;
	font-size: 1em;
	margin: 10px 0;
	padding: 0;
	font-weight: bold;
}

h4.lightPurple 
{
    color:  #8a89c7 !important;
    margin: 0px 0 !important;
}

p {
	font-size: 1em;
	line-height: 1.3em;
	padding: 0;
	margin: 0 0 10px 0;
}

q {
	font-style: italic;
}

.sml {
	font-size: 90% !important;
}

p.smltxt {
	font-size: 90%;
	padding: 0;
	margin: 10px 0 0 0;
}

p.smallPrint
{
    color:rbga(0,0,0,0.66);
     font-size:7pt;
}

p.divider {
	margin: 20px 0 20px 0;
	width: 100%;
	height: 1px;
	border-top: 1px solid #8a89c7;
	padding:0;
}

.fineprint {
	font-size: 0.9em;
	margin: 0 0 10px 0;
}

.formAlignedFinePrint {
	font-size: 0.9em;
	margin: 0 0 0 80px;
}

.midPurple {
	color: #8a89c7 !important;
}

.darkPurple {
	color: #26247b !important;
}

.rightFloat {
	float: right !important;
}

.leftFloat {
	float: left !important;
}

ul.body {
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
}

ul.body li {
	margin: 0 0 5px 0;
	padding: 0 0 0 12px;
	background: url('../_img/bulletpoint_dark.jpg') no-repeat 0 1px;
	color: #26247b;
}

ul.labelledList {
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
}

ul.labelledList li {
	margin: 0 0 5px 0;
	padding: 0 0 0 12px;
	background: url('../_img/bulletpoint_fieldset.jpg') no-repeat 0 1px;
	color: #26247b;
}

.displayNone, form#photo fieldset fieldset.displayNone, form#linkForm fieldset.displayNone, form#linkForm fieldset.quickJobSection .displayNone, form#linkForm ul.displayNone {
	display: none;
}

.displayBlock {
	display: block;
}

.boldError {
	color:#cc0000;
	font-weight: bold;
}

.error {
	color:#cc0000;
}


/**************************** form elements *************************************/


.textInput, .textInputLrg, .textInput380 {
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
}

input.textInput {
	height: 15px;
	margin: 0 10px 0 0;
	color: #26247b;
}

input.textInput100, select.textInput100 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 15px;
	margin: 0 10px 0 0;
	width: 100px;
}

input.textInput75 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 15px;
	margin: 0;
	width: 75px !important;
	float: left;
}

input.textInput80 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 15px;
	margin: 0 10px 0 0;
	width: 80px !important;
	float: none;
}

select.textInput80 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 20px;
	margin: 0 10px 0 0;
	width: 80px !important;
	float: none;
}

select.textInput100 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 20px;
	margin: 0 10px 0 0;
	width: 100px;
}

input.textInput110 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 15px;
	margin: 0 10px 0 0;
	width: 110px;
}

input.textInput30, form.bigForm fieldset input.textInput30 {	
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 15px;
	margin: 0 5px 0 0;
	width: 30px;
}

p.radio {
	margin: 0 0 15px 0;
	padding: 0;
}

p.radio input {
	width: 15px !important;
	height: 15px !important; 
	float: left;
	margin-right: 10px;
	margin-top: 3px !important;
	padding-top: 0;
}

p.radio label {
	width: auto;
}

form.bigForm fieldset textarea.lrg {
	background: #fff url('../_img/input_bg.jpg') no-repeat top left;
	border: 1px solid #7d7cb0;
	padding: 2px 1px 1px 1px;
	color: #26247b;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	height: 50px;
	margin: 10px 0 20px 0;
	width: 99%;
}


textarea {
	font-family: Arial, helvetica, Sans-Serif;
	font-size: 1.1em;
}

h2.preview {
	color: #ff0000;
}

#twitterLogo, #facebookLogo {
	padding: 0 0 7px 0;
	margin: 0;
	}
	
#podcastLink {
	
	margin: 0;
	height: 45px !important;
	display: block;
	}


#infoPanel {
	border:1px solid #a8a7ca;
	padding:0 15px 15px 15px;
	background-color:#f8f8fb;
	position:relative;
	margin:0 0 10px 0;
}

#infoPanel .dismiss {
	position:absolute;
	top:5px;
	right:15px;
	text-align:right;
}

#messageOverlay {
	position: absolute;
	top: 180px;
	padding: 20px 20px 15px 20px;
	color: #26247b;
	background-color: #efeff8;
	border: 2px solid #26247B;
	font-size: 1em;
	z-index: 99999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 8px;
	width: 520px;
}

#messageOverlay h3 {
	margin-top: 0 !important;
	color: #26247b;
}

#messageOverlay a.dismiss {
	display: block;
	float: right;
	clear: both;
	position: absolute;
	top: 10px;
	right: 10px;
	text-decoration: none;
	font-size: 24px !important;
	font-weight: bold;
	color: #26247b;
}
.autowidth {
	width: auto !important;
	}
	
.autoheight {
	height: auto !important;
	}
/* Feed Item Alert Styles */
/* Outermost Container */
.feedItemAlert {
    position: absolute;
    width: 320px;
    display: none;
    margin-left: 120px;
    margin-top: 50px;
}

/* Message */
.feedItemAlert > div {
    position: absolute;
    display: block;
    margin-bottom: 5px;
    margin-left: 100px;
	cursor: pointer;
	background: #F9E5E5;
	border: 1px solid #D66064;
	width: 320px;
}
.feedItemAlert .content {
    margin: 5px 5px 5px 10px;
    color: #C50101;
}
.feedItemAlert h2, .feedItemAlert p {
    margin: 0;
    padding: 0;
}
.feedItemAlert .close {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 3px;
    left: 290px;
    background: url('../_img/iconcloseAgents.jpg') no-repeat top right;
    float: right;
    z-index: 2;
}

.feedItemAlert a {
	color: #C50101;
	text-decoration: none;
}

.feedItemAlert div:hover a {
	text-decoration: underline;
}
/*.feedItemAlert div:hover .close {
    background: transparent url(../_img/jobfeedalert/close.png) no-repeat 0 0;
}*/

/* Icons */
.feedItemAlert .slide .icon {
	background-image: url(../_img/jobfeedalert/slide.png);
}
.feedItemAlert .pushpin .icon {
	background-image: url(../_img/jobfeedalert/pushpin.png);
}

/* end of Feed Item Alert styles */

/* this has been added Dec 2011 for the Xmas message that has been requested in red by KP */
p.important {
    color: Red;
}

div.ui-dialog .field-validation-error {
	display: block;
	margin: 8px 0px;
	color: #c50101;
}

input.purple-button {
	background-color: #26247b;
	color: #fff;
	border: 1px solid #26247b;
	padding: 4px 16px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;
}

input.purple-button:hover {
	background-color: #515095;
}
input[type='text'].ui-autocomplete-loading {
    background: url('/_img/smallSpinner.gif') no-repeat right center white !important;
}

.hidden-breakdown {
    position: absolute;
    margin-top: 80px;
    margin-left: 400px;
    border: 5px #EB4949 solid;
    font-size: 18px;
    padding: 5px 5px 5px 16px;
    line-height: 2;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    max-width: 272px;
    color: #CE1F1F;
}

.hidden-breakdown-suggestions {
    margin-top: 0;
    position: relative;
    margin-left: 0;
}

div.report-concern {
    position: absolute;
    font-size: 11px;
    bottom: 0px;
    right: 2px;
    padding: 4px;
    cursor: pointer;
    color: white;
    background-color: #515095;
}

.report-concern > span {
    padding: 0 15px 0 15px;
}