@import url('Reset.css');

/*===========================================================
    HEADER
===========================================================*/
body { text-align:center; }
#container { text-align:left; }
#header {width:960px; margin:0 auto; height:80px;position:relative;}
#header #logo { position:absolute;top:15px;left:12px;}
#header #newsletter { width:311px;position:absolute;top:10px;right:10px; }
#header #newsletter .SubscribeField { float:left;font-size:1.1em;padding:4px;height:14px;border:solid 1px #888;color:#888;width:220px; } 
#header #newsletter .SubscribeButton { float:left;height:24px;width:73px;margin:0 0 0 -2px; }
#header #newsletter #newsletterMarketing { width:279px;border-left:1px solid #888;border-right:1px solid #888;border-bottom:1px solid #888;background:#f9f9f9;margin:0;padding:10px;display: none }
#header #newsletter #newsletterMarketing .closeform { color:#676767;text-decoration:underline;font-size:1.1em;cursor:pointer; }
#header #newsletter #newsletterMarketing label { color:#676767;font-size:1.2em; }
#header #newsletter #newsletterMarketing .SubscribeDropdown { color:#676767;margin:5px 0 10px;font-size:1.1em;width:160px; }
#header #newsletter #newsletterMarketing .MarketingSubmit { float:right;height:24px;width:49px; }
#header #newsletter span {display: block;}
/*#header #newsletter #newsletterMarketing { display:none; }*/

/* ------------ HEADER NAVIGATION -------------- */
#navigation {background:#2660b2; color:#fff; font-size:1.7em; text-align:center; }
#navigation ul {width:510px; margin:0 auto; list-style-type:none; }
#navigation ul li {float:left; margin:0; display:inline; width:170px; height:30px;}
#navigation ul li a {display:block; color:#fff; padding:5px 12px; outline: 0;}
#navigation ul li a.active, #navigation ul li a:hover {background:#fff; display:block; color:#2660b2;text-decoration:none;}
#homeFlashHolder { background: white; width: 700px; margin: 0 auto;}

#flashfeature { background:url('../Images/flash-feature-bg.gif') top left repeat-x;height:379px; }
 
/*===========================================================
    MAIN CONTENT
===========================================================*/
#content {width:940px; padding:0 10px; margin:40px auto 50px; color:#464646;font-size:1.3em; }
#content #centralColL {float:left;display: inline; width:580px;padding:0 50px 0 0; border-right:1px solid #d6d6d6;position: relative; }
#content #centralColL p { padding:0 0 30px 13px; }
#content #centralColR {float:right; width:260px;display: inline;position: relative}
#content #centralColR p { padding:0 0 0 13px; }
#content #centralColR img.daily-apple { padding:0 0 0 10px; }
#content #centralColR p.iGoogle { background:url('../Images/igoogle-logo.gif') 0 2px no-repeat;padding:0 0 0 25px;margin:5px 0 0 13px;} 



/* ------------ Q & A -------------- */



/*==========================================================
    CAROUSEL - Profile page
==========================================================*/
#carouselWrap {height: 500px;}
#carousel {margin-top: 17px;display: inline; width: 300px; position: absolute; top: 0; left: 0;}
#carousel #viewport {width:380px;overflow: hidden;position: relative;}
#carousel a {width: 150px;display: block;margin: 1px 0px;border: 4px solid white;outline:0;}
#carousel a:hover, #carousel a.selected{border:4px solid #90b430;}
#carousel #carouselSlider {position: relative;}
#carousel #carouselSlider #carouselImages {position: absolute; left: 0; top: 0; width: 150px;}

#carousel #carouselSlider #headings {position: absolute; left: 160px;}
#carousel #carouselSlider #headings p {height: 35px;margin:0; padding: 45px 0 0 0;border: 4px solid white;}
#carousel .disabled {color: #eee;}
#carousel a#button_backwards,a#button_forwards {border: none;outline: 0;margin: 5px 0;text-indent: -2000em;cursor: pointer;background: transparent url(../Images/carousel-images/arrowUp.gif) no-repeat 72px 0px; }
#carousel a#button_backwards:hover,a#button_forwards:hover {border: none;}

#carousel a#button_backwards {background: transparent url(../Images/carousel-images/arrowUp.gif) no-repeat 72px 0px; }
#carousel a#button_backwards.disabled {background: transparent url(../Images/carousel-images/arrowUpDisabled.gif) no-repeat 72px 0px;}
a#button_forwards {text-indent: -2000em;cursor: pointer;background: transparent url(../Images/carousel-images/arrowDown.gif) no-repeat 72px 0px;position: relative; top: -145px;  }
a#button_forwards.disabled {background: transparent url(../Images/carousel-images/arrowDownDisabled.gif) no-repeat 72px 0px;}
#carousel .clicker {display: none}





/*========================================================
    SLIDER - Profile page
========================================================*/

#slider-wrap a:focus {outline:none}
#slider-wrap #slider {margin:30px 0; }
#slider-wrap .stripViewer {position:relative; overflow:hidden; width:600px; clear:both; }
#slider-wrap .stripViewer .panelContainer {position:relative; float: left;display: inline; left:0; top:0; list-style-type:none;}
#slider-wrap {width: 600px; display: inline; }
#profiles {width: 600px;float: left; display: inline}
#slider-wrap .stripViewer .panelContainer .panel {float:left; height:100%; display: inline; position:relative; width:600px;}
#slider-wrap #sections ul {float: right;display: inline;}
#slider-wrap #sections ul li {list-style: none; float: left;display: inline;}
#slider-wrap #sections ul li a  {color: #666;margin-left: 3px;}
#slider-wrap #sections ul li a.current {text-decoration: underline}
#slider-wrap .panel h3 {border-bottom: 1px solid #d6d6d6;padding-bottom: 5px;}
#slider-wrap .panel .wrapper p {margin: 0 0 10px 0; padding: 0;}
#slider-wrap .panel .wrapper h4 {margin: 20px 0 0 13px; color: #989898; font-weight: bold; }

/*========================================================
    SLIDER - videoblog page
========================================================*/

/* Videoblog/Default.aspx slider and Theatre/Default.aspx styles */
#profileHome #slider,#theatre #slider{margin: 0;}
#profileHome #sections ul,#theatre #sections ul {float: left;margin: 0 0 20px 0;padding:0;border-bottom: 1px solid #d6d6d6; width: 600px;} 
#profileHome #sections ul li a,#theatre #sections ul li a {text-indent: -2000em;margin:0;padding:0;}
#profileHome #sections ul li.graduates a,#theatre #sections ul li.graduates a {display: block; background: transparent url(../Images/graduatesHeader.gif) no-repeat; width: 120px; height: 25px;}
#profileHome #sections ul li.graduates a:hover,#profileHome #sections ul li.graduates a.current,#theatre #sections ul li.graduates a:hover,#theatre #sections ul li.graduates a.current {background: transparent url(../Images/graduatesHeader.gif) no-repeat 0 -25px; width: 120px; height: 25px;}
#profileHome #sections ul li.gateway a,#theatre #sections ul li.gateway a {display: block; background: transparent url(../Images/gatewayHeader.gif) no-repeat; width: 205px; height: 25px;}
#profileHome #sections ul li.gateway a:hover,#profileHome #sections ul li.gateway a.current,#theatre #sections ul li.gateway a:hover,#theatre #sections ul li.gateway a.current {background: transparent url(../Images/gatewayHeader.gif) no-repeat 0px -25px; width: 205px; height: 25px;}
#profileHome #sections ul li.breakingthrough a,#theatre #sections ul li.breakingthrough a {display: block; background: transparent url(../Images/breakingthrough.gif) no-repeat; width: 168px; height: 25px;}
#profileHome #sections ul li.breakingthrough a:hover,#profileHome #sections ul li.breakingthrough a.current,#theatre #sections ul li.breakingthrough a:hover,#theatre #sections ul li.breakingthrough a.current {background: transparent url(../Images/breakingthrough.gif) no-repeat 0 -25px; width: 168px; height: 25px;}

#profileHome .panel {float: left;position: relative;}
#profileHome #graduates .leader,#profileHome #gateway .leader,#profileHome #breakingthrough .leader {border-bottom: 1px solid #d6d6d6}
#profileHome #slider-wrap .panel .wrapper p{margin: 0 0 10px 0; padding: 0;}
#profileHome #slider-wrap .panel .wrapper h4 {margin: 0;}
#profileHome .thumbnails  {clear: left;float: left;width: 600px;padding: 20px 0;}
#profileHome .thumbnails h3  {color: #888; font-weight: bold;border: none}
#profileHome .thumbnails {position: relative;width: 600px;}
#profileHome .thumbnails .tooltip { float:left;width:200px;position:relative; }
#profileHome .thumbnails .tooltip img,#profileHome .thumbnails .tooltip a img,#profileHome .thumbnails .notooltip img  {margin: 5px 0 5px 0;border: 4px solid #fff;}
#profileHome .thumbnails .tooltip img.last {margin-right: 0;}
#profileHome .thumbnails .tooltip a:hover img {border: 4px solid #90b331;}
#profileHome .thumbnails .tooltip .tooltipPopup {width: 250px;display:none;position: absolute;left: 135px; top: -20px; color: White;z-index:1001; }
#profileHome .thumbnails .tooltip .tooltipPopup div {margin: 0;width: 190px;float: left;padding: 16px;background:transparent url(../Images/popupRepeat.png) repeat;}
#profileHome .thumbnails .tooltip .tooltipPopup .popupArrow {height: 70px;width: 26px; margin: 0;padding: 0; background: transparent url(../Images/popupArrow.png) no-repeat 0px 20px; float: left;}
#profileHome .thumbnails .tooltip .tooltipPopup div h4,#profileHome .thumbnails .tooltip .tooltipPopup div p {color: #fff;}
#profileHome .thumbnails .tooltip .tooltipPopup h4 {margin-bottom: 0; font-weight: bold;}

/* These classes only need to be applied when javascript has added a class of .js to the body */
.js #profileHome #slider-wrap #gateway,.js #profileHome #slider-wrap #breakingthrough {display: none}
object#BlogVideosSWF, object#HomePage {width: 700px; margin: 0 auto;}

/*=========================================================
    SLIDER - Theatre page
=========================================================*/

#theatre #slider-wrap .panel p {margin: 0;padding: 0}
#theatre #slider-wrap .panel p {margin: 5px 0}
#theatre  #slider-wrap .panel h4{margin: 0; padding: 0;}
#theatre img {float: left; margin-top: 15px;}
#theatre .name {float: left; width: 400px;color: #90b430; margin: 64px 0 0 8px; } 
#theatre #slider-wrap .panel .name h4,#theatre #slider-wrap .panel .name h5 {color: #90b430; font-weight: normal;}
#theatre .main {padding: 10px 0; clear: left; border-bottom: 1px solid #d6d6d6;}
#theatre .enter {position: relative; left: 560px; color: #666;}

#theatreHeadGateway img, #theatreHeadBreaking img, #theatreHeadGraduates img {float: left;}
#theatreHeadGateway,#theatreHeadBreaking {display: none}
#theatreHeadGateway,#theatreHeadGraduates,#theatreHeadBreaking {margin: auto; width: 700px; height: 350px; background: #fff;padding: 0px 20px 0 0px;}
#theatreHeadGateway div,#theatreHeadGraduates div ,#theatreHeadBreaking div {float: left; width: 400px; font-size: 1.3em; padding: 20px 0 0 20px;}

#theatreHeadGraduates h2 {color: #8db532; background: none; padding: 0; }
#theatreHeadBreaking h2 {color: #f05176; background: none; padding: 0;}
#theatreHeadGateway h2 {color: #177bc7; background: none;  padding: 0;}
/*=======================================================
 THEATRE - Chat page

=======================================================*/
#theatreHeaderContainer {margin: auto; width: 730px; height: 350px; background: #fff;padding: 0px 20px 0 0px;}
#theatreHeaderContainer img  {float: left;}
#theatreHeader {padding-top: 25px; width: 450px;float: left;}
#theatreHeader h1,#theatreHeader h2 {color: #2660b2; padding-top: 20px; font-size: 1.8em;background-image: none; margin: 0px 0; padding: 0;font-weight: bold}
#theatreHeader h1 {padding-bottom: 15px;}
#theatreHeader h2 {font-size: 1.4em; padding: 4px 0;}
#theatreHeader p {font-size: 1.2em; margin-top: 15px;}

#theatreChat #summary  {margin-bottom: 15px; width: 500px;}
#theatreChat #summary img {float: left;display: inline}
#theatreChat #summary h4 {color: #90b430; margin: 50px 0 20px 5px; float: left;}
#content #theatreChat p {clear: left; margin: 10px 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #d6d6d6}
#content #theatreChat p.chatHeader {border-bottom: none; margin: 0; padding: 0;}
#theatreChat h1 {text-indent: -2000em; background: transparent url(../Images/qaHeader.gif) no-repeat 0 0; padding-bottom: 5px; border-bottom: 1px solid #ccc;height: 20px;}
#theatreChat .question {clear: right;background: #fcfcfc; border: 1px solid #6a6a6a; margin: 7px 0; padding: 8px;}
#content #theatreChat .question p, #content #theatreChat .answer p{border-bottom: none; margin: 0 0 10px 0;padding: 0;}
#content #theatreChat .answer {background: #fcfcfc; border: 1px solid #96b93b;margin: 7px 0; padding: 8px}
#theatreChat label {font-weight: bold;color: #989898; display: block; margin-top: 10px;}
#theatreChat input, #theatreChat textarea {width: 573px;}
#theatreChat input.buttonsubmit {float: right; margin: 5px 0px 10px 0; width: 60px;}
.jcarousel-container { position:relative; }
.jcarousel-clip { z-index:2;padding:0;margin:0;overflow:hidden;position:relative; }
.jcarousel-list { z-index:1;overflow:hidden;position:relative;top:0;left:0;margin:0;padding:0; }
.jcarousel-list li, .jcarousel-item { float:left;list-style:none;width:300px;height:80px; }
.jcarousel-next { z-index:3;display:none; }
.jcarousel-prev { z-index:3; display: none; }
.jcarousel-skin .jcarousel-container { }
.jcarousel-skin .jcarousel-container-vertical { width:300px;height:270px;padding:40px 0; }
.jcarousel-skin .jcarousel-clip-vertical { width:300px;height:270px; }
.jcarousel-skin .jcarousel-item { width:300px;height:90px; }
.jcarousel-skin .jcarousel-item-vertical { margin-bottom:0px; }
.jcarousel-skin .jcarousel-item-placeholder { background:#fff;color:#000; }
/** Vertical Button **/
.jcarousel-skin .jcarousel-next-vertical, .jcarousel-skin .jcarousel-next-vertical:hover { position:absolute;bottom:5px;left:70px;width:14px;height:13px;cursor:pointer;background: transparent url(../Images/carousel-images/arrowDown.gif) no-repeat 0 0; }
.jcarousel-skin .jcarousel-next-disabled-vertical, .jcarousel-skin .jcarousel-next-disabled-vertical:hover { cursor:default;position:absolute;bottom:5px;left:70px;width:14px;height:13px;background: transparent url(../Images/carousel-images/arrowDownDisabled.gif) no-repeat 0 0; }
.jcarousel-skin .jcarousel-prev-vertical, .jcarousel-skin .jcarousel-prev-vertical:hover { position:absolute;top:0px;left:70px;width:14px;height:13px;cursor:pointer;background:transparent url(../Images/carousel-images/arrowUp.gif) no-repeat 0 0; }
.jcarousel-skin .jcarousel-prev-disabled-vertical, .jcarousel-skin .jcarousel-prev-disabled-vertical:hover  { position:absolute;top:0px;left:70px;width:14px;height:13px;cursor:default;background:transparent url(../Images/carousel-images/arrowUpDisabled.gif) no-repeat 0 0; }

/*======================================================
 NEWS AND EVENTS 
========================================================*/

#newsEvents {margin-top: 15px;}
#newsEvents .tabs {display: none} 
#newsEvents .tabs p {margin: 15px 0 0 0; padding: 0;}
#newsEvents ul {float: left;margin: 0 0 20px 0;padding:0;border-bottom: 1px solid #d6d6d6; width: 600px;}
#newsEvents ul li {list-style: none; float: left;} 
#newsEvents #tabs ul li a {text-indent: -2000em;margin:0;padding:0;}
#newsEvents table {clear: left; float: left;}
#newsEvents #div1 a {color: #2660b2}
#newsEvents #tabs ul li a {}
#newsEvents #tabs ul li a#tab1 {background: transparent url(../Images/newsTabs.gif) no-repeat 0 0; width: 77px; height: 24px;text-indent: -2000em; display: block;}
#newsEvents #tabs ul li a#tab2 {background: transparent url(../Images/eventsTabs.gif) no-repeat 0 0; width: 72px; height: 24px;text-indent: -2000em;display: block;}
#newsEvents #tabs ul li a#tab1:hover,#newsEvents #tabs ul li a#tab2:hover {background-position:0 -25px;}

#newsEvents table tr td b {color: #2660b2}
#newsEvents table {margin: 0; padding: 0;}

/*=========================================================
 ANSWERS
========================================================*/

#answers { }
#answers #buttons {float: right; margin-top: 10px;}
#answers p {margin: 20px 0; padding-top: 20px; line-height: 1.5em;}
#answers h2 {margin: 20px 0 3px 0 ; padding: 0 0 0 15px;text-align: left;}


.gadgetHeader {text-indent: -2000em; background: transparent url(../Images/tab.jpg) no-repeat 0 0;display: block; height: 27px; border-bottom: 1px solid #d6d6d6}
.gadgetText {margin:0; padding: 0;color: #2660b2}

/*========================================================
    DAILY APPLE
========================================================*/
h2#dailyApple {text-indent: -2000em; background: transparent url(../Images/title-daily-apple.png) no-repeat 0 0; width: 90px; height: 17px; position: relative}

#privacy p {margin: 0;}
/*===========================================================
    FOOTER
===========================================================*/
#footer { padding:75px 0 25px 0; background:#e0e0e0; position: relative; }
#footerContainer { width:940px;margin:0 auto;font-size:1.1em;padding:0 10px; }
#footer a {color:#666;}
#footer a:hover {text-decoration:underline;}
#footer p {margin:0; color:#666;}
#footer p.left {width:380px;float:left; }
#footer p.right {width:380px; float:right;text-align:right; }
#footer p.left a.rss {position: relative; background: transparent url(../Images/rss.gif) no-repeat 85px 0px; padding-right: 30px; }



/*===========================================================
    USEFUL STUFF
===========================================================*/
span.graduates { color:#8db532;font-weight: bold;}


span.breakingthro { color:#f05176;font-weight: bold; }


span.gateway { color:#177bc7;font-weight: bold; }




.screenReaderMenu {position:absolute; top:-1000px; left:-1000px; font-size:1px; line-height:1px;}
.newline {clear:both; overflow:hidden; height:0px;}
.right {float:right;}
.left {float:left;}
.textRight {text-align:right;}
.textLeft {text-align:left;}
.last {border:none;}
.headingArrow {background:  url(../Images/headingArrow.gif) no-repeat 0px 6px; padding-left: 10px;color: #90b430; font-size: 1.2em;font-weight: bold}
p.btop {text-align:right; margin-top:-8px;}