/******************************************************************************
-------------------------------------------------------------------------------
 CCSAS/CSE External Stylesheet
-------------------------------------------------------------------------------
  This stylesheet describes the overall look and feel of the system. This sheet 
  is intended to be standards compliant a, both to retain compatibility with 
  browsers other than IE, and more importantly to maintain 
  forward-compatibility with future standards compliant versions of IE. In order
  to make the styles work in the current version of IE, but still remain
  standards compliant, styles are often set to the IE-specific version and then
  re-set to the standards compliant version using a syntax that IE does not 
  currently understand. 

  In contrast to the internal stylesheet, where scaling is desired, the external
  Layout is fixed. This neccessitates the use of pixel values in more places than
  on the internal layout.
-------------------------------------------------------------------------------
******************************************************************************/

/******************************************************************************
 * Body Styles/Base Styles
 *****************************************************************************/
  body {
    margin:0;
    padding:0;
    font-family:Verdana, sans-serif;
    font-size:80%;
    color:#000;
    text-align:center;
    
  }

  div#container{
	margin: 0 auto;
  	width: 100%;
  	text-align: left;
  }
  /* First appearance of html>body selector. '>' child selector renders style
   * invisible to IE. Used to maintain standards compliance by sending a style 
   * that works in IE to both IE and standards compliant browsers
   * and then sending the standards-compliant style overriding the IE-specific version.
   *
   * In this situation we are sending a slightly different font size to standards
   * compliant browsers to make the fonts appear roughly the same size despite 
   * the rendering differences between IE and those browsers.*/
  html>body {
    font-size:81%;
  }
  
  /* sets all the link colors to be a standard color, regardless of state */
  a, a:hover, a:active, a:visited{
    color:#0000FF;
  }

/*
 * For display of the 'non-production' banner across the top of each page.
 */
  #environmentBanner {
    background-color:red;
    color: #E4E2DF;
    font-weight: bold;
    font-size: 1.4em;
    text-align:center;
    border-bottom:1px #878787 solid;
  }


/***************************************************************************
 * form padding
 **************************************************************************/
  form{
    margin:0;
    padding:0;
  }

/******************************************************************************
 * Level One Navigation
 * 
 * The top-level navigation, consisting of a list of items with styles applied
 * to the list elements, spans and links. Based on the concept described in
 * A List-Apart's "Sliding Doors of CSS-II". http://www.alistapart.com
 * Similar to internal stylesheet except that it uses a single image for both
 * the left and right sides of the tab, essentially treating the image as a 
 * "sprite".
 *****************************************************************************/    
  #levelOne {
    clear:both;
    float:none;
    line-height:normal;
    font-size:1em;
    width:auto;
    margin:0;
  }
  
  #levelOne ul {
    margin:0;
    padding:5px 0 0 0;
    list-style:none;
  }
  
  #levelOne li {
    display:inline;
    margin:0;
    padding:0;
  }
  
  #levelOne a {
    float:left;
    font-size:0.9em;
    margin:0;
    padding:0 0 0 6px;
    color:#000;
    border-left:2px solid #FFF;
    background: url("../image/levelOne/External.gif") no-repeat left top;
  }
  
  /* The purpose of this span is to force the anchor tag to grow to fill up the
   * entire tab. Without this span, IE does not make the entire tab clickable */
  #levelOne a span {
    float:none;
    display:block;
    padding:5px 10px 5px 5px;
    font-weight:bold;
    background: url("../image/levelOne/External.gif") no-repeat right top;
  }
  
  #levelOne li.current a {
    text-decoration:none;
    background:url("../image/levelOne/External_Current.gif") no-repeat left top;
  }

  #levelOne li.current a span {
    padding-bottom:6px;
    color:#111;
    background:url("../image/levelOne/External_Current.gif") no-repeat right top;
  }

  /* when hovering over the tab, move the image up so that the bottom portion
   * is visible. 150pixels is the distance in the image itself from the top to the
   * portion of the image that contains the hover-look. This makes more sense if
   * you open the image and look at how it's constructed.*/
  #levelOne a:hover,  #levelOne li.rightOfCurrent a:hover{
    background-position:0 -150px;
    color:#222;
  }

  /* do the same thing for the right side of the tab */
  #levelOne a:hover span, #levelOne li.leftOfCurrent a:hover span {
    background-position:100% -150px;
  }
  
/******************************************************************************
 * Level Two Navigation
 * 
 * Identical in concept to the level-one navigation. 
 *****************************************************************************/    
  #levelTwo {
    float:none;
    clear:both;
    width:auto;
    font-size:1em;
    line-height:normal;
    padding:0;
    margin:0 auto 0 auto;
    background:#D7D7D7;
  }

  #levelTwo ul {
    margin:0 11px 0 10px;
    padding:10px 0 0 0;
    list-style:none;
    font-size:0.8em;
  }
  
  #levelTwo li {
    display:inline;
    margin:0;
    padding:0;
  }
  
  #levelTwo a {
    float:left;
    margin:0;
    padding:0 0 0 9px;
    color:#111;
    letter-spacing:0.25pt;
    border-left:2px solid #D7D7D7;
    background:url("../image/levelTwo/External.gif") no-repeat left top;
  }
  
  #levelTwo a span {
    float:none;
    display:block;
    padding:4px 15px 5px 5px;
    font-weight:normal;
    background:url("../image/levelTwo/External.gif") no-repeat right top;
  }
  
  #levelTwo a:hover {
    color:#FFF;
  }
  
  #levelTwo li.current a {
    text-decoration:none;
    background:url("../image/levelTwo/External_Current.gif") no-repeat left top;
  }
  
  #levelTwo li.current a span {
    padding-bottom:6px;
    color:#FFF;
    background:url("../image/levelTwo/External_Current.gif") no-repeat right top;
  }
  
  #levelTwo a:hover{
    background-position:0 -150px;
  }
  
  #levelTwo a:hover span{
    background-position:100% -150px;
  }
     

/*******************************************************************************
 * Page Areas
 * 
 ******************************************************************************/
#bodyPane{
	/* defect 276215: Increased to accomodate wider GC pages */
	/* Previously was: width:761px; */
	width:auto;
	margin:0 auto 0 auto;
}

#pageHolder{
    width:85%;
    margin:0;
    padding:0;
	float:left;
	        
}

#banner{
 margin:0 auto 0 auto;
 padding-top:2px;
 text-align:left;
 width:100%;
 background:#003399;
 color:#FFF;
}


#banner img{
	/* Without this declaration, IE places a 3 pixel invisible border around the
	   Bottom of the image */
	display:block;
}

#banner a, #banner a:visited, #banner a:link{
	color:#FFF;
	padding:5px;
	font-size:0.9em;
}

#header{
  width:100%;
  padding:0;
  vertical-align:text-top;
  
}

#header #title{
	margin:0 0 0 0;
	padding:2px 2px 2px 2px;
}
#header #title img{
    float:left;
    padding:0.4em 0 0 0;
}
#header h1{
  font-size:1.4em;
  padding:0.5em 0.3em 0em 0;
  margin:0.0em 0 0 0;
  color:#000;
}

#header p{
    font-weight:bold;
    color:#000;
    padding:0.4em 0.2em 0.5em 0.2em;
    margin:0;
	font-size:0.85em;
}
#top{
	background:#FFF;
	float:left;
    width:100%;
}

#top br{
    margin:0;
    padding:0;
    clear:both;
}

#background{
	background:#D7D7D7;
	float:left;
	width:100%;
}

#content{
  clear:both;
  padding: 0 0 0.1em 0;
  /* The Height attribute is set here to avoid a bug in IE's float model.
     This is used for the same purpose that the "line-height" attribute 
  	 is used on the internal stylesheet.*/ 
  height:1%;
}

#pageTitle{
	font-size:1.0em;
	background:#003399;
	padding:0.2em 0.3em 0.2em 0.5em;
	margin:0;
	clear:both;
	color:#FFF;
}

#logout{
    font-weight:bold;
    color:#000;
    font-size:1.1em;
    height:2em;
    padding-top:2px;
  }

 
/*Descrepency between IE and other browsers in for the right margin.*/
html>body #logout{
    margin-right:0.6em;
}

#leftNav{
	width:11%;
	float:left;
	clear:both;
  	background:#D7D7D7;
  	height:100%;
  	padding:0.0em;
}

#leftNav a{
	color:#006;
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bold;
}
#leftNav ul{
	font-size:0.85em;
	margin:0.9em;
	padding:0;
}

#leftNav ul li{
	list-style-type:none;
	margin:0.9em 0 0.9em 0;
	padding:0;
	display:block;
}

#leftNav img{
    margin:10px;
    float:left;
}

#leftNav h3{
	clear:both;
	font-size:0.85em;
	color:#000033;
	margin:0 0.9em 0 0.9em;
}

#leftNav h4{
	color:#000033;
	margin:0;
	font-size:0.95em;
}

/*******************************************************************************
 * Groups
 ******************************************************************************/

div.group, div#noCase, div#haveCase {
	background:#F5F5F5 url("../image/content/Group_BottomLeft.gif") no-repeat bottom left;
	line-height:1.2em;
	margin:8px 10px 12px 5px;
	/*this width works around a bug in IE, do not remove*/
	width:100%;
	font-size:0.95em;
}

div.groupContent, div.groupContentNoPad {
	background: url("../image/content/Group_BottomRight.gif") no-repeat bottom right;
	clear:both;
	margin:0;
	padding: 8px 4px 9px 10px;
	width:100%;
	line-height: 1.2;
}

div.groupContentNoPad{
	padding:0;
	margin:0;
}

div.group h2, div#noCase h2, div#haveCase h2 {
	background: url("../image/content/Group_TopLeft.gif") no-repeat top left;
	float:left;
	margin:0;
	padding:0.2em 0 0 0.4em;
	font-size:1.0em;
	font-weight:bold;
	color:#333;
	clear:both;
}

div.groupWidgets {
	background:#EEE url("../image/content/Group_TopRight.gif") no-repeat top right;
	padding:0.3em 0.4em 0.3em 0;
	text-align:right;
}

div.groupContent label{
	color:#333;
}

div.groupContent label.required{
	font-weight:bold;
  	text-indent:-0.05em;
}

 /* This sets the styles for the acronym tag when it is used to wrap asterisks
   * and delta glyphs on fields that are required or have validation errors */
  div.groupContent label.required acronym.glyph, 
  div.groupContent  label.error acronym.glyph{
    width:0em;
    margin-right:0.2em;
    border-bottom:0;
  }

div.groupContent label.left, div.groupContent label.wideLeft{
	width:14em;
	display:block;
	float:left;
	clear:both;
	margin:0.2em 0.5em 0.8em 0em;
	padding-left:0.8em;
}

div.groupContent label.wideLeft{
	width:55%;
	margin-bottom:1.3em;
}


div.groupContent div.right,
div.groupContent div.rightPercent{
	margin-right:1.6em;
	text-align:right;
}

div.groupContent div.rightPercent{
	margin-right:0.5em;
}


div.groupContent div.right input,
div.groupContent div.rightPercent input{
	margin:0 0.3em 0 0.3em;
	text-align:right;
}


div.groupContent br{
	clear:both;
}



fieldset{
	 border:1px solid #AAA;
	 margin:0.3em;
	 width:61em;
	 display:block;
}
div.groupContent fieldset label{
	 white-space:nowrap;
	 float:left;
	 clear:none;
}

div.groupContent fieldset.TwoColumn label{
	 width:30em;
}

div.groupContent fieldset.ThreeColumn label{
	 width:19.5em;
}

div.groupContent fieldset.FourColumn label{
	 width:14.5em;
}

.instructions{
	background:#EDF3FF;
	border:1px solid #5582DC;
	margin:0.8em;
	font-size:0.9em;
	padding:0.8em;
	line-height:1.4em;
}

.instructions label{
	 white-space:nowrap;
	 float:left;
	 clear:none;
	 color:#FF0000;
	 font-weight: bold;
	 font-size:1.4em;
}

.formFieldInstructions {
	margin:0.8em;
	font-weight:bold;
	font-size:0.8em;
	color:#FF0000;
	padding:0.8em;
	line-height:0em;
}

.instructions h4{
	margin:0 0 0.4em 0;
	font-size:1em;
}

.instructions p{
	margin:0 0 0.4em 0;
}

.footnote{
	margin:0.4em;
}

.groupContent .instructions{
	margin:0.3em;
}

 /* This class is used as a workaround to avoid IE hanging while attempting
  * to print certain pages. This class is used on a <div> to replace the prior
  * approach of the <h2> nested within a <div>. The new <div> is now
  * moved within the groupwidgets <div> when rendered by the <cse:group>
  * tag. This has the same visual style as the previous approach.
  */
 .groupheader_IEPrint{
        FLOAT: left; FONT-WEIGHT: bold; COLOR: #3a3a3a; font-size:1.2em;
 }




/******************************************************************************
 * Information Messages
 *
 * Information messages appear at the top of the page to alert the user about
 * events or status in the system, things such as confirmation messages would
 * appear in these
 *****************************************************************************/
  div.info {
    display:block;
    margin:0 0 1.5em 0;
    min-width:47.5em;
    border:1px solid #0a50ff;
  }
  
  div.info h2{
    display:block;
    margin:0;
    font-size:1em;
    padding:0.3em 0 0 0;
    color:#FFF;
    background-color:#0a50ff;
    border-bottom:3px solid #0a50ff;
  }
  
  #content div.info a {
    font-weight:bold;
    margin:0;
    color:#0a50ff;
   }
   
  div.info img.infoIcon {
    padding:0 0.5em 0 0.5em;
  }
  
  div.info ul {
    list-style-type:bullet;
    margin:0.5em 0 0.5em 1.7em;
    padding:0;
  }
  
  div.info li  {
    margin:0.2em 0 0.2em 0.2em;
    padding:0;
    color:#0a50ff;
  }
  
  img.info {
    margin:0 0.3em 0 0;
    padding:0;
  }
  
  
/******************************************************************************
 * Button Clusters
 *
 * similar in form to the navigation structures. button clusters are lists of 
 * items with a button-like appearance and behavior
 * two main types exist:normal and left normal button clusters float right
 * while left button clusters do not float
 *****************************************************************************/
  .buttonCluster, .buttonClusterLeft {
    float:right;
    clear:both;
    line-height:normal;
    font-size:1em;
    margin:0;
    margin-bottom:2.2em;
  }

  tfoot .buttonClusterLeft{
    margin-bottom:0.2em;
  }
  
  .buttonClusterLeft{
    float:none;
  }
  
  .buttonCluster ul, .buttonClusterLeft ul {
    margin:0;
    padding:0.5em 0 0 0;
    list-style:none;
  }
  
  .buttonCluster li, .buttonClusterLeft li {
    display:inline;
    margin:0;
    padding:0;
  }
  
  .buttonCluster a, .buttonCluster a:visited, .buttonClusterLeft a, .buttonClusterLeft a:visited {
    float:left;
    background:url("../image/button/left_both.gif") no-repeat left top;
    margin:0 0.4em 0 0.4em;
    padding:0 0 0 9px;
    text-decoration:none;
    border-bottom:1px solid #505050;
    color:#404040;
  }
  
  .buttonCluster li.disabled a, .buttonClusterLeft li.disabled a{
    background:url("../image/button/left_both_disabled.gif") no-repeat left top;
    border-bottom:1px solid #b8b8b8;
    color:#b8b8b8;
  }
  
  #content .buttonCluster ul li.leftOption a{
    margin-right:6em;
  }
  
  .buttonCluster a span, .buttonClusterLeft a span {
    float:none;
    display:block;
    background:url("../image/button/right_both.gif") no-repeat right top;
    padding:4px 12px 4px 2px;
    font-weight:normal;
  }
  
  /*set the margin on button clusters that appear inside a group */
  .groupContent .buttonCluster {
    margin-bottom:0.4em;
  }
    
  #content table.editView td.right .buttonCluster, #header div.buttonCluster{
    float:none;
    display:inline;
  }
  
  #content table.tableWithBorder {
	border: 1px solid #404040;
	width:99%;
	font-size: 1.0em;
	padding-bottom:20px;
	margin:0 auto 5px auto;
	vertical-align:top;
  }  
  
  /* Remove the float from the links when the button is in an edit view */
  #content table.editView td.right .buttonCluster a, #header .buttonCluster a{
    float:none;
    vertical-align:.3em;
    display:inline;
  }
  
  /* add extra padding around the cluster for standards compliant browsers and
   * remove the vertical alignment */
  html>body #content table.editView td.right .buttonCluster a, html>body #header .buttonCluster a{
    padding:4px 0 4px 9px;
    vertical-align:0;
  }
  
  #header .buttonCluster a, #header .buttonCluster a:visited{
    padding-left:3px;
    display:inline;
  }
  
  html>body #header .buttonCluster a, html>body #header .buttonCluster a:visited{
    padding:2px 0 2px 3px;
  }
  
  #content table.editView td.right .buttonCluster a span, #header .buttonCluster a span{
    display:inline;
    padding-right:12px;
  }
  
  #header .buttonCluster a span, #header .buttonCluster a:hover span{
    padding:2px 6px 2px 2px;
  }
  
  #content table.editView td.right .buttonCluster ul, #header .buttonCluster ul{
    display:inline;
  }
    
  .buttonCluster li.disabled a span, .buttonClusterLeft li.disabled a span{
    background:url("../image/button/right_both_disabled.gif") no-repeat right top;
  }
  
  .buttonCluster a:active span, .buttonClusterLeft a:active span {
    color:#333;
  }
  
  .buttonCluster a:active, .buttonClusterLeft a:active, .buttonCluster a:focus, .buttonClusterLeft a:focus{
    background-position:0 -150px;
  }
  
  .buttonCluster a:active span, .buttonClusterLeft a:active span, .buttonCluster a:focus span, .buttonClusterLeft a:focus span{
    background-position:100% -150px;
  }

/*******************************************************************************
 * Tables
 ******************************************************************************/

table{
	border-collapse:collapse;
	border:none;
	width:100%;
	font-size: 0.95em;
	padding-bottom:20px;
	margin:0 auto 5px auto;
	vertical-align:top;
}

table thead th{
	background:#F5F5F5 url("../image/content/TableHeader_BottomRights.gif") no-repeat bottom right;
	color:#444;
	text-align:left;
	padding:0.2em 0.5em 0.2em 0.5em;
	vertical-align:top;
			
}

table thead th img{
    margin-left:0.2em;
}

table tfoot td{
    padding: 0.5em 0.3em 0.0em 0.8em;
}

table tbody td{
	padding:0.4em 0.4em 0.4em 0.6em;
	background:#FFFFFF;
	vertical-align:top;
}

table tbody tr.even td{
	background:#F5F5F5;
}

#pagination p{
    float:right;
    margin:0 0 0.4em 0;
}


 /****************************************************************************
   *
   * Confirmation Pages
   ***************************************************************************/
   
   div.confirmation{
     padding:1.0em 1.5em 1.5em 1.5em;
     margin:0;
     clear:both;
   }
   
   .confirmation h4 {
     padding:0 0 1em 50px;
     margin:0 0 0 0;
     text-indent: -51px;
     font-size:1.1em;
     color:#383838;
     border-bottom:1px dashed #989898;
   }
   
   .confirmation label{
	 color:#FF0000;
   }   
   
   .confirmation img{
     padding-right:15px;
     padding-bottom:0;
     margin-bottom:-10px;
   }
   
   .confirmation .options p{
     color:#383838;
     margin:0.5em 0 0.5em 0;
   }
   
   .confirmation .options{
     margin-bottom:0;
   }


/******************************************************************************
 * errors
 *
 * errors that appear at the top of a page after validation fails
 * consists of a div containing the error message along with a list of
 * errors. each list-item contains a link that sets focus to the field
 * and a description of each invalid field
 *****************************************************************************/
  div.error {
    display:block;
    margin:10px 10px 10px 10px;
    border:1px solid #9D210D;
  }
  
  div.error h2{
    display:block;
    margin:0;
    font-size:1em;
    padding:0.3em 0 0 0;
    color:#FFF;
    background-color:#9D210D;
    border-bottom:3px solid #9D210D;
  }
  
  #content div.error a {
    font-weight:bold;
    margin:0;
    color:#9D210D;
  }
   
  div.error img.errorIcon {
    padding:0 0.5em 0 0.5em;
  }
  
  div.error ul {
    list-style:none;
    margin:0.5em 0 0.5em 0.4em;
  }
  
  div.error li  {
    margin:0.2em 0 0.2em 0.2em;
    color:#9D210D;
  }
  
  html>body div.error li{
    margin-left:-35px;
  }
  
  img.error {
    margin:0 0.3em 0 0;
    padding:0;
  }
  
  
  input.error, textarea.error{
    border:2px #9D210D solid;
  }
  


/*******************************************************************************
 * Home Page
 ******************************************************************************/


div#haveCase{
	width:36%;
	float:left;
}

div#noCase{
	width:34%;
	float:left;
}

div#haveCase .groupContent #login label.left{
	width:17%;
}

div#haveCase h3, div#noCase h3{
	font-size:1.0em;
	margin:0.2em 0 0.2em 0;
	
}

div#haveCase .groupContent{
}

div#haveCase p, div#noCase p{
	margin:1px 0 0.8em 0;
	line-height:1.4em;
}

div#haveCase h3 a:link, div#noCase h3 a:link,div#haveCase h3 a:visited, div#noCase h3 a:visited{
	color:black;
}

div#login{
	margin:1px;
}

div#footer {
	clear: both;
	line-height: 1.4em;
	text-align: center;
	font-size: 0.7em;

}

div#footer a {
	color: black;
}