/* 
================================
Skin styles for DotNetNuke
================================
*/   


/* CSS Document */

/* GLOBAL STYLES */
	
html { height: 100%; }
body { height: 100%; margin:0; padding:0; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #333; font-size: 11px; behavior: url(/Portals/0/Skins/exxonmobil/incl/csshover2.htc);  }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; }
.clear { clear: both; }

/* background shell */
.shellTop { width: 100%; margin: 0px auto; padding: 0 0 47px 0; background: url(i/general/bkrdTop.jpg) 0 0 repeat-x #e4ebf6; }
.shellMid { width: 100%; height: 125px; margin: 0px auto; background: url(i/general/bkrdMid-1.jpg) 0 0 repeat-x; }
.shellBtm { width: 100%; margin: 0px auto; padding: 0 0 80px 0; background: #262626; border-top: 1px solid #607979; }

/* main shell */
.shell { width: 1000px; margin: 0px auto; padding: 12px 25px 0 25px; text-align: left; display: block; clear: both; } 

h1 { font-size: 36px; line-height: 44px; color: 000; font-weight: normal; margin: 0; padding: 0; }
h2 { font-size: 20px; line-height: 24px; color: #0068b3; font-weight: normal; margin: 15px 0 0 0; padding: 0; }
h3 { font-size: 12px; line-height: 18px; color: #000; font-weight: bold; margin: 0; padding: 0; }
h4 {}
h5 {}
h6 {}

.vidImg { background: url(i/index/col-3c.png) 0 10px no-repeat; text-indent: 52px; }

/* top shell - main columns */
.colLeft { width: 150px; margin: 0; padding: 0 10px 0 0; float: left; }
.colMidA { width: 470px; margin: 0; padding: 0 10px 0 0; float: left; line-height: 16px; }
.colMidB { width: 550px; margin: 0; padding: 0 10px 0 0; float: left; line-height: 16px; }
.colRightA { width: 310px; margin: 0; padding: 0; float: left; }
.colRightB { width: 230px; margin: 0; padding: 0; float: left; }

/* main navigation */
.mainnav { width: 150px; padding: 25px 0 20px 0; }
.mainnav ul { list-style: none; margin: 0; padding: 0; }
.mainnav li { width: 150px; margin: 0; padding: 0; border-top: 1px solid #d8e3f2; display: block; }
.mainnav a { color: #003333; line-height: 24px; margin: 0; padding: 0; display: block; }
.mainnav a:hover { color: #0068b3; }

.mainnav ul ul { display: none; }
.mainnav ul ul li { width: 125px; padding: 0 0 0 25px; }
.mainnav ul ul a { color: #0068b3; }
.mainnav ul ul a:hover { color: #999; }


.mainnav #section ul { display: block; text-decoration: none; }
.mainnav #section span { color: #0068b3; font-weight: bold; }
.mainnav #subsection a { color: #999; }
.mainnav .borderBtm { border-bottom: 1px solid #d8e3f2; }


/* left callout */
.callout { width: 150px; line-height: 16px; }
.callout img { margin: 5px 0 10px 0; }
.callout a { display: block; float: left; margin: 10px 0 0 0; padding: 0 5px 0 5px; line-height: 20px; color: #fff; background: #ff9900; }
.callout a:hover { text-decoration: none; background: #000; }

/* middle column */
.titleA { padding: 48px 0 0 0; }
.titleB { padding: 30px 0 0 0; }

.colMidA .blk { width: 470px; margin: 0; padding: 25px 0 20px 0; line-height: 16px; }
.colMidA .blk img { float: left; margin: 0 10px 0 0; }
.colMidA .blk .txt { float: left; width: 310px; }
.colMidA .blk .txt a { color: #0068b3; }

.colMidB .blk { width: 550px; margin: 0; padding: 25px 0 0 0; line-height: 16px; }
.colMidB .blk img { float: left; margin: 0 10px 0 0; }
.colMidB .blk .txt { float: left; width: 390px; }
.colMidB .blk .txt span { color: #0068b3; }
.colMidB .blk h2 { margin: 0; }
.colMidB .blk a:hover h2 { text-decoration: underline; }

.colMidB .blk2 { width: 550px; margin: 25px 0 25px 0; padding: 0; line-height: 16px; }
.colMidB .blk2 img { float: left; }
.colMidB .blk2 span { color: #999; padding: 0 8px 0 0; }

.colMidB .blk2 .chart { float: left; margin: 0 10px 0 0; }
.colMidB .blk2 .chart a { display: block; margin: 10px 0 0 0; color: #0066cc; font-size: 10px; line-height: 16px; }
.colMidB .blk2 .chart img { float: none; }

.colMidB .blk3 { width: 550px; margin: 0; padding: 0 0 10px 0; line-height: 16px; }
.colMidB .blk3 h2 { margin: 0; }
.colMidB .blk3 a { float: right; display: block; color: #0068b3; }
.colMidB .blk3 img { float: left; display: block; margin: 0 10px 0 0; }
.colMidB .blk3 .head { width: 550px; height: 1%; display: block; }
.colMidB .blk3 .txt { float: left; display: block; }
.colMidB .blk3 .txt a { float: none; display: block; }
.colMidB .blk3 .color1 { color: #333; }
.colMidB .blk3 .color2 { color: #999; }
.colMidB .blk3 .secTitle { display: block; float: left; margin: 0 0 8px 0; padding: 0 5px 0 5px; font-size: 12px; line-height: 16px; color: #fff; background: #000; }
.colMidB .blk3 .w390 { width: 390px; }
.colMidB .margTop { padding: 30px 0 10px 0; }

/* Used for the headings on the modules */
.mod .head { width: 550px; height: 1%; display: block; }
.mod .secTitle { display: block; float: left; margin: 0 0 8px 0; padding: 0 5px 0 5px; font-size: 12px; line-height: 16px; color: #fff; background: #000; }
.mod a { float: right; display: block; color: #0068b3; }

/* right column */
.colRightA #SearchSection { width: 310px; clear: both; margin: 10px 0 0 0; padding: 0; display: block; }
.colRightA #SearchSection input { width: 95px; margin: 0 0 0 80px; padding: 0 0 0 5px; font-size: 12px; line-height: 16px; border: 1px solid #ccc; float: left; display: block; }
.colRightA #SearchSection button { margin: 0 0 0 10px; font-size: 12px; line-height: 20px; font-weight: bold; color: #00788c; background: none; border: none; float: left; display: block; }
.colRightA #SearchSection button:hover { color: #999; }
.colRightB #SearchSection { width: 230px; clear: both; margin: 10px 0 0 0; padding: 0; display: block; }
.colRightB #SearchSection input { width: 95px; margin: 0; padding: 0 0 0 5px; font-size: 12px; line-height: 16px; border: 1px solid #ccc; float: left; display: block; }
.colRightB #SearchSection button { margin: 0 0 0 10px; font-size: 12px; line-height: 20px; font-weight: bold; color: #00788c; background: none; border: none; float: left; display: block; }
.colRightB #SearchSection button:hover { color: #999; }

.colRightA #SearchSection a { margin: 0 0 0 10px; width:55px; padding:0px; font-size: 12px; line-height: 20px; font-weight: bold; color: #00788c; background: none; border: none; float: left; display: block; }
.colRightA #SearchSection a:hover { color: #999; text-decoration:none;}

.colRightB #SearchSection a { margin: 0 0 0 10px; width:55px; padding:0px; font-size: 12px; line-height: 20px; font-weight: bold; color: #00788c; background: none; border: none; float: left; display: block; }
.colRightB #SearchSection a:hover { color: #999; text-decoration:none;}


.colRightA .tag { display: block; float: left; margin: 20px 0 20px 80px; padding: 2px 5px 3px 2px; line-height: 16px; color: #fff; background: #006ab4; }
.colRightB .tag { display: block; float: left; margin: 20px 0 20px 0px; padding: 2px 5px 3px 2px; line-height: 16px; color: #fff; background: #006ab4; }

.colRightA .link { width: 320px; height: 160px; clear: both; background: url(i/index/PowerLines-Rounded.png) 0 0 no-repeat; }
.colRightA .link a { display: block; float: left; clear: both; margin: 130px 0 0 10px; padding: 0 5px 0 5px; font-size: 11px; line-height: 18px; color: #fff; background: #ff9900; }
.colRightA .link a:hover { text-decoration: none; background: #000; }

.colRightA .blkLeft { width: 160px; float: left; margin: 20px 0 0 0; padding: 10px 10px 0 0; }
.colRightA .blkLeft h3 { line-height: 16px; }
.colRightA .blkLeft a { display: block; color: #0068b3; margin: 10px 0 0 0; padding: 5px 0 0 0; line-height: 16px; border-top: 1px solid #aec4e4; }
.colRightA .blkLeft img { float: left; margin: 0; padding: 0 5px 0 0; vertical-align: middle; line-height: 16px; }

.colRightA .blkRight { width: 130px; float: left; margin: 20px 0 0 0; padding: 10px 0 0 10px;  line-height: 16px;  }
.colRightA .blkRight h3 { line-height: 16px; margin: 0; padding: 0;}
.colRightA .blkRight .line { display: block; padding: 0; color: #0068b3; margin: 10px 0px 5px 0px; border-top: 1px solid #aec4e4; }
.colRightA .blkRight a { display: inline; color: #0068b3; margin: 5px 0 0 0; padding: 0px 0 0 0; line-height: 16px;}
.colRightA .blkRight li { 
     padding-left: 10px;
     padding-bottom:10px;
 }
.colRightA .blkRight ul
{
margin: 0;
padding: 0;
list-style: none;
}
.colRightA .blkRight .dash { 
border-top:1px solid #0068B3;
display:inline;
float:left;
margin:10px 0px 0px -8px;
padding:0px;
width:5px;
}


.colRightA .blkRight .blk1 { color: #003333; line-height: 16px; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #d1d2d4; }
.colRightA .blkRight .blk1 span { font-size: 10px; font-weight: bold; }
.colRightA .blkRight .blk2 { color: #000; font-size: 10px; line-height: 16px; }
.colRightA .blkRight .blk2 span { font-size: 10px; font-weight: bold; line-height: 16px; }
.colRightA .blkRight .blk2 a { padding: 3px 5px; font-size: 11px; line-height: 24px; color: #fff; background: #ff9900;}
.colRightA .blkRight .blk2 a:hover { text-decoration: none; background: #000; }

.colRightB .blk1 { width: 230px; margin: 0 0 20px 0; line-height: 16px; }
.colRightB .blk1 h3 { line-height: 16px; }
.colRightB .blk1 a { display: block; color: #0068b3; }
.colRightB .blk2 a { display: block; float: left; clear: both; margin: 0 0 1px 0; padding: 0 5px 0 5px; font-size: 11px; line-height: 20px; color: #fff; background: #ff9900; }
.colRightB .blk2 a:hover { text-decoration: none; background: #000; }

.colRightB .blk3 { width: 230px; margin: 0 0 20px 0; line-height: 16px; }
.colRightB .blk3 a { display: block; color: #0068b3; margin: 0 0 4px 0; padding: 0 0 4px 0; border-bottom: 1px solid #7bb0d7; }

.colRightB .fact { width: 210px; margin: 0 0 5px 0; padding: 10px; line-height: 16px; background: #fff; }
.colRightB .fact a { color: #0068b3; }
.colRightB .fact span { color: #999; }
.colRightB .marg10 { margin: 0 0 10px 0; }

.colRightB .blk4 { color: #0068b3; margin: 0 0 25px 0; }
.colRightB .marg15 { color: #0068b3; margin: 0 0 15px 0; }

.contact .form { width: 550px; margin: 22px 0 0 0; padding: 0; }
.contact .form label { width: 100px; float: left; display: block; margin: 0; padding: 0 0 0 5px; }
.contact .form input { width: 300px; float: left; display: block; margin: 0; padding: 0 0 0 5px; border: 1px solid #ccc; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 11px; }
.contact .form select { width: 305px; float: left; display: block; margin: 0; padding: 0 0 0 5px; border: 1px solid #ccc; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 11px; }
.contact .form textarea { width: 300px; float: left; display: block; margin: 0; padding: 0 0 0 5px; border: 1px solid #ccc; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-size: 11px; }
.contact .form a { width: 100px; text-align: left; margin: 0 0 0 5px; padding: 0; float: left; font-size: 18px; color: #0068b3; background-image: none; background: none; border: none; }
.contact .form a:hover { color: #999; }

.contact .form .blk { width: 550px; padding: 10px 0 0 0; margin: 0; clear: both; }
.contact .form .marg20 { margin: 20px 0 0 0; }
.contact .form .padd25 { padding: 25px 0 30px 0; }
.contact .form .reset { color: #999; margin: 0; }

/* middle shell - bkrd and get involved*/
.bkrd { height: 113px; background:url(i/general/bkrdMid-2.png) 0 0 no-repeat; }

.blkInvolve1 { width: 640px; margin: 0; padding: 6px 0 0 0; line-height: 18px; float: left; }
.blkInvolve1 h3 { width: 390px; line-height: 16px; color: #fff; margin: 0 0 8px 0; padding: 0 0 6px 0; border-bottom: 1px solid #fff; }
.blkInvolve1 .txt { width: 390px; padding: 0 0 0 80px; color: #fff; }

.blkInvolve2 { width: 310px; margin: 0; padding: 2px 0 0 0; line-height: 24px; float: left; }
.blkInvolve2 a { display: block; font-size: 14px; font-weight: bold; color: #ffff99; }
.SubscribeText { display: block; font-size: 14px; font-weight: bold; color: #ffff99; }
.btn-search { color: #000; font-size: 10px; line-height: 16px; }
.btn-search span { font-size: 10px; font-weight: bold; line-height: 16px; }
.btn-search input {line-height: 12px; padding: 3px 5px; font-size: 11px; border: none; margin: 0 0 0px 0; color: #fff; background: #ff9900;}
.btn-search input:hover { text-decoration: none; background: #000; }
.red
{
    color: maroon;
    font-weight: bold;
    font-size: 12pt;
}

.WaterMarkedTextBox
{
	color: gray;
	display: inline;
	background: AliceBlue;
	visibility: visible;
	margin:0px;
	width: 170px;
	font-size: 11px;
	padding: 2px 1px;
	border: 1px solid #3a8ab8;
}
.NormalSearchTextBox
{
	display: inline;
	background: #ffffff;
	visibility: visible;
	margin:0px;
	width: 170px;
	font-size: 11px;
	padding: 2px 1px;
	color: #555555;
	border: 1px solid #3a8ab8;
}

.WaterMarkedZip
{
	color: gray;
	display: inline;
	background: AliceBlue;
	visibility: visible;
	margin:0px;
	margin-left:5px;
	width: 50px;
	font-size: 11px;
	padding: 2px 1px;
	border: 1px solid #3a8ab8;
}

.dd-s {
	margin:0px;
	width: 140px;
	font-size: 11px;
	padding: 2px 1px;
	color: #555555;
	border: 1px solid #3a8ab8;
}

.dd-zip {
	margin:0px;
	margin-left:5px;
	width: 50px;
	font-size: 11px;
	padding: 2px 1px;
	color: #555555;
	border: 1px solid #3a8ab8;
}

/* bottom shell - footer */
.footer .lside { width: 640px; margin: 0; padding: 0; line-height: 16px; float: left; } 
 
/* a[name] { display:none; margin: 0; padding: 0 0px 0 0; visibility:hidden; width:0px; position:absolute}   */
.footer .lside a { display: block; font-size: 10px; color: #3399cc; margin: 0; padding: 0 15px 0 0; float: left; }
.footer .rside { width: 310px; margin: 0; padding: 0; line-height: 14px; float: left; color: #999; font-size: 10px; } 



/* lightbox - from http://www.huddletogether.com/projects/lightbox2/ */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px;}

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(i/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(i/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(i/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right; }	
		
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* CSS Document */

/* For IE-7 */
.colRightA form button { margin: 0 0 0 10px; font-size: 12px; line-height: 16px; font-weight: bold; color: #00788c; background: none; border: none; float: left; display: block; }

.colMidA .blk { width: 470px; margin: 25px 0 20px 0; padding: 0; line-height: 16px; }
.colMidB .blk { width: 550px; margin: 25px 0 0 0; padding: 0; line-height: 16px; }

.contact .form .blk { width: 550px; margin: 10px 0 0 0; padding: 0; clear: both; }

.contact .form .padd25 { margin: 25px 0 30px 0; }



/* For IE-6 */
* html .colLeft a img { behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); } 
* html .titleA img { width: 413px; height: 106px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); } 
* html .colMidA .blk img { width: 150px; height: 124px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .callout img { width: 150px; height: 100px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .link { width: 310px; height: 160px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .bkrd { width: 1000px; height: 125px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .vid { behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .colMidB .blk img { width: 150px; height: 100px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .colRightB .blk1 img { width: 230px; height: 230px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }
* html .chart img { width: 230px; height: 168px; behavior: url(/Portals/0/Skins/exxonmobil/incl/iepngfix.htc); }


* html .colRightA SearchSection input { width: 95px; margin: 0 0 0 40px; padding: 0 0 0 5px; font-size: 12px; line-height: 16px; border: 1px solid #ccc; float: left; display: block; }
* html .colRightA .tag { display: block; float: left; margin: 20px 0 20px 40px; padding: 2px 5px 3px 2px; line-height: 16px; color: #fff; background: #006ab4; }