@charset "utf-8";

/**vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv**/
/**vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv BEGIN MAIN STYLES vvvvvvvvvvvvvvvvvvvvvvvvvvv**/
/* uncommenting below will cause css to not validate, but does allow you
   to render a style for the scrollbar on browsers that support it */

/* presentation width and height. define as necessary for custom skins */
.presoWidth {width:997px;}
.presoHeight {height:624px;}
.presoClip {clip:rect(0px,997px,624px,0px);}
   
/*html {
	scrollbar-arrow-color:#999999; 
	scrollbar-track-color:#ffffff; 
	scrollbar-face-color:#d7d7d7; 
	scrollbar-highlight-color:#ffffff; 
	scrollbar-3dlight-color:#aaaaaa; 
	scrollbar-darkshadow-color:#aaaaaa; 
	scrollbar-shadow-color:#ffffff; 
}*/
* {margin:0;padding:0}

/* main body styles. background color of the skin. bg image overrides color. */
body {margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:.8em;color:#000000;background-color:#666666;}
/* mac hide \*/
html,body{height:100%;width:100%;overflow:hidden;}
/* end hide */

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

h1,h2,h3 {display:inline;}
h1 {margin:0px;padding:0px;font-size:1.2em;}
h2 {margin:0px;padding:0 30px 0 0;font-size:14px;color:#333;font-weight:bold;}
h3 {margin:0px;padding:0px;font-size:12px;color:#333;font-weight:bold;}

/* global link styles */
a:link, a:visited {color:#ffffff;text-decoration:none;}
a:hover, a:active {color:#ffcc00;text-decoration:underline;}

hr {height:1px;display:block;border:0px;margin:2px;color:#999999;background-color:#999999;}

.coord { position:relative; }
.hid   { display:none; }
.sho   { display:block; }

.clearBoth {clear:both;}

/**^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ END MAIN STYLES ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^**/
/**^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^**/


/**vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv**/
/**vvvvvvvvvvvvvvvvvvvv BEGIN TEMPLATE ELEMENT LAYOUT STYLES vvvvvvvvvvvvvvvvvv**/
/* loading curtain */
#screenlaunchcover {
	position:absolute;left:0px;top:0px;z-index:9999;
	width:100%;height:100%;padding:10px;background-color:#ffffff;
}
/* interface background elements */
/* use pageOuter/pageInner to absolutely position containing element to middle. */
#pageOuter{height:100%;width:100%;display:table;vertical-align:middle;}
/* define height of containing element to acheive vertical align. */
#pageInner {position:relative;vertical-align:middle;display:table-cell;}
/* bgOuter is background element of the skin that gets absolutely positioned to center of page. */
#bgOuter {position:relative;background:#ffffff url(bg_main.jpg);
	margin-left:auto;margin-right:auto;}
/* apply a blue border for fullscreen mode */
.bgOuter_fs {border:1px solid #384d57;}
/* bgInner is the containing element for the video, slide and region2. */
#bgInner {position:absolute;top:61px;margin:0px auto;/*min-width:320px;*/}

/* styles for the black container around modules */
#bgInner .topSlice .corner,
#bgInner .footSlice .corner {height:18px;} /* height of header and footer slice */
/* for the next group of styles, uncomment the underscore hack and change
   the reference in the background property from GIF to PNG to acheive a
	 neat aero effect. this will cause css to not validate */
#bgInner .topSlice {
	background:transparent url(inner_tl.gif) no-repeat 0px 0px;
	/*_background-image:url(inner_tl.gif);*/
	margin-right:18px; /* space for the top right corner */
}
#bgInner .topSlice .corner {
	background:transparent url(inner_tr.gif) no-repeat right 0px;
	/*_background-image:url(inner_tr.gif);*/
	margin-right:-18px; /* pull back the width of above margin to expose corner */
}
#bgInner .bodySlice {
	background:transparent url(inner_ml.gif) repeat-y 0px 0px;
	/*_background-image:url(inner_ml.gif);*/
	margin-right:18px; /* space for the right side */
}
#bgInner .bodySlice .corner {
	background:transparent url(inner_mr.gif) repeat-y right 0px;
	/*_background-image:url(inner_mr.gif);*/
	margin-right:-18px; /* pull back the width of above margin to expose side */
}
#bgInner .bodySlice .corner .s {margin:0px 18px;overflow:hidden;}
#bgInner .footSlice {
	background:transparent url(inner_bl.gif) no-repeat 0px 0px;
	/*_background-image:url(inner_bl.gif);*/
	margin-right:18px; /* space for the bottom right corner */
}
#bgInner .footSlice .corner {
	background:transparent url(inner_br.gif) no-repeat right 0px;
	/*_background-image:url(inner_br.gif);*/
	margin-right:-18px; /* pull back the dwidth of above margin to expose corner */
}

/* header elements */
#header {height:61px;position:absolute;z-index:50;top:0px;left:0px;overflow:auto;}
#logo {height:61px;overflow:hidden;position:absolute;z-index:20;left:0px;top:0px;}
#title {position:absolute;color:#dd9c00;right:10px;bottom:0px;text-align:right;}
.titlePointer {color:#d15b05;padding-left:8px;}

/* div grouping of the video and region2 elements. achieves the 1px
	 gap between the video/region2 and the slide. */
/* this class is activated by default. comment out below and uncomment line 98 to swap video position */
.videoR2Group {position:relative;z-index:9999;width:320px;float:left;margin-left:-1px;margin-right:1px;}
/* uncomment below to put swap video position to right of slide */
/* .videoR2Group {width:320px;float:right;margin-right:-1px;margin-left:1px;} */

.slideR3Group {position:relative;margin-bottom:-3px;}

/* video elements */
#video {margin-bottom:1px;}

/* region2 elements */
#r2Layer {overflow:auto;}

/* region3 elements */
#r3 {width:640px;}

/* footer elements */
#footer {font-size:.8em;position:absolute;bottom:8px;color:#c3e5f0;}
#footer a {color:#c3e5f0;}
#footer .footerLeft {float:left;padding-left:10px;}
#footer .footerRight {float:right;padding-right:10px;}

#closeLayer {font-size:.8em;font-weight:bold;position:absolute;z-index:241;right:5px;top:5px;}
/**^^^^^^^^^^^^^^^^^^^^ END TEMPLATE ELEMENT LAYOUT STYLES ^^^^^^^^^^^^^^^^^^^^**/
/**^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^**/


/**vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv**/
/********************** BEGIN MODULE HEADER ELEMENT STYLES **********************/
/* background styles for header of each module */
.moduleHeader {height:26px;line-height:26px;margin-bottom:1px;background:transparent url(runner.gif) repeat-x top right;}

/* styles for the buttons that appear on the module headers */
.moduleHeaderControls {display:inline;}
.moduleHeaderControls dl { display:inline; }
.moduleHeaderControls dt { float:left; margin:0px 5px;}
.moduleHeaderControls a,
.moduleHeaderControls a:link,
.moduleHeaderControls a:visited { padding:0px 0px 0px 25px; color:#ffffff;
   font-weight:bold; font-style:italic; font-size:11px; line-height:26px; text-decoration:none; }
.moduleHeaderControls a:hover,
.moduleHeaderControls a:active {color:#ffcc00;}
.moduleHeaderControls a span,
.moduleHeaderControls a:hover span {line-height:26px;}
/*.moduleHeaderControls a,
.moduleHeaderControls a span {display:block;float:left;cursor:pointer;}*/

/* Hide from IE5-Mac \*/
.moduleHeaderControls a, .moduleHeaderControls a span {float:none;}
/* End hide */

/* icons for the buttons */
#zoomVid {background:url(icon_zoomVid.gif) center left no-repeat;padding-right:5px;}
#thumbs {background:url(icon_thumbs.gif) center left no-repeat;padding-right:2px;}
#zoomSlide {background:url(icon_zoomSlide.gif) center left no-repeat;padding-right:8px;}
/************************ END MODULE HEADER ELEMENT STYLES **********************/
/**^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^**/