/* Platterization */
html { width:100%; min-width:980px; height:100%; background:#f2f2f2; }
body { width:980px; min-height:100%; _height:100%; margin:0 auto; padding:0 70px; position:relative; z-index:1; background:#fff; border:1px solid #d9d9d9; border-top:none; border-bottom:none;
	-webkit-box-shadow:0 0 4px rgba(0,0,0,.3); -moz-box-shadow:0 0 4px rgba(0,0,0,.3); box-shadow:0 0 4px rgba(0,0,0,.3);
}
body:nth-child(1n) { border:none; } /* reset border for smart browsers */
body:before { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

#main { width:100%; height:100%; padding:0; }

#main,
#main #content { position:static; }

#main .content,
#main #content { background:transparent;
	-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; border:none;
	-webkit-border-radius:0; -moz-border-radius:0; -khtml-border-radius:0; border-radius:0;
}

@media only screen and (max-device-width:768px) {
    body { width:1024px; padding:0; }
    #main { overflow:hidden; width:980px; padding:0 22px; }
}

#globalfooter { clear:both; }


/* Main */
#main { width:980px; margin:0 auto; position:static; }
#main .content { margin:0 0 18px; padding:60px 55px 32px; zoom:1; }
#main .content .content { width:auto; padding:0; }
.content:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

#main .flushpad,
#main .flushright,
#main .flushleft,
#main .relative { _position:relative; _z-index:1; _zoom:1; }

#main #hero,
#main .row { zoom:1; }
#main #hero:after,
#main .row:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

/* fonts */
.content { font-size:1.167em; line-height:1.4285em; word-spacing:-1px; } /* 14px/20px */
.content h1 { font-size:1.7142em; line-height:1.1666em; margin-bottom:10px; font-weight:normal; } /* 24px/28px */
.content h2 { font-size:1.2857em; line-height:1.3888em; margin-bottom:7px; } /* 18px/25px */
.content h3	{ font-size:1.1428em; line-height:1.25em; margin-bottom:7px; }/* 16px/20px */
.content h4 { font-size:1em; margin-bottom:7px; } /* 14px/20px */

.content h1 img,
.content h2 img { display:block; margin:0; }

.content .title,
.content .title h1,
.content .title h2,
.content .title h3 { line-height:1.2142em; font-weight:normal; }

.content .title { font-size:2em; margin-bottom:10px; }
.content .title h1,
.content .title h2,
.content .title h3 { font-size:1em; margin-bottom:0; }
.content .title h2 { color:#898989; }

.content .small { font-size:.8571em; line-height:1.5em; } /* 12px/18px */
.content .intro { font-size:1.2857em; line-height:1.3888em; } /* 18px/25px */
.content .caption { color:#666; }

.content .hero h1 { margin-bottom:2px; }

body.specs #main { font-size:1em; line-height:1.4286em; }

/* layout */
.content .row { padding-top:50px; padding-bottom:32px; }

.content .column { *display:inline; }

.content .block { display:block; }
.content .inline { display:inline; }
.content .left { float:left; }
.content .right { float:right; }
.content .center { display:block; margin-right:auto; margin-left:auto; text-align:center; }

.content .flushpad,
.content .padright { padding-right:125px; }

.content .flushpad,
.content .padleft { padding-left:125px; }

.content .flushpad,
.content .flushright { margin-right:-125px; }

.content .flushpad,
.content .flushleft { margin-left:-125px; }

.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.selfclear { zoom:1; }
.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

#main .divider-down { background:url(/v/osx/server/a/images/divider_down.png) no-repeat 50% 0; }

/* links */
.content a { cursor:pointer; }
.content a.block { color:#000; }
.content a.wrap { text-decoration:none; }
.content a.wrap:hover span { text-decoration:underline; cursor:pointer; } /* investigate styles for 2 line .more links */

/* badge */
.content .badge { display:inline-block; *display:inline; *zoom:1; padding:0 0.7143em; font-size:1em; line-height:2.5714em; font-weight:bold; color:#fff; text-shadow:0 -1px 0 #d97300; text-shadow:0 -1px 0 rgba(0,0,0,.15); background:#f90; }

/* aesthetic */
.content .shadow { border:1px solid #ccc; -webkit-box-shadow:rgba(0,0,0,.35) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,.35) 0 1px 2px; box-shadow:rgba(0,0,0,.35) 0 1px 2px; }
.content .inset { border:1px solid #ccc; -webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 4px rgba(0,0,0,.4); box-shadow:inset 0 1px 4px rgba(0,0,0,.4); }

.content .shadow:nth-child(1n),
.content .inset:nth-child(1n) { border:none; }

.content .gradient {
	background:#f2f2f2;
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));
	background:-moz-linear-gradient(top, #fff, #f2f2f2);
}

.content .divider-down-crease { padding-top:45px; background:url(/v/osx/server/a/images/section_divider_crease_down.png) 50% 0 no-repeat; }
.content .divider-up-crease { margin-bottom:45px; padding-bottom:3.2em; border-bottom:1px solid transparent; background:url(/v/osx/server/a/images/section_divider_crease_up.png) 50% 100% no-repeat; _border-color:#fff; }


/* headline-icon */
.content .headline-icon { display:table; height:60px; margin:0 0 25px; *position:relative;  }
.content .headline-icon img { margin:0 12px 0 0; }
.content .headline-icon .headline { display:table-cell; vertical-align:middle; *position:absolute; *top:50%; }
.content .headline-icon .headline h1 { *position:relative; *top:-50%; }
.content .headline-icon p { *position:relative; *top:-50%; width:735px; margin:5px 0 0; }


/* scroll tiles */
.content .scroll-tiles { margin:-8px -55px; text-align:center; _position:relative; _z-index:1; }
.content .scroll-tiles li,
.content .scroll-tiles li a { display:-moz-inline-stack; display:inline-block; *display:inline; zoom:1; }
.content .scroll-tiles li { height:145px; margin:8px 6px; position:relative; z-index:1; vertical-align:top; }
.content .scroll-tiles a { width:168px; height:145px; position:relative; z-index:1; text-decoration:none; *border:1px solid #cfcfcf;
    background:#f7f7f7;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
    background:-moz-linear-gradient(100% 100% 90deg, #eee, #fff);
    -webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,.3); -moz-box-shadow:inset 0 1px 4px rgba(0,0,0,.3); box-shadow:inset 0 1px 4px rgba(0,0,0,.3);
    -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
}
.content .scroll-tiles a:hover {
    background:#eee;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7e7e7));
    background:-moz-linear-gradient(100% 100% 90deg, #e7e7e7, #fff);
}
.content .scroll-tiles a img { display:block; margin:22px auto 16px; }
.content .scroll-tiles a img.short { margin-bottom:6px; }
.content .scroll-tiles span { display:block; margin:0 auto; width:160px; font-weight:bold; line-height:1.285em; color:#333; }


/* toggle nav */
.content .toggle-nav { width:100%; margin:0 auto; text-align:center; position:relative; z-index:1001; }
.content .toggle-nav li,
.content .toggle-nav li a { display:-moz-table-cell; display:inline-block; *display:inline; *zoom:1; }
.content .toggle-nav li a { padding:6px 20px 7px; min-width:115px; border:1px solid #cfcfcf; border-left-color:transparent; text-decoration:none;
    background-color:#f8f8f8;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f4f4f4));
    background:-moz-linear-gradient(100% 100% 90deg, #f4f4f4, #fefefe);
    -webkit-box-shadow:inset 1px 0 0 #fff; -moz-box-shadow:inset 1px 0 0 #fff; box-shadow:inset 1px 0 0 #fff;
}
.content .toggle-nav li a.first-child { border-left: 1px solid #cfcfcf; }
.content .toggle-nav li:first-child a {
    -webkit-border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; border-radius:6px 0 0 6px;
    -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
}
.content .toggle-nav li:last-child a { -webkit-border-radius:0 6px 6px 0; -moz-border-radius:0 6px 6px 0; border-radius:0 6px 6px 0; }
.content .toggle-nav li a.active { color:#fff; cursor:default; text-decoration:none; border:1px solid #666;
    background:#636363;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#545454), to(#7b7b7b));
    background:-moz-linear-gradient(100% 100% 90deg, #7b7b7b, #545454);
    -webkit-box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset; -moz-box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset;  box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset;
}


/* product header */
#productheader { border-bottom:1px solid #e4e4e4; }
#productheader h2 a { text-indent:0; }
#productheader li a { text-shadow:#fff 0 1px 0; }
#productheader ul li a { margin-left:24px; }

.overview          #pn-overview a,
.features          #pn-features a,
.servers-made-easy #pn-servers-made-easy a,
.how-to-buy        #pn-how-to-buy a,
.how-to-upgrade    #pn-how-to-upgrade a,
.specs             #pn-specs a { color:#999 !important; cursor:default; }


/* Footers
------------------------*/
#promofooter { margin-left:-2px; margin-right:-2px; _position:relative; _z-index:1; }
#main .promofooter-divider { width:980px; margin:0 -70px; padding:30px 70px; }

/* sosumi */
.sosumi { width:940px; margin:18px auto; padding:0 20px; }
.sosumi a { color:#333; }
.sosumi ol { margin:0; padding-right:21px; padding-left:21px; }
.sosumi ul { margin:0; }
.sosumi li { padding-bottom:5px; }
.sosumi p { margin:0; padding-bottom:5px; }
ol.sosumi { width:898px; margin:18px auto; }


/* Page Specific
------------------------*/
/* overview */
#overview .content { padding-top:0; }

#overview .hero { margin-bottom:65px; }
#overview .hero img.right { margin-top:0; *margin-left:-73px; _position:relative; _z-index:1; }
#overview .hero h1 { margin-bottom:14px; }
#overview .hero p { padding:0 160px; font-size:1.1429em; line-height:1.375em; }
/* Version with server caching feature update */
#overview.with-caching .hero p { padding: 0 100px; }

#overview .buckets { padding:2px 140px 0 110px; background:url(/v/osx/server/a/images/overview_bg_gradient_down.jpg) no-repeat 50% 0; }
#overview .buckets .column { margin-left:25px; width:260px; padding-right:22px; min-height:380px; border-right:1px solid #e2e2e2; }
#overview .buckets .column.last { width:255px; padding-right:0; border-right:none; }

#overview .buckets h1 { margin-bottom:12px; }
#overview .buckets p { margin-bottom:8px; }
#overview .buckets .power img.bucket-img { margin-top:35px; margin-bottom:42px; }
#overview .buckets .server img.bucket-img { margin-top:-1px; margin-right:-22px; margin-bottom:35px; _position:relative; _z-index:1; }
#overview .buckets .specs img.bucket-img { margin-top:28px; margin-left:38px; }


/* servers made easy */
#servers-made-easy .content { padding:0 20px 0; }

#servers-made-easy .content .flushpad,
#servers-made-easy .content .padright { padding-right:90px; }

#servers-made-easy .content .flushpad,
#servers-made-easy .content .padleft { padding-left:90px; }

#servers-made-easy .content .flushpad,
#servers-made-easy .content .flushright { margin-right:-90px; }

#servers-made-easy .content .flushpad,
#servers-made-easy .content .flushleft { margin-left:-90px; }

#servers-made-easy .row { padding:0; }

#servers-made-easy #hero { margin-bottom:5em; padding-left:90px; padding-bottom:0; }
#servers-made-easy #hero h1 { padding-top:80px; }
#servers-made-easy #hero .intro { width: 602px; }
#servers-made-easy #hero img.right { margin-top:-1px; _position:relative; _z-index:1; }

#servers-made-easy #powerful .column.last { width:420px; padding-top:40px; padding-right:0; }

#servers-made-easy #installation .headline-icon { margin-right:-70px; _position:relative; _z-index:1; }
#servers-made-easy #installation .column.first { padding-top:225px; }

#servers-made-easy #management { margin-top:-80px; _position:relative; _z-index:1; }
#servers-made-easy #management .headline-icon { margin-right:-20px; _position:relative; _z-index:1; }
#servers-made-easy #management .headline-icon img.left { margin-bottom:-10px; _position:relative; _z-index:1; }
#servers-made-easy #management .column.last { width:420px; padding-top:50px; padding-right:0; }

#servers-made-easy #next { padding-top:40px; }
#servers-made-easy #next .column.first { width:405px; }
#servers-made-easy #next img.right.flushright { margin-top:-390px; _position:relative; _z-index:1; }


/* features */
#features #content { padding:58px 0; }
#features #content .flushpad,
#features #content .padright { padding-right:70px; }
#features #content .flushpad,
#features #content .padleft { padding-left:70px; }
#features #content .flushpad,
#features #content .flushright { margin-right:-70px; }
#features #content .flushpad,
#features #content .flushleft { margin-left:-70px; }
#features .border-top { border-top:1px solid #ccc; }

#features .row { padding:46px 130px 60px 155px; }
#features .row .gallery-view { padding-top:17px; }
#features .row .shorten { margin-bottom:-15px; _position:relative; _z-index:1; }
#features .row .shiftleft { margin-left:-125px; _position:relative; _z-index:1; }
#features .row .toggle-nav.shiftleft { margin-left:-15px; }

#features .hero { padding-bottom:53px; background:url(/v/osx/server/a/images/section_divider_crease_up.png) no-repeat 50% 100%; *zoom:1; }
#features .hero h1 { margin-bottom:12px; }
#features .hero p { margin-bottom:42px; padding:0 100px; }

#features #time-machine img.left { margin:17px 0 0 -57px; _position:relative; _z-index:1; }
#features #wiki img.left { margin:17px 0 0 -140px; _position:relative; _z-index:1; }

#features .grid2col { width:auto; padding:55px 55px 0 80px; }
#features .grid2col .column { width:370px; }
#features #xsan { padding-top:55px; padding-bottom:0; }
#features #profile-manager .shiftleft { margin-left:-170px; }

/* Version with server caching feature update */
#features.with-caching .autogallery figcaption { width:675px; clear:left; font-size:1em; color:#888; }
#features.with-caching #gallery-sharing { width:913px; *margin-bottom:0; }
#features.with-caching #gallery-sharing figure { margin-bottom:45px; }
#features.with-caching #gallery-sharing figcaption { margin-top:-3px; }
#features.with-caching #gallery-timemachine figure { width:800px; margin-bottom:30px; }
#features.with-caching #gallery-timemachine figcaption { margin-left:0; }
#features.with-caching #time-machine nav { *margin-top:50px; }


/* Tech Specs */
#specs #content { padding:30px 0 10px; line-height:1.5em; }

#specs h1 { margin-bottom:18px; }

#specs table { width:980px; border:1px solid #dfdfdf; border-collapse:separate; *border-collapse:collapse; }
#specs th { width:193px; margin:0; padding:24px 25px 0; vertical-align:top; border-top:1px solid #c0c0c0; }
#specs td { width:646px; margin:0; padding:30px 44px; vertical-align:top; border-top:1px solid #c0c0c0; border-left:1px solid #dfdfdf; background:url(/v/osx/a/images/specs_border_gradient.jpg) repeat-y 0 0; }
#specs tr.top th,
#specs tr.top td { border-top:none; }

#specs table .grid2col .column { width:295px; }
#specs table .grid3col .column { width:190px; margin-left:35px; }

#specs table h1 { font-size:1.4286em; line-height:1.2em; }
#specs table h2 { margin-bottom:0; font-size:1em; line-height:1.5em; }
#specs table ul { margin-bottom:18px; }
#specs table ul li { margin-bottom:5px; }
#specs .disc { padding-left:20px; list-style-type:disc; }
#specs .nospace { margin-bottom:0; }
#specs .pdf { margin-left:2px; padding-left:18px; background:url(/global/elements/icons/globaliconpdf12x12.gif) 0 50% no-repeat; }

#specs table.specs { margin-bottom:55px; }

#specs .included h2 { margin-bottom:8px; }
#specs .services ul li { margin-bottom:0px; }

#specs .documentation .row { margin-bottom:30px; padding:0 0 10px; border-bottom:1px solid #d6d6d6; }
#specs .documentation .row a { font-size:0.8571em; }
#specs .documentation .icon-server { margin-top:25px; margin-bottom:8px; }
#specs .documentation .icon-unix { margin-top:37px; margin-bottom:10px; }
#specs .documentation .icon-xsan { margin-top:20px; margin-bottom:11px; }

#specs .training .squish { width:430px; }
#specs .training .column { padding-top:18px; }
#specs .training .column.first img,
#specs .training .column.last img { margin-top:6px; margin-bottom:13px; }

#specs .services .column.first img { margin-bottom:12px; }
#specs .services .column.last img { margin-top:10px; margin-bottom:16px; }


/* documentation */
#server-guides #main h1 { margin-bottom:1em; }
#server-guides #main section { padding:20px 0; border-top:1px solid #eee; }
#server-guides #main section h1 { padding-left:20px; font-size:1.5em; }
#server-guides #main section a { font-size:1.15em; }
#server-guides #main section a.more { font-size:1em; background-image:url(/global/elements/arrows/morearrow_med_08c.gif); }
#server-guides #main aside img { margin-bottom:0; }

#server-guides ul.icons li { float:left; width:130px; margin-left:20px; min-height:14em; text-align:center; }
#server-guides ul.icons li.first { margin-left:0; }
#server-guides ul.icons li a img { display:block; margin:0 auto -5px; }
#server-guides ul.icons li p { font-size: 10px; color:gray; margin-top:5px; }


/* how-to-upgrade */
#how-to-upgrade #content { padding-top:49px; }
#how-to-upgrade #content .row { width:870px; padding-top:32px; }
#how-to-upgrade #content .row h1 { margin-bottom:1.2916em; }

#how-to-upgrade #hero .hero-image { margin-top:-50px; *margin-top:-49px; }
#how-to-upgrade #hero .badge { margin-top:55px; }
#how-to-upgrade #hero h1,
#how-to-upgrade #hero .intro { position:relative; z-index:1; }
#how-to-upgrade #hero h1 { padding-top:92px; margin-bottom:10px; }
#how-to-upgrade #hero .intro { width:409px; color:#333; font-size:1.1429em; line-height:1.375em; } /* 16px/22px */

#how-to-upgrade #steps ol.grid3col { list-style:none; margin:0; }
#how-to-upgrade #steps ol.grid3col .column { width:245px; margin-left:70px; }
#how-to-upgrade #steps ol.grid3col .column img { display:block; }

#how-to-upgrade #steps ol.grid3col .column .title,
#how-to-upgrade #steps ol.grid3col .column .title h1,
#how-to-upgrade #steps ol.grid3col .column .title h2,
#how-to-upgrade #steps ol.grid3col .column .title h3 { line-height:1.3em }
#how-to-upgrade #steps ol.grid3col .column .title { font-size:1.2857em; min-height:5.15em; _height:5.15em; margin-bottom:1em; padding-top:25px; }

#how-to-upgrade #steps ol.grid3col .column.step1 a.more { white-space:normal; }
#how-to-upgrade #steps ol.grid3col .column.step3 h3 { margin-right:-20px; _position:relative; _z-index:1; *zoom:1; }

