#content { margin-top:10px; }

#hero { padding:0 18px; text-align:center; margin:32px -18px 10px; 
	border-bottom:1px solid #ddd; 
	box-shadow:0 2px 1px #efefef;
}
#hero h1 { margin:0 0 -.3em; *margin-bottom:0; }
#hero p.intro { width:800px; margin-right:auto; margin-left:auto; }

#nav { display:block; width:616px; height:146px; margin:36px auto 0; font-size:18px; overflow:visible; }
#nav .column { width:auto; margin:0; padding:0 12px; background:url(/cn/why-mac/compare/images/nav_bg20091221.png) no-repeat 0 .1em; 
	background:rgb(255,255,255);
	background:rgb(255,255,255);
	background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 99%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(99%,rgba(224,224,224,1)));
	background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 99%);
	background:-o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 99%);
	background:-ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 99%);
	background:linear-gradient(top, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 99%);
	color:#fff;
	border:1px solid #dedede;
	height:145px;
	box-shadow:1px 0 0 rgba(255, 255, 255, 0.4) inset;
	border-right:none;
}

@media only screen and (max-device-width:768px) {
	
	#desktops  #nav #n-notebooks { overflow:hidden; }

}

#nav .column.first { border-radius:3px 0 0 0; }
#nav .column.last { float:right !important; border-radius:0 3px 0 0; border-right:1px solid #dedede; }
#nav a { float:left; margin:0 0 -.55em; padding:1em 0 2em; position:relative; }
#nav a:hover { color:#08c; text-decoration:none; }
#nav h2 { font-size:18px; }
#nav .caret { position:absolute; left:-14px; bottom:7px; display:none; width:208px; height:17px; padding:0; margin:0; background:url(/cn/why-mac/compare/images/caret.png); }

body#compare #hero, body#notebooks #hero, body#desktops #hero { margin:31px 1px 10px; padding:0; }

#compare   #nav #n-compare,
#notebooks #nav #n-notebooks,
#desktops  #nav #n-desktops {
	height:161px; 
	box-shadow:inset 0 2px 18px rgba(0, 0, 0, 0.55);
	background:rgb(149,149,149);
	background:-moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(77,77,77,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(100%,rgba(77,77,77,1)));
	background:-webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(77,77,77,1) 100%);
	background:-o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(77,77,77,1) 100%);
	background:-ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(77,77,77,1) 100%);
	background:linear-gradient(top, rgba(149,149,149,1) 0%,rgba(77,77,77,1) 100%);
}
#compare   #nav #n-compare   a,
#notebooks #nav #n-notebooks a,
#desktops  #nav #n-desktops  a { text-decoration:none; cursor:default; }
#compare   #nav #n-compare   h2,
#notebooks #nav #n-notebooks h2,
#desktops  #nav #n-desktops  h2 { color:#fff; }
#compare   #nav #n-compare   .caret,
#notebooks #nav #n-notebooks .caret,
#desktops  #nav #n-desktops  .caret { display:block; }
body#compare #hero p.intro,
body#notebooks #hero p.intro,
body#desktops #hero p.intro { width:820px; }

/* .compare */
#content .compare { position:relative; width:980px; margin:0 auto; font-size:11px; }
#content .compare table { table-layout:fixed; }


#content .compare th, #content .compare .th,
#content .compare td, #content .compare .td { width:156px; padding:5px 15px; vertical-align:top; background:#fff; }

#content .compare .tr { border-left:1px solid #e8e8e8; }
#content .compare .column0 { border:none; }

#content .compare th, #content .compare .th { color:#000; font-size:12px; font-weight:bold; }
#content .compare .static th, #content .compare .static .th { background:transparent; border:none; padding-top:18px; }
#content .compare tr.first td, #content .compare .td.first { padding-top:24px; }

#content .compare tr.alt th, #content .compare .th.alt,
#content .compare tr.alt td, #content .compare .td.alt { background:#f5f5f5; }

#content .compare tr.last td, #content .compare .td.last { padding-bottom:3.4em; }

#content .compare h3, #content .compare h3 { margin-bottom:10px; font-size:12px; }
#content .compare p { margin:0; }
#content .compare ul, #content .compare ul { padding-bottom:2em; }
#content .compare ul li, #content .compare ul li { padding-bottom:10px; }

#content .compare thead th, #content .compare .th.thead { font-weight:normal; padding-bottom:1.5em; background:#fff url(/cn/why-mac/compare/images/table_head_bg2.png) no-repeat 50% 100%; }
#content .compare thead th .sosumi, #content .compare .th.thead .sosumi { font-size:1em !important; }
#content .compare thead th img, #content .compare .th.thead img { margin:-5px -2px 0; }


/* draggable */
#content .draggable-columns .column { position:absolute; }
#content .draggable-columns .static { left:0 !important; }

#content .draggable,
#content .draggable .tr,
#content .draggable .td,
#content .draggable .th { display:block; }

#content .draggable .tr { cursor:move; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; -webkit-user-select:none; *cursor:move; }
#content .dragging  .tr { cursor:move; cursor:grabbing; cursor:-moz-grabbing; cursor:-webkit-grabbing; *cursor:move; }
#content .draggable .tr.static { cursor:default; z-index:10; }

#content .dragging  .tr.dragging { overflow:hidden; border:3px solid #08c; background:#fff;
	-khtml-box-shadow:rgba(0,0,0,.5) 0 1px 25px; -webkit-box-shadow:rgba(0,0,0,.5) 0 1px 25px; -moz-box-shadow:rgba(0,0,0,.5) 0 1px 25px; box-shadow:rgba(0,0,0,.5) 0 1px 25px; 
	-khtml-border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}

/* Compare */
#compare .compare thead th, #compare .compare .th.thead { background-image:url(/cn/why-mac/compare/images/table_head_bg.png); }
body#compare #content { padding:18px 0 0; }
#compare .compare th, #compare .compare .th,
#compare .compare td, #compare .compare .td { width:140px; padding:4px 8px 4px 7px; *padding:4px 12px 4px 11px; }
#compare .compare thead th img, #compare .compare .th.thead img { margin:0 -4px -3px; }
body#compare .compare .column0 .th,
body#compare .compare .column0 .td { padding-left:8px; }
@media only screen and (max-device-width:768px) {
	#compare .compare th,
	#compare .compare td { width:149px; }
}

/* Notebooks */
#notebooks #content { padding:18px 0 5px; }

#notebooks #content .compare { margin-top:25px; width:980px; }

#notebooks .compare th, #notebooks .compare .th,
#notebooks .compare td, #notebooks .compare .td { width:140px; padding:5px 11px 5px 12px; }

#notebooks .compare .static th, #notebooks .compare .static .th { padding-top:24px; }
#notebooks .compare tr.first td, #notebooks .compare .td.first { padding-top:26px; }

#notebooks .compare thead th, 
#notebooks .compare .th.thead { padding-top:35px; }
@media only screen and (max-device-width:768px) {
	#notebooks .compare th,
	#notebooks .compare td { width:141px; }
}


/* Desktops */
body#desktops #content { padding:18px 1px; }
body#desktops #content .compare { width:978px; }
body#desktops .compare th, body#desktops .compare .th,
body#desktops .compare td, body#desktops .compare .td { width:140px; padding:5px 20px 5px 19px; *padding:5px 29px 5px 28px; }
body#desktops .compare .column4 .th,
body#desktops .compare .column4 .td { padding-right:23px; }
body#desktops .compare thead th img, body#desktops .compare .th.thead img { margin:-5px 0 0; }
body#desktops .compare thead th h4, body#desktops .compare .th.thead h4 { margin-right:4px; }
body#desktops .compare .static th, body#desktops .compare .static .th { padding-top:31px; }
body#desktops .compare tr.first td, body#desktops .compare .td.first { padding-top:26px; }
@media only screen and (max-device-width:768px) {
	body#desktops #content { padding-bottom:0; }
	body#desktops .compare th, 
	body#desktops .compare td { width:158px; }
}