/*----------------------------------------------------------------------------
IE6 CSS file for Mozilla Developer Network
Created by Craig Cook - focalcurve.com
        on 27 June, 2010
-----------------------------------------------------------------------------*/

/* @Fonts *********/
@font-face {
	font-family: "League Gothic";
 	src: url("fonts/League_Gothic-webfont.eot");
	font-weight: normal;
	font-style: normal;
}

/* I can hasLayout */
.wrap, #nav, .type, #sections, #content, #content-main, #content-sub { zoom: 1; } 

/* @Reset *********/
header, hgroup, nav, section, article, aside, footer { display: block; }
html, body, form, fieldset, legend, 
h1, h2, h3, h4, h5, h6, dt, dd { margin: 0; padding: 0; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
fieldset, a img { border: 0; }
address, caption, cite, code, dfn, th, var { font-style: inherit; font-weight: inherit; }
abbr, acronym, dfn { border-bottom: 1px dotted #666; font-variant: normal; cursor: help; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
table { border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; }
caption, th { text-align: left; }
p, pre, blockquote, dl, ul, ol { margin: 0 0 1.286em; padding: 0; }
li ul, li ol { margin-bottom: 0; }
ul { list-style: none; }
legend { color: inherit; }
dt { font-style: italic; }
dd { margin: 0 0 .5em 22px; }
form ol, form ul { list-style: none; margin: 0 0 1.286em; }
abbr.updated, abbr.published { border: 0; cursor: default; }

/* @General elements and content *********/
html { background: #f6f6f1 url("../img/bg-content.png"); }
body { height: 400px; font: .875em/1.286 "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif; margin: 0 auto; color: #333; }

/*** @Links *********/
:link { color: #369; text-decoration: none; }
:visited { color: #69c; text-decoration: none; }
:link:hover, :link:focus, :link:active { color: #25a; text-decoration: underline; }
:visited:hover, :visited:focus, :visited:active { color: #25a; text-decoration: underline; }

/*** @Headings *********/
h1, h2, h3, h4, h5, h6 { margin: 0 0 .8em; }
h1, .page-title { font-size: 1.857em; }
h2 { font-size: 1.428em; }
h3 { font-size: 1.142em; }
h4, h5, h6 { font-size: 1em; }

/*** @Basics *********/
em, i, dt { font-family: Georgia, Times, "Times New Roman", serif; }
#content-main blockquote { padding: 0 25px; border-left: 5px solid #ccc; }
#content-main ul li { padding-left: 22px; background: url("../img/bullet.png") 0 .5em no-repeat; }
#content-main li ul li { background-image: url("../img/bullet-sub.png"); }
#content-main ol { padding-left: 22px; }

/*** @Section @Colors *********/
.web, a.web:link, a.web:visited { color: #fb9500; }
a.web:hover, a.web:focus, a.web:active { color: #ffae3b; }

.mobile, a.mobile:link, a.mobile:visited { color: #8dc434; }
a.mobile:hover, a.mobile:focus, a.mobile:active { color: #a7df38; }

.addons, a.addons:link, a.addons:visited { color: #00b6f0; }
a.addons:hover, a.addons:focus, a.addons:active { color: #0cf; }

.apps, a.apps:link, a.apps:visited { color: #ed2024; }
a.apps:hover, a.apps:focus, a.apps:active { color: #f33; }

.labs, a.labs:link, a.labs:visited { color: #aaa8a5; }
a.labs:hover, a.labs:focus, a.labs:active { color: #bcbcbc; }

.category { font: bold 9px Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; }

/* @Layout *********/
.wrap { position: relative; width: 940px; padding: 0 10px; margin: 0 auto; }

#content { border-top: 1px solid #000; min-height: 400px; }
.landing #content { border-top-color: #fff; }
#content .wrap { padding-bottom: 1em; }
#content .wrap.sidebar { min-height: 400px; padding-bottom: 3em; background: transparent url("../img/bg-sidebar.png") 695px 0 no-repeat; }

#content-main { width: 670px; float: left; padding: 20px 0 0; }
#content-main.full { width: 100%; float: none; clear: both; }
#content-sub { width: 235px; float: right; padding: 20px 0 0 20px; }

/* @Header *********/
#masthead { background: #000; border-bottom: 4px solid #240304; color: #b0b7bc; }
#masthead .wrap { padding-top: 10px; }
#masthead.major .wrap { padding-top: 20px; }

body.section-web #masthead { border-bottom-color: #fb9500; }
body.section-mobile #masthead { border-bottom-color: #8dc434; }
body.section-addons #masthead { border-bottom-color: #00b6f0; }
body.section-apps #masthead { border-bottom-color: #ed2024; }
body.section-docs #masthead, 
body.section-tools #masthead, 
body.section-community #masthead, 
body.section-labs #masthead { border-bottom-color: #f8d575; }

.major #branding { padding-left: 130px; width: 530px; }
#branding { position: relative; float: left; width: 595px; min-height: 70px; padding-left: 75px; }
#logo { font: normal 46px/40px "League Gothic", Haettenschweiler, Impact, sans-serif; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin: 0; }
#logo a { color: #fff; text-decoration: none; }
.major #logo img { top: -17px; left: -8px; }
#logo img { position: absolute; left: 0; top: -4px; }
#tagline { font-size: .714em; letter-spacing: -.01em; margin: 0; }

.global-notice { position: relative; border: solid #e6e1cf; border-width: 3px 0; color: #630; background: #eeecdf; padding: 15px 20px 0; margin: 0 0 -1px; font-size: .857em; }

/*** @Main @Nav *********/
#nav { clear: both; padding-left: 75px; height: 40px; }
.major #nav { padding-left: 130px; height: 60px; }
#nav-main { float: left; margin: 0; font: 200 29px/1 Impact, "League Gothic", Haettenschweiler, "Arial Narrow", Arial, Helvetica, sans-serif; text-transform: uppercase; }
.major #nav-main { margin: 18px 0 0; }
#nav-main li { display: inline; margin-right: 15px; }
#nav-main a:hover, #nav-main a:focus, #nav-main a:active { text-decoration: underline; }

/*** @Secondary @Nav *********/
#utility { width: 255px; float: right; }
#nav-extra { width: 235px; float: right; margin: 6px 0 0; font: 200 22px/1 "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; }
.major #nav-extra { margin: 25px 0 0; }
#nav-extra li { display: inline; margin-right: 10px; }
#nav-extra a { color: #f0f0f0; }
#nav-extra a:hover, #nav-extra a:focus, #nav-extra a:active { color: #f8d575; text-decoration: underline; }

/*** @Search *********/
#site-search { width: 235px; float: right; }
#site-search p { margin: 0; }
#site-search #q { width: 145px; padding: 4px 8px; margin-right: 8px; border: 1px solid #7d0d0f; background: #000; color: #f6e8e5; font-size: .785em; }
#site-search #q:hover, #site-search #q:focus { border-color: #9c0d10; background: #320506; }
#site-search button { padding: 2px 8px; display: inline; background: #630a0c; color: #ccc; font: 200 1em/1.2 "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; letter-spacing: .5px; border: 0; -moz-border-radius: .25em; -webkit-border-radius: .25em; -border-radius: .25em; }
#site-search button:hover, #site-search button:focus { background: #7d0d0f; color: #fff; cursor: pointer; }
#site-search-gg { font-size: .642em; float: right; margin-top: 3px; }
#site-search-gg * { margin: 0; padding: 0; }
#site-search-gg img { height: 14px; }
#site-search-gg .gsc-branding-text { color: #666; vertical-align: top; margin-right: .5em; }

/*** @User status *********/
.user-state { width: 235px; float: right; text-align: right; color: #630a0c; margin: 0 0 1em; }
.user-state a:link, .user-state a:visited { color: #fff; font-style: italic; }
.user-state a:hover, .user-state a:focus, .user-state a:active { color: #fff; }
#masthead .user-state { font-size: .785em; }

/*** @Section @Nav *********/
#nav-section { position: relative; z-index: 99; display: block; clear: both; background: #f8d575; margin-bottom: -1px; font-size: .857em; text-transform: uppercase }
#nav-section ul { width: 940px; padding: 0 10px; margin: 0 auto; overflow: hidden; }
#nav-section li { float: left; margin-right: 15px; }
#nav-section a { height: 15px; padding: 8px 4px 12px; display: block; float: left; color: #666; background: url("../img/nav-arrows.png") 50% 0 no-repeat; }
#nav-section a:hover, #nav-section a:focus, #nav-section a:active { color: #000; text-decoration: none; background-position: 50% -460px; }
#nav-section .current a { color: #000; font-weight: bold; background-position: 50% -460px; }

#section-head { padding: 15px 0; background: #eae7dc; border-top: 1px solid #000; }
#welcome-bar { padding: 15px 0; background: #6e0000; border-top: 3px solid #c02700; color: #fff; }

/*** @Slides *********/
#slideshow.js { position: relative; width: 660px; margin: 0 0 2em; }
#slideshow ol { list-style: none; margin: 0; padding: 0; }
#slideshow .slide { margin: 0 0 1.5em; padding: 0 0 1em; border-bottom: 1px solid #dbd8cd; }
#slideshow.js .slide { margin: 0; padding: 0; border: 0; height: 330px; overflow: hidden; }

#slideshow .slide-desc { font-size: .785em; }
#slideshow .slide-desc h3 { font: bold italic 1.18em Georgia, Times, "Times New Roman", serif; margin: 1em 0 .15em; }
#slideshow.js .slide-desc h3 { color: #cdd9d9; margin-top: 0; }
#slideshow .slide-desc h2 { font: bold 2.363em/1.2 Georgia, Times, "Times New Roman", serif; }
#slideshow.js .slide-desc { position: absolute; top: 0; right: 0; width: 290px; height: 365px; padding: 25px 25px 40px; background-color: #444; color: #fff; }
#slideshow.js .slide-desc a { color: #9cf; }

#slideshow .slide-desc .more { clear: both; }
#slideshow .slide-desc .more a { background: #fff; padding: 3px 14px 3px 18px; color: #f33; font: 1.454em Impact, "League Gothic", Haettenschweiler, "Arial Narrow", Arial, Helvetica, sans-serif; text-transform: uppercase; text-shadow: none; }
#slideshow .slide-desc .more a:hover, #slideshow .slide-desc .more a:focus, #slideshow .slide-desc .more a:active { text-decoration: none; color: #c33; }

#slide-control li { float: left; margin: 0 10px 1em 0; }
#slideshow.js #slide-control li { margin: 0 0 0 10px; }
#slideshow.js #slide-control { position: absolute; right: 25px; bottom: 25px; z-index: 99; }
#slideshow.js #slide-control a { display: block; width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: #8f8a7e; -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.5); -webkit-box-shadow: inset -1px -1px 0 rgba(0,0,0,.5); box-shadow: inset -1px -1px 0 rgba(0,0,0,.5); }
#slideshow.js #slide-control a:hover, #slideshow.js #slide-control a:focus, #slideshow.js #slide-control a:active { background: #fff; }
#slideshow.js #slide-control li.on a { background: #fff; }

/* @Boxes *********/
section.boxed, div.boxed { background: #fff; padding: 18px; margin: 0 4px 26px 0; }

.boxed .subhead { margin: 0 0 1.4em; }
.boxed .subhead h2, .boxed .subhead h3 { margin-bottom: 0; color: #000; font: 200 1.714em/1.2 "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.boxed .subhead p { font: italic .857em/1.1 Georgia, Times, "Times New Roman", serif; }

/* @Tabbed boxes *********/
.tabbed-on { border: 1px solid #aba9a5; padding-top: 3em; position: relative; zoom: 1; }
.tabbed-on ul.tab-list { position: absolute; top: 0; left: 0; border-bottom: 1px solid #aba9a5; }
ul.tab-list { width: 100%; height: 3em; list-style: none; margin: 0; }
#content-main ul.tab-list li { border: 1px solid #aba9a5; border-bottom: 0; cursor: pointer; float: left; margin-right: -1px; text-align: center; color: #4e4f52; background: #eeec92; padding: 15px 20px 10px; min-width: 80px; font: 200 1.2em/1 "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#content-main ul.tab-list li:hover { background: #fffd9f none; }
#content-main ul.tab-list li.active-tab { background: #fbfbfa none; color: #333; border-bottom: 1px solid #fff; padding-bottom: 11px; }
#content-main .tabbed-on ul.tab-list li { border-width: 0 1px 0 0; margin-right: 0; }
.tabbed-on .hidden, .folder { position: absolute; left: -999em; height: 0; overflow: hidden; }
.folder.visible { position: relative; left: 0; background: #fbfbfa; padding: 20px; height: auto; overflow: visible; zoom: 1; }
ul.tab-list a { color: #2f2f2f; text-decoration: none; }
ul.tab-list a:hover, ul.tab-list a:focus, ul.tab-list a:active { color: #2f2f2f; text-decoration: none; }

/* @Sidebar *********/
#content-sub .module { background: #fff; border-bottom: 3px solid #cecabc; padding: 18px; margin: 0 0 22px; }
#content-sub .module.hot { border-bottom: 2px solid #e9c5bb; background: #fff; }
.module .mod-title { margin: -18px -18px 18px; padding: 15px 18px; background: #2f2f2f; color: #fff; font: 200 1.285em/1.1 "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.module ul, .module ol { margin: 0; }
.mod-intro { font: italic .785em Georgia, Times, "Times New Roman", serif; }

.module .gallery { list-style: none; margin: 0 -18px 0 0; }
.module .gallery li { display: inline-block; margin: 0 5px 5px 0; }
.module .gallery a img { background: #fff; }

.module .hentry { font-size: .785em; border-bottom: 1px dotted #d8d4ca; padding-bottom: 1em; margin-bottom: 1em; }
.module .hentry h5, .module .hentry h4, .module .hentry p { margin: 0 0 .2em; }
.module .hentry a { font-weight: bold; }
.module .hentry .entry-meta { font-size: .857em; font-weight: bold; }

/*** @Trends and @Hot content *********/
#content-sub .heat-graph { list-style: none; margin: 0 0 1.4em; font-size: .857em; }
#content-sub .heat-graph li { background: #f3f3ee; position: relative; margin-bottom: .5em; }
#content-sub .heat-graph li span { display: block; background: #f7cf8a url("../img/bg-heatgraph.png") 0 0 repeat-y;  }
#content-sub .heat-graph a { display: block; padding: 4px 8px; width: 184px; color: #333; }
#content-sub .heat-graph a b { float: right; font-family: Georgia, Times, "Times New Roman", serif; }

/*** @Twitter *********/
#content-sub #mdn-twitter { background: #f4f8fc; border: 0; }
#content-sub #mdn-twitter .mod-title { background: #2f2f2f; }
#mdn-twitter .hfeed { margin: 0 -18px; border-top: 2px solid #dae6f4; }
#mdn-twitter .hentry { padding: 12px 18px; border: 0; margin: 0; }
#mdn-twitter .hentry:nth-child(odd) { background: #e4edf7; }
#mdn-twitter .entry-title { font-weight: normal; margin: 0 0 .75em; }
#mdn-twitter .entry-meta { margin-top: .75em; }
#mdn-twitter #follow { margin: 0 -18px -18px; }
#mdn-twitter #follow a { display: block; padding: 12px 18px 12px 45px; background: #c1cbd3; color: #fff; font: 200 1.286em "League Gothic", Haettenschweiler, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#mdn-twitter #follow a b { color: #245375; font-weight: normal; }
#mdn-twitter #follow a:hover, #mdn-twitter #follow a:focus, #mdn-twitter #follow a:active { text-decoration: none; background-color: #aebfc9; }


#glossary { font-size: .785em; zoom: 1; }
#glossary a { font-weight: bold; }
#glossary h3 { margin: 0 0 .15em; }
#glossary ul { margin: 0 0 .5em; }


/* @Footer *********/
#footbar { padding: 1.3em 0 0; background: #450000; border-bottom: 6px solid #3c0000; color: #f5f5f0; font: italic .928em/1.1 Georgia, Times, "Times New Roman", serif; text-align: right; }
#footbar p { text-align: right; margin: 0 0 1em; }
#footbar a:link, #footbar a:visited, 
#site-info a:link, #site-info a:visited { color: #eb9f81; }
#footbar a:hover, #footbar a:focus, #footbar a:active, 
#site-info a:hover, #site-info a:focus, #site-info a:active { color: #fff; }

#site-info { background: #000; padding: 30px 0 50px; border-top: 1px solid #5d0900; color: #f1f1ec; font-size: .785em; }
#site-info #legal { position: relative; width: 615px; float: left; padding-left: 55px; }
#site-info #legal img { position: absolute; left: -3px; top: -10px; }
#site-info p { margin: 0 0 .5em; }
