

body {background-color:#e8e8e8; font-family:Verdana,Arial,sans-serif;}
.wrap {width:982px; margin:0 auto; background-color:#f1f1f1; border-left:solid 1px #c9c5c4; border-right:solid 1px #c9c5c4;}
.header {width:982px; height:101px;}
.sidebar {width:197px; height:609px; float:left;}
.contentcontainer {background-color:#DDDDFF; float:right; width:780px;}
.footer {width:980px; height:303px;}

.content {
	float:right;
	padding:15px 10px 30px 20px; 
	background-color:#FFFFFF;
	margin:0 0 0 0;	
}


/* framed pictures */
.framedpic {position:relative; width:137px; height:97px; background:transparent url(images/bk_framedpic.jpg) repeat scroll 0 0; float:left;}
.framedpic img {margin:7px 0 0 8px; border:none;}

/* framed pictures for video play buttons */
.framedpic div.button {position:absolute; top:22px; left:44px; width:50px; height:50px; background:transparent url(images/play-button.png) repeat scroll 0 0;}
.framedpic div.hover {background:transparent url(images/play-button-ro.png) repeat scroll 0 0;}
/* if you want to add IE6 gifs */
/* * html .framedpic div.button {background:transparent url(images/play-button.gif) repeat scroll 0 0;} */ /* IE6 */
/* * html .framedpic div.hover {background:transparent url(images/play-button-ro.gif) repeat scroll 0 0;} */ /* IE6 */

/* Generic */
.buttons h1, .section h1 {margin:0 0 4px 0; font-size:12px; font-weight:bold;}
.section h2 {margin:10px 0 5px 0; font-size:11px; color:#666666;}

.section {
	font-size:11px; 
	overflow:auto; 
	background:transparent url(images/separator.jpg) no-repeat scroll left top; 
	width:565px; 
	float:left;
	padding:20px 0 10px 0;
}

/* Links */
.section a, .buttons a, #cluetip a {color:#3778c5; text-decoration:none;}
.section a:hover, .buttons a:hover, #cluetip a:hover {color:#FF1100;}

/* Lists */
.section ul {list-style:none; padding-left:0px; margin-left:0px;}
.section ul li {background:transparent url(images/bullet.png) no-repeat scroll 1px 4px; padding-left:15px;}
.indiv {clear:both; margin:10px 0; line-height:15px;}

/* videos and what you missed */
.section1 {width:auto; background:none; padding-top:0px;}

.videolinks {float:left; width:450px;}
.videolinks .indiv {padding:10px 0; line-height:15px;}
.videolinks .framedpic {margin-right:15px;}

.whatyoumissed {padding:10px; width:270px; float:right;}
.whatyoumissed {margin:10px 0 0 0;}

/* New videos from 40+ sessions */
.section2 ul li {padding-left:10px;}

/* top of widget */
.popuparea_top {
	width:538px; 
	height:24px; 
	padding:12px 0 0 14px; 
	background:transparent url(images/popup_top.jpg) no-repeat scroll center top;
	font-size: 13px;
	font-weight:bold;
	line-height:13px;
}

.popupcontent {
	width:549px; 
	height:240px;
	border-left:1px solid #E0E0DE;
	border-right:1px solid #B1B1B0;	
}

.popupcontent .scrollarea {
	border-left:1px solid #EFEFEF;
	border-right:1px solid #EFEFEF;	
	width:543px;
	height:240px;
	margin: 0 0 0 2px;
	overflow-y:auto;	
}

.popupcontent ul {margin:0; padding:0;}
.popupcontent ul li {
	background:none;
	border-bottom:1px solid #EFEFEF;
	font-weight:bold;
	overflow:auto;
	padding-top:5px;
}


* html .popupcontent ul li {overflow:scroll; border:none;} /* IE6*/

.popuplistitem {clear:both; overflow:visible;}

.popup {display:none;}

#cluetip h1 {font-size:12px; font-weight:bold;}
#cluetip {font-size:11px;}
#cluetip a {padding-left:15px; background: transparent url(images/bullet.png) no-repeat left center;}

.popupcontent .category {
	width:220px;
	float:left;	
}

* html .popupcontent .category {	letter-spacing:-1px;  } /* for IE6 only */
* + html .popupcontent .category {	letter-spacing:-1px;  } /* for IE7 only */

.popupcontent .link {
	width:290px;
	float:right;
	padding-bottom:5px;
}

.popuparea_bottom {width:552px; height:36px; background:transparent url(images/popup_bottom.jpg) no-repeat scroll center top;}

/* buttons and photos sidebar on right side */
.buttons {float:right; width:180px; margin-top:-10px;}

.buttons .df_photos {
	background:transparent url(images/bk_df_photos.jpg) no-repeat scroll -6px center; width:565px; float:left;
	width:181px;
	height:194px;
	padding:11px 0 0 9px;
}

.buttons .df_photos h1 {margin-bottom:15px;}
.buttons .df_photos img {border:solid 1px #C9C5C4; margin:0 5px 10px 0;}
.buttons .df_photos a {display:block; font-size:10px; font-weight:bold; position:relative; top:-7px; left:116px;}


/* Immersion Lab / Developer Preview */
.section3 .framedpic { margin:0 5px 0 0;}
.section3 {overflow:hidden; margin-bottom:10px;}
.section3 img {float:left;}
.section3 ul {float:right; margin-right:225px; width:100px; margin-top:12px;}
* html .section3 ul {margin-right:120px;} /* IE6 */


/* Hackathon / Video Wall */
.section4 h2{margin:0 0 5px 0;}
.section4 .indiv {overflow:hidden;}
.section4 .framedpic {margin-right:5px;}

/********** changes 20081125 ****************/
		.popuparea_top {height:43px; position:relative;}
		.popuparea_top .track {position:absolute; top:38px; color:#898989; font-size:11px;}
		.popuparea_top .session {position:absolute; top:38px; color:#898989; left:241px; font-size:11px;}
/********************************************/


/************** ClueTip Css *****************/
/* global */
#cluetip-close img {
  border: 0;
}
#cluetip-title {
  overflow: hidden;
}
#cluetip-title #cluetip-close {
  float: right;
  position: relative;
}
#cluetip-waitimage {
  width: 43px;
  height: 11px;
  position: absolute;
  background-image: url(wait.gif);
}
.cluetip-arrows {
  display: none;
  position: absolute;
  top: 0;
  left: -11px;
  height: 22px;
  width: 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
#cluetip-extra {
  display: none;
}

/***************************************
   =cluetipClass: 'default' 
-------------------------------------- */

.cluetip-default {
  background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a;
  color: #fff;
}
.cluetip-default #cluetip-title a {
  color: #d9d9c2;
  font-size: 0.95em;
}  
.cluetip-default #cluetip-inner {
  padding: 10px;
}
.cluetip-default div#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */

.cluetip-rounded {
  background: transparent url(images/bl.gif) no-repeat 0 100%;
  margin-top: 10px;
  margin-left: 12px;
}

.cluetip-rounded #cluetip-outer {
  background: transparent url(images/tl.gif) no-repeat 0 0;
  margin-top: -12px;
}

.cluetip-rounded #cluetip-title {
  background-color: transparent;
  padding: 12px 12px 0;
  margin: 0 -12px 0 0;
  position: relative;
}
.cluetip-rounded #cluetip-extra {
  position: absolute;
  display: block;
  background: transparent url(images/tr.gif) no-repeat 100% 0;
  top: 0;
  right: 0;
  width: 12px;
  height: 30px;
  margin: -12px -12px 0 0;
}
.cluetip-rounded #cluetip-inner {
  background: url(images/br.gif) no-repeat 100% 100%;
  padding:0px 12px 12px;
  margin: -18px -12px 0 0;
  position: relative;
}

.cluetip-rounded div#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #009;
  background: transparent;
  display:none; 
}
.cluetip-rounded div#cluetip-close a {
  color: #777;
}

/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
  zoom: 1;
}

