/*
This CSS stylesheet defines the common and base stylings for everything on the site.
*/


/*
Class:  html, body
Desc:   Sets the height of these elements to 100% of the available space
*/
html, body {
    height:100%;        
}


/* 
Class:  body
Desc:   Assigns additional styling to the body element
*/
body {
    margin:0;                       /* No extra space */
    padding:0;                      /* No extra space */
    background-color:#EEEEEE;       /* Set the surrounding background color */
    background-color:White;         /* White background, specified by Chealsea Prescod */    
}


/* 
Class:  #masterContainer
Desc:   This represents the master container for the site. Everything goes inside this: 
        both the menu structure and the dynamic content 
*/
#masterContainer {     
    width:90%;      
    min-height:100%;
    margin-left:auto;               /* Center the master container */
    margin-right:auto;              /* Center the master container */
    margin-bottom:45px;             /* 20px to accomodate the footer, 5px for extra space */
    margin-top:5px;                 /* 5px for extra space */    
    background-color:#F0F8FF;       /* Alice Blue, specified by Chelsea Prescod */     
} 


/* 
Class:  #contentContainer (nested inside '#masterContainer')
Desc:   This represents the area which will be populated by dynamic contents on a per-page basis 
*/
#masterContainer #contentContainer {
    width: 100%;
    clear: both;
    margin-left: auto; /* Center the content container */
    margin-right: auto; /* Center the content container */
    overflow: hidden;
    vertical-align: middle;
    
}


/*
Class:  menuElement
Desc:   Defines the menu bar
*/
.menuElement {
    margin-left: auto;              /* Center the menu bar */
    margin-right: auto;             /* Center the menu bar */
    margin-top: 4px;                /* Give the menu some space */
    width: 100%;                    /* Fill out the entire menu */
    text-align: center;             /* Center align everything */
      
    /* Federal blue, specified by Chealsea Prescod */         
    /* background-color: #16166B;       */
        
} 


/* 
Class:  bannerPicture
Desc:   Defines the banner picture for the site, which is located in top-left
*/
.bannerPicture {
    border-style: none;             /* Ensure there are no border */
/*    width: 100%;                    /* Set the picture to be the maximum size of the window */
} 


/*
Class:      clearfloat
Desc:       This is a workaround class that allows us to clear out the float element wrappings 
*/
.clearfloat {
    clear:both;	
    height:0px;
}



/* 
Class:  speakerIcon
Desc:   Defines the styling for all the speaker icons
*/
.speakerIcon {
    border-style: none;
    margin-right: 3px;
    width:20px;
    height:20px;
    vertical-align:middle;    
}


.navigationIcon {
    border-style: none;
    float: right;
    margin: 2px;
    width: 60px;
    height: 60px;
    vertical-align:middle;
}

.navigationIcon_left {
    vertical-align:middle;
    border-style: none;
    float: left;
    margin: 2px;
    width: 60px;
    height: 60px;    
}



/*
Class:  footerBox
Desc:   Defines the styling for the footer block
*/
.footerBox 
{
	z-index: 10;
    background-color: #586f9b;
    position: fixed;                /* This will move with the user as we scroll */
    bottom: 0px;                    /* It will appear at the bottom of the viewport */
    width: 90%;                     /* It will be the same width as everything else */
    margin-left: auto;              /* Center the bottom footer */
    margin-right: auto;             /* Center the bottom footer */
    height: 40px;                   /* The height of the footer area */
    margin-top: 45px;               /* 20px for the height of the footer, 5px for extra breathing room */
    clear: both;
    text-align: center;        
}


/*
Class:  homepageSlideshowBox 
Desc:   Stylizes the div box that contains the rotating slideshow on the home page
*/
.homepageSlideshowBox {    
    background-color: #C4EFA9;
    width: 70%; /* It will be the same width as everything else */
    margin-left: auto; /* Center the bottom footer */
    margin-right: auto; /* Center the bottom footer */
    height: 270px; /* The height of the footer area */
    clear: both;
}





.homepageSlideshowBox_image {
   /* width:90%;   */
   height: 100%;   
   display:block;
   
   
   margin-top:15px;
   
   margin-left:auto;        /* center the image in the slideshow environment */ 
   margin-right:auto;/* center the image in the slideshow environment */ 
}

.homepageSlideshowBox_text {
    display:block;
    background-color:Red;
    color:Black;
    position:relative;
    margin-left:65%;
    margin-top:-60%;
}


/* 
Class:      workbookSubmenu
Desc:       The submenu for the workbook. This lets the user navigate to specific chapters in the workbook
*/
.workbookSubmenu {
    width:100%;                 /* Fill out the entire window */
    margin-left:auto;           /* Center the menu */
    margin-right:auto;          /* Center the menu */    
}

/*
Class:      workbookTitleSection
Desc:       Used as the major title for the workbooks, assessment etc
*/
.majorTitle {
    padding: 3px;
    margin-top:45px;
    margin-bottom:-45px;
    display: block;
    left: 0px;    
    font-family: Tahoma;
    font-size: 30pt;
    font-weight: bold;
    color: #336699;    
    vertical-align:middle;    
}


/* 
Class:      subTitle1
Desc:       Used for subtitles in the workbook assessment question number
*/
.subTitle1 {
    padding: 3px;   
    display: block;
    left: 0px;    
    font-family: Tahoma;
    font-size: 20pt;
    font-weight: bold;
    color: #336699;
    vertical-align:middle;
}

.workbookBodySection {    
    margin-bottom:100px;
}



#myoutercontainer { position:relative }
	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }

/*
Class:      assessmentResponse 
Desc:       frames the area where the assessment buttons will go
*/
.assessmentResponse {
    width: 50%;    
    margin-left:auto;
    margin-right:auto;
    margin-top:25pt;
    padding: 10px;
}


/*
Class: assessmentQuestion 
Desc: styles the actua assessment questions 
*/
.assessmentQuestion {
    font-family: Verdana;
    font-size: 16pt;
    margin: 10px;
    font-weight: bold;
    color: #336699;
}

/*
Class:      assessmentPreamble 
Desc:       This is the class for the text in the instructions and disclaimer section of the assessment
*/
.assessmentPreamble {
    font-family: Verdana;
    font-size: 14pt;
    margin: 10px;
    color: #336699;
}

.genericText {
    font-family: verdana;
    font-size: 13pt;
    /*vertical-align: middle;*/
    color: #336699;
    font-weight: normal;
    text-align: justify;
    /*margin:10px;*/
}


.jobSlideshowCentering{
    max-width:300px;
    max-height:225px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;   
    text-align:left;     
}

/*
Class:      hiddenVideoCaption
Desc:       This is the style for the text in the popup videos for job details
*/
.hiddenVideoCaption {
    font-family: verdana;
    font-size: 11pt;
    color: #FFFFFF; 
    text-align:left;
}



.jobMainContent{        
    max-width:100%;
    margin-right:180px;    
/*    background-color:Red;*/
    position:relative;
    margin-bottom:100px;
}

.jobVideoBar {        
    /*position:absolute;*/
/*    position:absolute;*/
    background-color: #586f9b;
    color: White;    
    width:160px;
    float: right;
    padding:5px;
    font-family: Verdana;
    font-size: 14pt;
    font-weight: bold;
    text-align:center;
    /*margin-top:45px;        */
}
    
.jobTables{
    background-color:Maroon;
}

.jobTablesControl {
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    font-family: verdana;
    font-size: 13pt;
    font-weight: bold;
    text-align: center;
    color: #336699;    
}


.boldedGeneralText {
    font-family: verdana;
    font-size: 13pt;
    font-weight: bold;
    color: #336699;
}

.centeredStuff{    
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

.jobDescriptionPopup_Anchor {
    border-style: solid;
    border-width: 2px;
    font-weight: bold;
    color: #FF0000;
}

.jobDescriptionPopup_Box {    
    border-style: dashed;
    border-width: 1px;
    padding: 10px;
    font-family: verdana;
    font-size: 11pt;
    text-align: left;
    background-color: #FFFFFF;
    color: #336699;
    width:65%;
    z-index:2000;
    
    /*overflow:auto;*/
    /*position:absolute;*/
}


.masterJobListPopup {
    font-family: verdana;
    font-size: medium;
    text-align: left;
    padding: 5px;
    color: #336699;
    width: 100%;
    list-style-type: none;
}

.masterJobListPanel {
    font-family: arial, Helvetica, sans-serif;
    font-size: medium;
    text-align: left;
    padding: 5px;
    color: #336699;
}


.speakerBox {
    float: left;
    display: block;
}

.speakerBox2 {
    float: left;
    margin-left:10px;
}


.mainPageOpener{
    padding: 3px;   
    display: block;
    left: 0px;    
    font-family: Tahoma;
    font-size: 14pt;
    font-weight: bold;
    color: #336699;
    float:left;
    width:33%;
    padding-top:50px;   
    text-align:center; 
}

.mainPageOpenerNormal{
    padding: 3px;   
    display: block;
    left: 0px;    
    font-family: Tahoma;
    font-size: 14pt;
    font-weight: bold;
    color: #336699;     
}

.mainPageOpener2{
    padding: 3px;   
    display: block;
    left: 0px;    
    font-family: Tahoma;
    font-size: 14pt;
    font-weight: bold;
    color: #336699;
    float:left;
    width:33%;
    margin-left:20px;      
    padding-top:50px;
    text-align:center;
}




.speakerThirds {
    width:30%;
    float:left;
}


.job_table_descriptionElement {
    float: left;
    margin-left: 27px;
    display: block; 
}


.job_title_onetElement {
 /*   float: left;*/
    margin-left: 30px;
    display: block; 
    /*margin-bottom:50px;*/
}

.job_table_textModifier {
    font-size: 11pt;
}


.floatingDiv {
    float:left;
    display:block;
}

.job_jobzoneIcon {
    border-style: none;
    width: 40px;
    height: 40px;
    vertical-align:middle;
}

.job_jobzoneIcon_legend {
    border-style: none;
    width: 80px;
    height: 80px;
    vertical-align:middle;
    margin-left:50%;
    margin-right:50%; 
}

/* http://woorkup.com/2009/10/07/how-to-distribute-elements-horizontally-using-css/ */
#wrapper {
    width: 100%;
    height: 100px;
    background: #EFEFEF;
    margin-left: auto;
    margin-right: auto;    
}

.section{
    border:none;
    float:left;
    height:100px;
    margin-left:4%;
    width:15%;    
}

#wrapper div:first-child{margin-left:5%;}


.highlightIcon {
    border-style: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    height: 80px;
}

.giantButton {
    border-style: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:200px;
    height:200px;
}

.webBrowseControl {
    border-style: solid;
    border-width: 2px;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
    font-family: verdana;
    font-size: 13pt;
    font-weight: bold;
    text-align: center;
    
    color: #336699;
}


.multiLinkText {
    color: #586f9b;
    font-family: verdana;
    font-size: 12px;
    font-weight: normal;
}

.bulletFloat{
    float:left;
    margin-left:20px;
    display:block;
}

.bulletFloatJobTable{
    float:left;
    margin-left:20px;
    display:block;
    font-family: verdana;
    font-size: 12px;
    font-weight: normal;
}

.bulletFloatSpeaker {
    border-style: none;
    border-width: 0px;
    border-color: inherit;
    float: left;
    width: 20px;
    height: 20px;
    display: block;
}

.admin_commandButton {
    border-style: none;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}


.copyRightSection {    
    font-size: 8pt;
    color: #FFFFFF;
    vertical-align:middle;
    font-weight: normal;
    font-family: verdana;
    margin-left:auto;
    margin-right:auto;
    width:75%;
    height:100%;  
    margin-top:7px;      
}




/*
Class:  speakerIcon_Floated
Desc:   This class simply sets the vertical alignment for an image to middle (of the parent object). For
        this class to be meaningfully vertically aligned, it needs to be the same size as the text that
        it will be aligned against.        
*/
.speakerIcon_Floated {    
    vertical-align:middle;          /* Align the speaker icon in the middle of it's parent container */
    margin-right:3px;               /* Give it some breathing room on the right */
    margin-left:3px;                /* Give it some breathing room on the left */        
    width:20px;
    height:20px;
}

/*
Class:  speakerIcon_HiddenText_MajorTitle
Desc:   This class defines some invisible hidden text that is the same size as major title text. The text
        is invisible but it will still occupy space (layout wise). Thus, it will resize the div that the 
        speaker is housed in to the same size as the main title text (so that the vertical align will work)
*/
.speakerIcon_HiddenText_MajorTitle {    
    visibility: hidden;       
    margin-right: -15pt !important;
    overflow: hidden;          
    line-height: 30pt;
}

/*
Class:  majorTitle_Floated
Desc:   This class simply defines the look and feel for the major title text and sets it to float-left
*/
.majorTitle_Floated {    
    margin-left:3px;                /* Give it some breathing room on the left */
    margin-right:3px;               /* Give it some breathing room on the right */    
    float:left;                     /* The float is important so that multilign text doesnt paragraphatize */    
    
    font-family: Tahoma;
    font-size: 30pt;
    font-weight: bold;
    color: #336699;        
}



.speakerIcon_HomePagePromo { margin-left:auto; margin-right:auto; width:20px;height:20px;vertical-align:middle;}
.speakerIcon_HiddenText_HomePagePromo {visibility:hidden; margin-right: -7pt !important; overflow: hidden;  line-height: 14pt;}
.homePagePromo { margin-left:3px; margin-right:3px; font-family: Tahoma; font-size: 14pt; font-weight: bold; color: #336699; }


.speakerIcon_HiddenText_HomePageMain { visibility: hidden; margin-right: -7pt !important; overflow: hidden; line-height: 14pt; }
.homePage_MainText { margin-left:3px; margin-right:3px; float:left; font-family: Tahoma; font-size: 14pt; font-weight: bold; color: #336699; }





.loginBox {
    border-style: double;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    
    font-family: verdana;
    font-size: 13pt;    
    color: #336699;
    font-weight: normal;
    text-align: justify;    
    padding: 20px;
    
    min-height: 225px;
}


.watermarkText {    
    font-style: italic;
    background-color: #C0C0C0;
    color: #808080;
    width:100%;
}

.privacyText {
    font-family: verdana;
    font-size: 13pt;    
    color: #336699;
    font-weight: normal;
    text-align: justify; 
    display:block;
    clear:both;   
}

.signUpPanel {
    border-style: double;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    font-family: verdana;
    font-size: 13pt;    
    color: #336699;
    font-weight: normal;
    text-align: justify;    
    padding: 20px;
    min-height: 300px; 
        
}

/*
http://rafael.adm.br/css_browser_selector/
*/



.jobBrowseInfoPanel {
    border-width: thin;
    border-style: dashed;
    font-family: verdana;
    font-size: 13pt;
    color: #336699;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding:10px;
}

.assessmentScore {
    font-family: verdana;
    font-size: 30pt;
    color: #336699;
    text-align: center;
    font-weight: bold;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.assessmentIntroText {    
    border-width: thin;
    border-style: dashed;
    font-family: verdana;
    font-size: 13pt;
    color: #336699;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;    
    padding:25px;
}


.admin_commandButtons {
    border-style: none;
    width: 80px;
    height: 80px;
    vertical-align:middle;
    margin-left:auto;
    margin-right:auto; 
}

.admin_commandButtonTextALT {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: #336699;    
}


.admin_commandButtonText {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}

.Unused 
{
	color: #000000;
}

.InUse 
{
	color: #FF0000;
}

.SiteAdmin 
{
	color: #00AA00;
}

.CaseWorker
{
	color: #AA00AA;
}

.error
{
	color: #FF0000;
}

br
{
	clear: both;
}

.viewing 
{
	float: right;
	font-family: Verdana;
}

.header 
{
	font-size: larger;
}

.bar-positive {
	float: left; 
	display: block;
	height: 20px;
	background-image:url('../../Image_public/barblue.png');
}

.bar-negative {
	display: block;
	height: 20px;
	background-image:url('../../Image_public/barred.png');
}

.jobzonesection 
{
	display: block;
	margin-bottom: 1em;
}

.jobZoneInfoLink 
{
	text-decoration: underline !important;
	font-weight: bold !important;
}

.jobzoneselection 
{
}

.jobzoneselection select
{
	height: 7.5em;
}

.jobzoneselection span
{
	display:block;
	float: left;
	width: 7em;
	margin-right: 0.5em;
}

.jobzoneselection select
{
	float: left;
	margin-right: 0.5em;
}

.jobzoneselection input
{
	float: left;
	margin-right: 0.5em;
}

.jobZoneNumber
{
	font-size: 16px;
}

.jobZoneInfoLink
{
}

.highlight
{
	color: rgb(255, 0, 0);
	font-weight:bold;
}

.instructions
{
	width: 10em !important;
	font-weight: bold;
	color: rgb(255, 0, 0);
}

.jobVideoBar img
{
	clear: left;
}