/******
	basic interior layout styles (mcd_layout.css)
	look out for images defined in this css file - check relative paths (should be relative to this file)
 	
******/


html, body {
    height: 100%;
}


/*  NOTE on font sizing: if we set base size on the highest parent element (html) in percent and use ems/rems to scale from there, keeping track of sizing will be much easier.
	Default size of 62.5% = 10px = 1.0em, so the math to convert between ems and pixels becomes easy. 
*/

html {
	/* font-size: 12px; */
	font-size: 62.5%; 
}

body {
	/* background: #FFFFFF url(../layoutimg/interior/back.gif) repeat-y center center; */
	margin: 0;
    padding: 0;
    text-align: center;
	color: #333333;	
}

/*	NOTE on font sizing, part two: set the default font size for the site in body, based on the html default set above. 
	So, here 1.2em = 12px (120% of the default html setting).
	
	Even better, we can use rems (1.2rem) thanks to CSS3, which avoids the idiocy of keeping track of multiplying sizes based on parents of parents.
	With our one html font-size set above, with rems, every other declaration will simply be a multiple of that, regardless of inheritance. Yay!
	
	The downside with rems: IE8 and lower do not support it. So, all rem declarations have to be preceded by a px declaration for IE8-,
	which other browsers will override with the following rem declaration.

	UPDATE: See mcd_default.css for update on this, mostly abandoned rem sizing as causing more problems than it solves.
*/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: normal; 
	/* font-size: 62.5%; */
	
	font-size: 12px;
	font-size: 1.2rem;

}


#pageWrapper {
    position: relative;
    margin: 0 auto; 
	padding: 0px;	
  	text-align: left;
    width: 1116px;		
    min-height: 100%;
    height: auto;		
	background-color: #FFFFFF;
}
/* Hack for IE */
* html #pageWrapper {
    height: 100%;
}
/* End IE Hack */ 


#innerPageWrapper {
    position: relative;
    margin: 0 auto; 
	padding: 0;
  	text-align:left;
    width: 1116px;
    min-height: 100%; 
    height: auto;  		
	background: #FFFFFF url(../Images/back.gif) repeat-y center center; 
}
/* Hack for IE */
* html #innerPageWrapper {
    height: 100%;
}
/* End IE Hack */ 


#contentShell {
	z-index: 1;
	margin-left: 250px; 
	margin-right: 198px;
	position: relative;
	left: 46px;
	width: 1024px;
}
#innerShell {
	z-index: 2;
	width: 576px;
	position: relative;
}

#bodyShell {
	margin: 0 -1px;	/* without this, boxes stop floating next to each other */
	width: 576px;
}

#colLeft, #colRight, #bodyShell {
	float: left;
	position: relative;
	z-index: 10;
	overflow: visible;	/* fix for IE italics bug */
}

#colRight {
	/* was 198 / -198 */
	float: right;
	width: 197px;
	margin: 0 -197px 0 1px;	
}

#colLeft {
	width: 250px;
	margin: 0 1px 0 -250px;	
}

#innerColLeft {
	margin-top: 0px;
	text-align: left;
	padding: 210px 0px 50px 30px;		
}

#innerBodyShell {
	margin-top: 0px;
	text-align: left;
	padding: 104px 48px 154px 28px;	
}

#innerColRight {
	margin-top: 71px;
	text-align: right;
	padding: 138px 30px 100px 24px; 	/* right pad was 48 */
	overflow: hidden;	
	background: #ffffff url(../Images/back_sidebar_714h.gif) no-repeat left top;		
	min-height: 526px;		/* added 50px to avoid gradient run into bottom bar */
}	

#pageContentShell {
	display: block;
}

#videoPlayerShell {
	display: none;
	width: 100%;
	/* border-top: 2px dotted #CCCCCC;
	padding-top: 28px; */
}


#fixedLogo {
	width: 246px;
	height: 105px;
	background: url(../Images/mcd-logo-2.png) no-repeat center center;
	position: absolute;
	top: 0;
	left: 16px;			/* was 28px */
	z-index: 101;		/* moved up to always float above popup menu */
	cursor: pointer;
}

#fixedTopLinks {
	width: 663px;
	height: 34px;
	position: absolute;
	top: 30px;
	left: 302px;
}


/*  ************************
		top menu and 
		popup layout styles 
	************************
*/


#topBanner {
	height: 68px;
	border-bottom: 3px solid #3C3D3C;
	width: 1024px;
	position: absolute;
	top: 0px;
	left: 46px;
	z-index: 12;
}

#topMenuOff {
	position: absolute;
	top: 0;
	left: 0;
	width: 1024px;
	height: 68px;
	z-index: 8;
}

#ipadMenuToggle {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 250px;
	height: 68px;
	width: 700px;
	z-index: 100;
	display: none;
	border: 0px solid #FFCC00;
}

#topMenuShell {
	width: 553px; 	/* was 553px */
	height: 46px;
	position: absolute;
	left: 273px;
	top: 22px;
	border: 0px solid #666666;
	z-index: 10;
}

#topLinksMenuShell {
	width: 198px;
	height: 46px;
	position: absolute;
	top: 22px;
	right: 0;
	z-index: 9;
}

#firstTopMenuBox {
	width: 112px !important;
}

.topMenuBox {
	width: 96px;
	height: 24px;
	padding: 0;
	margin-top: 15px; 
	cursor: pointer;
}

.MC2menuBox {
	width: 43px;
	height: 28px;
	/* padding: 0 9px 0 0; */
	margin-top: 6px; 	/* was 8px */
	position: absolute;
	left: 773px;
	top: 22px;
	z-index: 10;
}

.topMenuTextBox {
	padding: 5px 5px 5px 5px;
	display: inline-block;
	
	/* For IE 7 */
	zoom: 1;
	* display: inline;
}

.topTextBoxRollover:hover {
	background-color: #FFCC00;
}

.topMenuCurrent {
	background-color: #FFCC00;
}

.topMenuLinksBox {
	width: 198px;
	height: 14px;
	padding: 5px 0 5px 0;
	margin-top: 16px; 
	border: 0px solid #FF0000;
	z-index: 9;
}

/* *** NOTE: if "top" value changes, MUST update indexScriptInit() function */
#popupMenuShell {
	width: 1024px;
	height: 152px;
	position: absolute;
	left: 46px;
	top: 68px;
	background-color: #000000;
	z-index: 10;
	display: none;
}


#popup-sxn1 {
	margin-left: 266px;
	width: 94px;
}


/*  ************************
		bottom bar styles 
	************************
*/

#botBanner {
	height: 65px;
	width: 1024px;
	background-color: #339933;
	position: absolute;
	bottom: 39px;
	left: -250px;
	z-index: 10;
}

#mcLiveShell {
	width: 650px;
	height: 40px;
	position: absolute;
	top: 10px;
	left: 278px;
	background: url(../Images/logo-mcLive-2.png) no-repeat left 2px;
	padding-left: 96px;
}

#mcLive {
	width: 354px;	/* was 404 - reduced by 50px per designer */
	height: 46px;
	float: left;
}

#mcLive div { display: none }
#mcLive div.first { display: block }

#botRightLinks {
	width: 150px;
	height: 40px;
	margin-left: 48px;
	padding: 0 24px 0 24px;
	top: 0;
	left: 850px;
	float: left;
}

#botBannerShadow {
	height: 9px;
	width: 1024px;
	background: url(../Images/mcd-drop-shadow-bot.png) repeat-x center center;
	position: absolute;
	bottom: 0;
	left: -250px;
	z-index: 10;
}

#botBannerShadowFull {
	height: 39px;
	width: 1108px;
	background: url(../Images/footer_dropshadow_full_0.png) no-repeat center center;
	position: absolute;
	bottom: 0;
	left: -293px;
	z-index: 10;
}

#botShadowMask {
	background-color: #FFFFFF;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 39px;
	z-index: 9;
}


/*  ************************
		common/generic
		layout styles 
	************************
*/

#clearFloats {			
  clear:both; 
}

.clearFloats {			
  clear:both; 
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.fullWidth {
	width: 100%;
}

.halfWidth {
	width: 50%;
}

.spacer30W {
	width: 30px;
}

.rightMargin30 {
	margin: 0 30px 0 0;
}

.align-right-10 { 
	float:right; 
	margin: 0 0 10px 10px; 
}

.align-left-10 { 
	float:left; 
	margin: 0 10px 10px 0; 
}

.align-right-25 { 
	float:right; 
	margin: 0 0 25px 25px; 
}

.align-left-25 { 
	float:left; 
	margin: 0 25px 25px 0; 
}

.align-right-30 { 
	float:right; 
	margin: 0 0 30px 30px; 
}

.align-left-30 { 
	float:left; 
	margin: 0 30px 30px 0; 
}

.centered {
	text-align: center;
}

.align-left-30-top-6 { 
	float:left; 
	margin: 6px 30px 30px 0; 
}

.pushGridDown {
	margin-bottom: 28px;
}