@charset "UTF-8";
/* Homepage CSS Document */

@import "/css/basestyle2.css";

#header {
width:1024px;
height:104px;
background:#039 url(/images/main_site_sprite.png) no-repeat 0 0;
}

#header img {
height:104px;
width:480px;
float:right;
}

#ImageHolder {
height:104px;
width:480px;
float:right;
}

#homerightDivider {
border-bottom:1px solid #CCC;
margin:20px 36px 10px 36px;
}

/* FEATURE AREA */
#staticFeature {
margin-bottom:25px;
}

#staticFeature img {
border:0;
margin-bottom:15px;
}

#staticFeature p {
font-size:12px;
line-height:15px;
margin:0 0 25px 110px;
}

#featureDivide {
border-bottom:1px solid #CCC;
margin:0 90px;
}

#new {
float:left;
padding-top:3px;
}


/* MAIN FEATURE SLIDER */
#featureslide {
padding:0;
margin:0 0 10px 0;
width:465px;
overflow:hidden;
}

#featureslide img {
border:0;
}

#featureslide .scrollable ul {
list-style:none;
margin:0;
font-size:12px;
padding:10px 0 0 20px;
}

#featureslide .scrollable ul li {
margin:0;
padding:0;
list-style-image:url(/images/li_bluedot.png);
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width:465px;
height:310px;
/* custom decorations */
border-bottom:1px solid #CCC;
margin-bottom:5px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}

.items div {
float:left;
width:465px;
padding:0;
}

/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}

.scrollable img.hover {
background-color:#123;	
}

#featureslide .scrollable p {
padding:10px 0 5px 0;
margin:0;
font-size:12px;
}

/* SLIDER NAVIGATION */

/* position and dimensions of the navigator */
.navi {
margin-left:195px;
width:140px;
height:22px;
}

/* items inside navigator */
.navi a {
width:10px;
height:10px;
float:left;
margin:5px;
background:url(/images/arrow/nav10px.png) 0 0 no-repeat;
display:block;
font-size:1px;
}

/* mouseover state */
.navi a:hover {
background-position:0 -10px;
}

/* active state (current page state) */
.navi a.active {
background-position:0 -20px;
}

/* END - MAIN FEATURE SLIDER */


/* Wrapper for home page contents since everything is floating */

#maincontent .whiteback {
padding-bottom:10px;
}

#maincontent #wrapper {
width:100%;
overflow:hidden;
clear:both;
padding:10px 0 0 0;
margin:0;
position:relative;
}

#homeleft {
float:left;
width:465px;
overflow:hidden;
display:inline;
border-right:1px solid #ccc;
padding:0 18px 600px 18px;
margin:0 0 -600px 0;
}

#homeright {
float:right;
width:285px;
overflow:hidden;
display:inline;
padding:0 18px 600px 18px;
margin:0 0 -600px 0;
}

#homeright div#notice {
background-color:#FFECE1;
padding:10px;
margin:-10px 0 40px 0;
border:2px solid #B09C8B;
border-radius:10px;
}

#homeright div#notice h5 {
margin:0 0 3px 0;
font:bold 1.2em/1.1em Arial, Helvetica, sans-serif;
text-align:center;
color:#800000;
}

#homeright div#notice p {
margin:0;
font:0.9em/1.2em Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 0;
text-align:center;
}

#maincontent #wrapper h3 {
color:#000;
font-size:18px;
font-weight:bold;
padding:0 0 8px 0;
border-bottom:1px solid #000;
margin:0 0 5px 0;
}

/* HIGHLIGHTS AREA*/

.highlight,
.highlight1,
.highlight2,
.highlight3 {
border-bottom:1px dotted #CCC;
padding:15px 0;
overflow:hidden;
clear:both;
}

.highlight1 {
height:100px;
}

.highlight2 {
height:124px;
}

.highlight3 {
height:170px;
}

.highlight:last-of-type,
.highlight1:last-of-type {
padding:15px 0 10px 0;
border-bottom:0;
}

#highlights img {
border:1px solid #666666;
float:left;
margin:0 10px 0 0;
}

#highlights img.noshadow {
box-shadow:none;
}

#highlights h5 {
font-size:14px;
font-weight:bold;
margin:0 0 5px 0;
}

#highlights h5.attention {
color:#FFFBFB;
font-size:17px;
font-weight:bold;
text-align:left;
margin:0 0 8px 150px;
padding:3px 3px 3px 8px;
background-color:#06C;
}

#maincontent #highlights p {
font-size:12px;
line-height:15px;
margin:0;
padding:0;
}

#maincontent #highlights ul {
margin-top:6px;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}

#maincontent #highlights ul li {
font-size:12px;
line-height:14px;
margin-top:0;
margin-bottom:5px;
padding:0 30px 0 0;
color:#F30;
}

#maincontent #highlights ul li.last {
margin-bottom:0;
}

/*  This is style for the scrolling message bar in the News and Blog box.
#maincontent #scrollmessage {
width:285px;
height:18px;
margin:0 0 25px 0;
}

#maincontent #scrollmessage marquee {
background-color:#000;
color:#F33;
padding-top:4px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
box-shadow:1px 1px 5px #444;
border-radius:4px;
behavior:url(/css/PIE_uncompressed.htc);
position:relative;
zoom:1;
}

#maincontent #scrollmessage marquee a {
color:#76ACFF;
}

#maincontent #scrollmessage marquee a:hover {
color:#FFF;
}
*/

#maincontent #trending {
	background-color:#EDEDED;
	padding:10px;
	margin-bottom:30px;
	border:1px solid #666666;
	border-radius:10px;
	}

#maincontent #trending a {
	font-weight:bold;
}

#maincontent #trending h3 {
	color:#666666;
	font-size:26px;
	font-weight:900;
	text-align:center;
	margin:0 0 0 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #666666;
}

#maincontent #trending ul {
	padding-left:25px;
	margin: 10px 0 0 0;
}

#maincontent #trending ul li {
	margin-bottom: 8px;
	font-size:14px;
}



#homeright h5.announcement {
font-size:15px;
font-weight:bold;
margin:0px 0 24px 0;
padding:0;
text-align:center;
}

#maincontent #distnews .newsdate {
font-size:9px;
color:#777;
padding:10px 0 0 0;
margin:0 0 3px 0;
}

#distnews h5 {
font-size:12px;
font-weight:bold;
margin:0 0 3px 0;
padding:0;
}

#maincontent #distnews p {
font-size:12px;
line-height:15px;
margin:0 0 5px 0;
padding:0;
}

#homeright #distnews #seemore {
text-align:right;
font-size:11px;
padding:0 40px 0 0;
}

/* Featured video area */
#featuredvideos {
margin-top:35px;
}

#featuredvideos .video,
#featuredvideos .video-last {
height:79px;
padding:10px 0;
margin:0;
width:288px;
border-bottom:1px dotted #CCC;
overflow:hidden;
}

#featuredvideos .video-last {
margin-bottom:10px;
}

#featuredvideos a.video-zoom1,
#featuredvideos a.lightbox-youtube {
display:block;
width:140px;
height:79px;
float:left;
margin:0 10px 0 0;
box-shadow:2px 2px 4px #333;
behavior:url(/css/PIE_uncompressed.htc);
position:relative;
zoom:1;
background-repeat:no-repeat;
background-image:url(/images/videothumbs/HomePageVideos_sprite.jpg);
}

#featuredvideos a.video-zoom1.popupwinter {
background-position:0 0;
}

#featuredvideos a.video-zoom1.popupwinter:hover {
background-position:0 -79px;
}

#featuredvideos a.video-zoom1.popupsummer {
background-position:-140px 0;
}

#featuredvideos a.video-zoom1.popupsummer:hover {
background-position:-140px -79px;
}

#featuredvideos a.video-zoom1.whyrestrictions {
background-position:-280px 0;
}

#featuredvideos a.video-zoom1.whyrestrictions:hover {
background-position:-280px -79px;
}

#featuredvideos a.video-zoom1.whyconserve {
background-position:-420px 0;
}

#featuredvideos a.video-zoom1.whyconserve:hover {
background-position:-420px -79px;
}

#featuredvideos a.lightbox-youtube.apopkatour {
background-position:-560px 0;
}

#featuredvideos a.lightbox-youtube.apopkatour:hover {
background-position:-560px -79px;
}

#featuredvideos a.video-zoom1.woodpecker_banding {
background-position:-700px 0;
}

#featuredvideos a.video-zoom1.woodpecker_banding:hover {
background-position:-700px -79px;
}

#featuredvideos h5 {
font-size:12px;
line-height:13px;
margin:0 0 5px 0;
}

#maincontent #featuredvideos p {
font-size:12px;
line-height:14px;
margin:0;
}

#maincontent #featuredvideos #viewvid {
text-align:right;
font-size:11px;
padding:0 20px 0 0;
}