/* @override http://localhost:8000/media/assets/css/CellMapStyle.css */

/* CSS Document */

/* This CSS contains styles for:
	index
	search result
/* commented out background colours are used for debugging. uncomment them to see how big a div is */
/* naming convention:
		Box: when the div's primary purpose is to provide a spacing rules for children divs/content
			 if it has DIRECT content, it follows the item's name.
		corners: start with "corner", then position, then _type. ie. ".cornerTR_selected"

	Colours:
		light background:
			F4F4F4
		Links (on black background:)
			EA8154
			FA9164 (hover)
		Links (on white background: DRAFT. Will likely need to go slightly different for now)
			E66D00			
		Button Colour (bright orange)
			EA8154
		"Highlighted" box 
			FFEEBB
		Page Title:
			E3E3E3
*/

* { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }


a {
	color:#EA8154;
	text-decoration:none;
	border: none;
}

a:hover {
	color: #ffb092;
	text-decoration: none;
}

a img {
	border: none;
}

/* jump icon for external URLs. This only works if the link is on 1 line. If it breaks to a different line, we need to do something else. */
a.external {
	background: url(../images/base/external.gif) center right no-repeat;
	padding-right: 13px;

}

body{
    font-family: "Avant Garde", "Avant Garde Gothic", "Century Gothic", "Trebuchet MS", Arial, sans-serif; 
	text-align:center;	
	font-size: 0.8em;
	color: #FFFFFF;
	background: #000000 url(../images/base/blackDot.png) repeat;
}

.bodyContent {
    clear: both;
}

.bodyContent h1{
	font-size: 1.4em;
	font-weight: 800;
}

.bodyContent h2{
	padding: 1.4em 0px 0.15em 0px;
	font-size: 1.25em;
	font-weight: 800;
	line-height: 1em;
}

.bodyContent h3{
	padding: 1.4em 0px 0.15em 0px;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1em;
}

.bodyContent h4{
	font-size: 1.4em;
	font-weight: 800;
	margin-left: 20px;
	margin-top: 5px;
	
}

.bodyContent li {
	padding: 0.3em 0px 0px 0.3em;
	margin: 0px 0px 0px 1.5em;
}
/*
.content p{
	text-align: left;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.content {
	margin-left: 10px;
	float: left;
	clear: both;
}

.content ul{
	
	margin-top: 5px;
	list-style-type: none;
}

.content li{
	margin-left: 3px;
	list-style-type: none;
	margin-bottom: 25px;
}
*/

/* table layouts*/

table.clientLogin  {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 3px;
	margin-right: 3px;
	font-size: 100%;
	color: #ffffff;
	width: 100%;
	float: left;
}

table.clientLogin  tbody {
	font-weight: normal;
	text-align: left;
	padding-right: 3px;
	line-height: 2.0em;

	}

table.clientLogin  th {
	font-weight: normal;
	text-align: left;
	padding-right: 3px;

	}

table.clientLogin th a:hover {
	color: #FA9164;
	text-decoration: none;
}

table.clientLogin th a {
	color:#FFFFFF;
	text-decoration: none;
}

table.clientLogin td {
	text-align: left ;
}
/* End table layouts*/


#outerBox { /*outerBox for ENTIRE page. These padding set up all around. */
	margin-left:auto;
	margin-right:auto;
	width: 970px;
	padding: 12px 0px 0px 0px;
	text-align:left;
	overflow:hidden;
	/* background:#FF0000; */
}

/* leftMarginBox and rightMainBox's "separator" (black bit) is achieved by floating these two main boxes to the left and right. NOT controlled by padding!!!*/
#leftMarginBox { /* this controls the left margin stuffs. Set the width here, and don't need to do that for the inner stuffs. */
	width: 80px;
	padding: 0px 0px 0px 2px; /* DON'T use padding right here! Use the width to give extra space instead, since everything inside sticks to the left, having a wider width naturally gives "padding". */
	margin: 0px;
	float: left;
/*	background:#FFAA00; */
}

#leftMarginBox img, #leftMarginBox a { /* padding here is purely to separate the top/bottom things from themselves. L + R padding is set above, in leftMarginBox (if any). Furthermore,  */
	padding: 0px 0px 50px 0px;
 	border:none; 
	clear:right;
}

#rightMainBox { /* box that covers everything besides the leftMarginBox */
	float: right; /* float right to the edge of outerBox. This creates a natural separator */
	width:878px; /* if changing this, may need to change resultsPaneBox and/or GMU width as well */
	overflow:hidden;
	/*background:#666666;*/ 
}

#tagline {
	float: left;
	font-size: 1.2em;
	height: 2.4em;
	overflow:hidden;
}

#topRightLinks {
	float: right;
	padding: 0px 0px 0px 0px;
	color:#EA8154;
}

#topRightLinks white{
	color:#ffffff;
}

#footer { /* the small links at the bottom of the page */
	color:#eee;
	font-size: 12px;
	background: url(../images/base/footerGradient.jpg) repeat-x;
	margin-top: 0px; 
	padding: 5px 10px 0px 0px;
	text-align:right;
	height: 26px;
}

#footerIE6Hack { /* the small links at the bottom of the page */
	clear: both;
	float: none;
	background: #000000 url(../images/base/footerGradient.jpg);
}


/* ------------ start tabLinks -------------
 it takes a LOT of CSS for the tabLinks to work. It's commented. */
#tabLinks { /*pretty much a "box" */
	clear: both;
	vertical-align:middle;
}
	
#tabLinks ul {
	list-style: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

#tabLinks li {
	float: left;
	margin: 0 0.6em 0 0;
	padding: 0 0 0 0;
}

#tabLinks li a /* non-hover, non-selected */
/*this sets up the size of the tabs. This is the main thing.
  also sets the base color of the background, as well as the top line (when non-hover)*/
{
	background:#000000 url(../images/base/whiteDot.jpg) top repeat-x;
	color:#FFFFFF;
	font-size: 1.1em;
	height: 1.8em;
	line-height: 1.8em;
	float: left;
	width: 10.5em;
	display: block;
	text-align: center;
}

/* IMPORTANT: Must do leftLine and rightLine before the corners, since the corner image must lay over the drawn line!!! 
              we can eliminate this ordering by removing all the classes, and using hierarchy. But then the html would be 
			  4 spans with no explanation.*/
#tabLinks li a span.leftLine
/* use a white dot to draw the line. Need to do this because using actual borders, the borders go OUTSIDE the box, which makes the tab different sized when not using the borders. Also, can't round corners it, since it's outside the background img.*/
{background:url(../images/base/whiteDot.jpg) left top repeat-y;
 display:block;}	

#tabLinks li a span.rightLine
/* does right edge line*/
{background:url(../images/base/whiteDot.jpg) right top repeat-y;
 display:block;}	
 
#tabLinks li a span.cornerTL
/*does the Top Left corner*/
{background:url(../images/base/corner_tab_TL.jpg) left top no-repeat;
 display:block;}	

#tabLinks li a span.cornerTR
/*does the Top Left corner*/
{background:url(../images/base/corner_tab_TR.jpg) right top no-repeat;
 display:block;}	


/* tabLinks hover/selected */
#tabLinks li a:hover, #tabLinks li a.selected
/* do the gradient at the bottom, set background colour*/
{background:#E98154 url(../images/base/tabGradient.jpg) bottom repeat-x;}

#tabLinks li a:hover span.leftLine, #tabLinks li a.selected span.leftLine
/* not used for hover*/
{background:none;
 display:block;}	

#tabLinks li a:hover span.rightLine, #tabLinks li a.selected span.rightLine
/* not used for hover*/
{background:none;
 display:block;}	
 
#tabLinks li a:hover span.cornerTL, #tabLinks li a.selected span.cornerTL
/*does the Top Left corner*/
{background:url(../images/base/corner_tab_TL_active.jpg) left top no-repeat;
 display:block;}	

#tabLinks li a:hover span.cornerTR, #tabLinks li a.selected span.cornerTR
/*does the Top Left corner*/
{background:url(../images/base/corner_tab_TR_active.jpg) right top no-repeat;
 display:block;
}
/* --------- end tabLinks ----------*/

/* ---------- start Page Info type stuffs --------
Stuff just below tabLinks. The "Search box"/page info area  */


/* Don't know why this works, but calling this div right before the real one fixes spacing issues */
#pageInfoBoxIE6Hack {
	background: #000000 url(../images/base/searchGradient.jpg) left top repeat-x;
	clear:both;
	float: none;
}

input#searchButton {
	padding: 2px 7px 2px 7px;
	background-color:#EA8154;
	line-height: 1em;
	color:#FFFFFF;
	border: 1px white solid;
    font-family: "Avant Garde", "Avant Garde Gothic", "Century Gothic", "Trebuchet MS", Arial, sans-serif; 
}

#pageInfoBox { /* this should be EXACTLY the same as searchBox */
	background: #000000 url(../images/base/searchGradient.jpg) left top repeat-x;
/*	border: white 1px solid; */
	clear:both;
	float:none;
	padding: 26px 0px 0px 0px;
}
#pageInfoBoxIE6Hack { /*searchBoxIE6Hack.
don't know why this works, but calling this div right before the real one fixes spacing issues */
	background: #000000 url(../images/base/searchGradient.jpg) left top repeat-x;
	clear:both;
	float: none;
}

/* this is used if we have a search box AND a doc title */
#pageInfoBoxBelowSearch {
	background: #000000;
	background-image: none;
	clear:both;
	float:none;
	margin: 10px -10px 0px -10px; /* L & R margins are negative, so that the grey divider border cuts through the padding set by pageInfoBox. */
	padding: 8px 10px 0px 10px; /* L & R padding is widened to push text back in the regular padding (because it's offset by margin the line above) */
	border-top: 1px solid #555555;
}

/*
 This is the style for the top of the doc,
 right where the search bar normally is
 (or the title used just under the search box.
 Currently only using in Professional services
 Using a div instead of H1 because H1 would eat up the whole line
 AH: Modified to fit in sub_nav_wrapper appropriately
*/
.pageTitle {
	font-size: 1.6em;
	margin: 5px 0px 10px 10px;
	color:#E3E3E3;
	font-weight: bold;
    clear: left;
	float: left;
	line-height:1.1em;
}


.bannerTitle{
	font-size: 1.6em;
	color:#E3E3E3;
	font-weight: bold;
	clear: left;
	float: left;
	line-height:1.2em;
	margin: 5px 5px 5px 10px;
}


/*
 Sub Nav Wrapper holds anything immediately below the nav_bar in a grey box.
*/
.sub_nav_wrapper {
	background-color: #333;
	border-top: 1px solid #eb5f44;
	border-bottom: 1px solid #eb5f44;
	width: 100%;
	height: 37px;
}

/*
 subNavBar holds the whole sub-category row of pages, floated right.
 Has a mix of three parts,
 Enclosing div id=subNavBar
 <a> other pages </a>
 <a class="selected"> current page </a>
*/
.subNavBar {
	list-style: none;
	margin: 5px 10px 5px 0px;
	float: right;
	line-height:2em;
	color:#EA8154; /* this is unconventional. Usually, non-links should NOT be orange. However, this is the way to get the |'s (pipe) the right color. Will make a span just for the "selected" color (backwards from usual) */
}

.subNavBar a.selected{
	color: #E3E3E3;
}

.subNavBar a img{
	vertical-align:top;
}


.subNavBar span.shareLinks{
	font-size: 0.9em;
	/*vertical-align: middle;*/
	color:#999999;
}

.subNavBar span.shareLinks img{
	padding-top: 5px;
}

/*
  Breadcrumbs ** Changed by AH **
  see /docs/breadcrumbs.txt
*/

#pageBreadcrumb{
	padding: 0.1em 0px 0px 0px;
	margin: 0px 0px 0.2em 0px;
	line-height:1.0em;
	clear: both;
	color:#EA8154; /* this is unconventional. Usually, non-links should NOT be orange. However, this is the way to get the |'s (pipe) the right color. Will make a span just for the "selected" color (backwards from usual) */
}

#pageBreadcrumb span.selected{
	color: #E3E3E3;
}

#pageBreadcrumb a {
	font-weight: normal;
	padding: 0px 0.4em 0px 0.4em;
}

#pageBreadcrumb a.endCrumb {
	font-weight: bold;
	font-size: 130%;
}