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

Colors -
Orange        #fb9500
Green         #8dc434
Blue          #00b6f0
Red           #ed2024
Gold          #f8d575
Off-black     #333
Dark red      #630a0c

Link          #369
Hover         #25a
Visited       #69c

Font sizes -
16px *  .875 = 14px (base size)

14px * 1.857 = 26px
14px * 1.714 = 24px
14px * 1.571 = 22px
14px * 1.428 = 20px
14px * 1.285 = 18px
14px * 1.142 = 16px
14px *  .928 = 13px
14px *  .857 = 12px
14px *  .786 = 11px
14px *  .714 = 10px
14px *  .642 = 9px
-----------------------------------------------------------------------------*/

/* @Fonts *********/
@font-face {
	font-family: "League Gothic";
  src: url('../fonts/League_Gothic-webfont.eot'); /* IE9 */
  src: url('../fonts/League_Gothic-webfont.eot?') format('eot'), /* IE6-8 */
       url('../fonts/League_Gothic-webfont.woff') format('woff'), /* Modern browsers */
  	   url('../fonts/League_Gothic-webfont.ttf') format('truetype'); /* Older Webkits */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Bebas Neue";
	src: url('../fonts/BebasNeue-webfont.eot'); /* IE9 */
 	src: url('../fonts/BebasNeue-webfont.eot?') format('eot'), /* IE6-8 */
 	     url('../fonts/BebasNeue-webfont.woff') format('woff'), /* Modern browsers */
	     url('../fonts/BebasNeue-webfont.ttf') format('truetype'); /* Older Webkits */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Carto Bold";
	src: url('../fonts/CartoGothicStd-Bold-webfont.eot'); /* IE9 */
 	src: url('../fonts/CartoGothicStd-Bold-webfont.eot?') format('eot'), /* IE6-8 */
 		   url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'), /* Modern browsers */
	     url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'); /* Older Webkits */
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Milk";
	src: url('../fonts/ABTSmilk.eot'); /* IE9 */
 	src: url('../fonts/ABTSmilk.eot?') format('eot'), /* IE6-8 */
 	     url('../fonts/ABTSmilk.woff') format('woff'), /* Modern browsers */
	     url('../fonts/ABTSmilk.ttf') format('truetype'); /* Older Webkits */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Museo Sans";
	src: url('../fonts/MuseoSans_500-webfont.eot'); /* IE9 */
 	src: url('../fonts/MuseoSans_500-webfont.eot?') format('eot'), /* IE6-8 */
 	     url('../fonts/MuseoSans_500-webfont.woff') format('woff'), /* Modern browsers */
	     url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'); /* Older Webkits */
	font-weight: normal;
	font-style: normal;
}

/* @Reset *********/
header, hgroup, nav, section, article, aside, footer, figure, details, summary { display: block; }
html, body, form, fieldset, legend, figure,
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; }
textarea { -webkit-appearance: textfield; -moz-appearance: textfield; }
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; }
p { line-height: 1.5em; }
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") fixed; }
body { min-height: 400px; font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", 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; }

a.go:after { content: "\00A0\000BB"; font: 1.3em Georgia, Times, "Times New Roman", serif; }

/*** @Buttons *********/
button, .button, input[type=submit], input[type=button] { padding: .35em .75em .2em; display: inline-block; background: #bd5642 url("../img/button-shade.png") 0 .75em repeat-x; color: #fff; font: 200 1em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: .5px; border: 0; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 1px 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.25); box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
button:hover, input[type=submit]:hover, input[type=button]:hover, 
button:focus, input[type=submit]:focus, input[type=button]:focus, 
.button:hover, .button:focus, .button:active { background-color: #ae4935; color: #fff; cursor: pointer; text-decoration: none; }

.button.positive { background-color: #689032; }
.button.positive:hover, .button.positive:focus, .button.positive:active { background-color: #78a935; }

.choices .button { font-size: 1.714em; margin-right: 20px; }

/*** @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 *********/
.page-title + p { margin-top: -1em; }
#content-main blockquote { padding: 0 25px; border-left: 5px solid #ccc; }
ol.prose { padding-left: 22px; }
ul.prose li { padding-left: 22px; margin: 0 0 .25em; background: url("../img/bullet.png") 0 .5em no-repeat; }
ul.prose ul li { background-image: url("../img/bullet-sub.png"); }

.cols-2 { -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px; }
.cols-3 { -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; column-count: 3; column-gap: 10px; }
.cols-4 { -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; column-count: 4; column-gap: 10px; }
.cols-5 { -moz-column-count: 5; -moz-column-gap: 10px; -webkit-column-count: 5; -webkit-column-gap: 10px; column-count: 5; column-gap: 10px; }

/*** @Section colors *********/
.docs { color: #fb9500; } /* orange */
.demos { color: #ed2024; } /* red */
.learning { color: #8dc434; } /* green */
.community { color: #00b6f0; } /* blue */

/*** @Forms *********/
form ul li { padding: 0; background: none; }
form ol { padding: 0; }

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], textarea { padding: 6px 8px; background: #fff; border: 1px solid #cbc8b9; }
input[type=text]:hover, input[type=password]:hover, input[type=search]:hover, input[type=email]:hover, input[type=url]:hover, textarea:hover,
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, textarea:focus { border-color: #b6b2a0; }

/* @Layout *********/
.wrap { position: relative; width: 940px; padding: 0 10px; margin: 0 auto; }
.wrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* clear floats */

#content { min-height: 400px; }
#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; }
.section-demos #content { border-top: 0; }

#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; }

.main { width: 670px; float: left; }
.aside { width: 235px; float: right; }

/* @Header *********/
#masthead { background: #000 url("../img/bg-pinstripe.png") center top repeat-x; border-top: 2px solid #fff; border-bottom: 4px solid #f8d575; color: #ccc; min-height: 70px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
#masthead .wrap { padding-top: 55px; background: #000 url("../img/bg-pinstripe.png") center top repeat-x; }

.section-docs #masthead { border-bottom-color: #fb9500; }
.section-demos #masthead { border-bottom-color: #ed2024; }
.section-learning #masthead { border-bottom-color: #8dc434; }
.section-community #masthead { border-bottom-color: #00b6f0; }

.section-web #masthead,
.section-mobile #masthead,
.section-addons #masthead,
.section-mozilla #masthead,
.section-apps #masthead { border-bottom-color: #f8d575; }

#branding { position: absolute; left: 10px; top: 10px; width: 50%; padding: 2px 0 0 70px; margin: 0 0 10px; }
#logo { margin: 0; font: normal 32px/1 "Bebas Neue", "League Gothic", Haettenschweiler, Impact, "Arial Narrow", sans-serif; text-transform: uppercase; color: #fff; letter-spacing: 1px; }
#logo a { color: #fff; text-decoration: none; }
#logo img { position: absolute; left: -3px; top: -4px; }

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

.notice { clear: both; position: relative; top: -10px; margin: 10px 0 5px; padding: 10px 15px 0; background: #fcf6d4; border: 1px solid #e5d5c1; box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
.notice p, .notice ul { margin-bottom: 10px; }
.notice.success { background: #effdfb; border-color: #beede5; }
.notice.error { border-color: #e1a696; }
p.notice { padding-bottom: 10px; top: 0; margin-bottom: 15px; }

/*** @Accessbility @Navigation *********/
#nav-access { position: absolute; top: -20em; width: 100%; z-index: 999; }
#nav-access a:focus, #nav-access a:active { outline: 0; display: inline-block; padding: 4px 10px; background: #fff; position: absolute; top: 17em; text-decoration: none; box-shadow: 2px 2px 3px rgba(0,0,0,.5); }

/*** @Main @Nav *********/
#nav { float: left; margin: 0 0 6px 70px; font: 200 18px/1 "Bebas Neue", "League Gothic", "Arial Narrow", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#nav:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#nav a { color: #ccc; }
#nav a:hover, #nav a:focus, #nav a:active { color: #fff; outline: 0; }

#nav-main { float: right; margin: 0; }
#nav-main li { position: relative; display: inline-block; margin: 0 12px -6px 0; }

#nav-main a { display: inline-block; height: 18px; padding-bottom: 9px; background: url("../img/nav-arrows.png") center bottom no-repeat; }
#nav-main a:hover, #nav-main a:focus, #nav-main a:active { text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid #000; }

#nav-main .sub-menu a { display: inline; height: auto; padding: 0; background: none; }
#nav-main .sub-menu a:hover, #nav-main .sub-menu a:focus, #nav-main .sub-menu a:active { padding: 0; border: 0; }

#nav-main .toggle { position: relative; z-index: 99; padding-right: 12px; margin-right: -12px; }
#nav-main .menu { padding-right: 12px; background: url("../img/nav-arrows.png") right -545px no-repeat; }
#nav-main .menu:hover { background-position: right -645px; }

#nav-main-docs a:hover, #nav-main-docs a:focus, #nav-main-docs a:active { color: #ffae3b; }
#nav-main-demos a:hover, #nav-main-demos a:focus, #nav-main-demos a:active { color: #f33; }
#nav-main-learning a:hover, #nav-main-learning a:focus, #nav-main-learning a:active { color: #a7df38; }
#nav-main-community a:hover, #nav-main-community a:focus, #nav-main-community a:active { color: #0cf; }

#nav-main .menu { padding: 0 12px 0 0; background: url("../img/nav-arrows.png") 100% -545px no-repeat; }
#nav-main .menu:hover { background-position: 100% -595px; }
#nav-main #nav-main-docs:hover { background-position: 100% -645px; }
#nav-main #nav-main-community:hover { background-position: 100% -1145px; }

#nav-main .menu .sub-menu { position: absolute; z-index: 98; left: -999em; top: 27px; background: #000; list-style: none; width: 90px; font-size: 1em; padding: 10px 6px 4px; border: 4px solid #f8d575; text-align: center; -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); box-shadow: 0 0 3px rgba(0,0,0,.5); }
#nav-main .menu .sub-menu li { display: block; float: none; width: 100%; margin: 0 0 .35em; }
.hasJS #nav-main .menu .sub-menu, #nav-main .menu:hover .sub-menu { left: 50%; margin-left: -55px; }
.hasJS #nav-main .menu .sub-menu { display: none; }

.section-docs #nav-main-docs { background-position: right -645px; }
.section-docs #nav-main-docs .docs { padding-bottom: 9px; border: 0; color: #fb9500; background-position: center -130px; }
.section-demos #nav-main-demos .demos { padding-bottom: 9px; border: 0; color: #ed2024; background-position: center -430px; }
.section-learning #nav-main-learning .learning { padding-bottom: 9px; border: 0; color: #8dc434; background-position: center -230px; }
.section-community #nav-main-community { background-position: right -1145px; }
.section-community #nav-main-community .community { padding-bottom: 9px; border: 0; color: #00b6f0; background-position: center -330px; }

.section-docs #nav-main-docs .docs:hover, .section-docs #nav-main-docs .docs:focus, .section-docs #nav-main-docs .docs:active { color: #ffae3b; background-position: center -180px; border-bottom: 1px solid #000; padding-bottom: 8px; }
.section-demos #nav-main-demos .demos:hover, .section-demos #nav-main-demos .demos:focus, .section-demos #nav-main-demos .demos:active { color: #f33; background-position: center -480px; border-bottom: 1px solid #000; padding-bottom: 8px; }
.section-learning #nav-main-learning .learning:hover, .section-learning #nav-main-learning .learning:focus, .section-learning #nav-main-learning .learning:active { color: #a7df38; background-position: center -280px; border-bottom: 1px solid #000; padding-bottom: 8px; }
.section-community #nav-main-community .community:hover, .section-community #nav-main-community .community:focus, .section-community #nav-main-community .community:active { color: #0cf; background-position: center -380px; border-bottom: 1px solid #000; padding-bottom: 8px; }

.section-web #nav-main-topics, .section-mobile #nav-main-topics, .section-addons #nav-main-topics, .section-mozilla #nav-main-topics { background-position: 100% -595px; }
.section-web #nav-main-topics .toggle, .section-mobile #nav-main-topics .toggle, .section-addons #nav-main-topics .toggle, .section-mozilla #nav-main-topics .toggle { color: #f8d575; }

#nav-main .toggle { position: relative; z-index: 999; padding-right: 12px; margin: 0 -12px 0 0; background: url("../img/nav-arrows.png") no-repeat; }
#nav-main .toggle.open { height: 24px; padding-bottom: 9px; margin-bottom: -9px; border: 0; }

#nav-main #nav-main-topics .open { color: #f8d575; background-position: center -30px; }
#nav-main #nav-main-docs .open { color: #ffae3b; background-position: center -80px; }
#nav-main #nav-main-community .open { color: #00b6f0; background-position: center -1080px; }

#nav-main-topics a:hover, #nav-main-topics a:focus, #nav-main-topics a:active { color: #f8d575; }
#nav-main-community a:hover, #nav-main-community a:focus, #nav-main-community a:active { color: #0cf; }

#nav #nav-sub-community { border-color: #00b6f0; }

/*** @Shortcuts to @Docs *********/
#nav-main #nav-sub-docs { width: 420px; padding: 10px 15px; font-size: .857em; border-color: #fb9500; }
.hasJS #nav-main #nav-sub-docs, #nav-main .menu:hover #nav-sub-docs { margin-left: -150px; }
#nav-main #nav-sub-docs ul { list-style: none; margin: 0; overflow: hidden; font: 11px "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: normal; }
#nav-main #nav-sub-docs li { width: 24.9%; float: left; padding: .5em 0; margin: 0; text-align: center; }
#nav-main #nav-sub-docs li li { width: 100%; float: none; padding: 0; margin: 0; }
#nav-main #nav-sub-docs p { border-top: 1px solid #666; clear: both; padding: .75em 0 0; margin: .5em 0; text-align: right; font: .785em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: normal; }
#nav-main #nav-sub-docs a { color: #ccc; height: auto; display: block; padding: .4em 0; border: 0; }
#nav-main #nav-sub-docs a:hover, #nav-sub-docs a:focus, #nav-sub-docs a:active { border: 0; padding: .4em 0; color: #fb9500; text-decoration: underline; }

/*** @Search *********/
#site-search { width: 280px; float: right; text-align: left; padding-left: 0; margin: -8px 140px 0 0; position: relative; }
#site-search p { margin: 0; }
#site-search #q { width: 160px; padding: 3px 4px 3px 28px; margin: 0 0 0 4px; float: right; background: #555; background: rgba(80,80,80,.9) url("../img/search-icons.png") 6px -96px no-repeat; border: 1px solid #666; color: #aaa; font-size: .857em; -webkit-appearance: textfield; appearance: textfield; }
#site-search #q:hover, #site-search #q:focus { border-color: #9c0d10; background-color: #fff; color: #333; }
#site-search button { font-size: 12px; width: 60px; position: absolute; right: -70px; }
#site-search-gg { width: 60px; height: 28px; font-size: .642em; float: right; text-align: right; position: relative; }
#site-search-gg * { margin: 0; padding: 0; }
#site-search-gg img { height: 12px; display: block; position: absolute; top: 13px; right: 0; }
#site-search-gg .gsc-branding-text { width: 60px; display: block; color: #666; position: absolute; top: 0; }

/*** @User status *********/
.user-state { width: 235px; float: right; text-align: right; color: #666; margin: 0; z-index: 1000; }
.user-state li { display: inline; }
.user-state li + li { padding-left: 10px; margin-left: 8px; border-left: 1px solid #666; }
.user-state a { color: #ccc; }
.user-state a:hover, .user-state a:focus, .user-state a:active { color: #fff; }
.user-state form { display: inline; }
#masthead .user-state { font-size: .786em; margin-bottom: 0; position: absolute; right: 150px; top: 12px; }
#site-info .user-state { margin-bottom: .5em; }

.reportBug { position: absolute; font-size: .8em; top: 48px; right: 20px; }
.reportBug span { font-weight: bold; color: #F8D475; display: inline-block; }
.reportBug a { color: #fff; background: rgba(80, 80, 80, 0.9); border-radius: 6px; padding: 4px 7px; display: inline-block; border: 1px solid #666; }
.reportBug a:hover, .reportBug a:active { background: #fff; }
.reportBug a:hover span, .reportBug a:active span { color: #cc3435; }

/*** @BrowserID *********/
a.browserid-signin:link, a.browserid-signin:visited { padding: 1px 10px 1px 28px; color: #fff !important; background: #555 url("../img/btn-browserid.png") -1px 50% no-repeat; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); }
a.browserid-signin:hover, a.browserid-signin:focus, a.browserid-link:active { background-color: #666; }

.user-signin a.browserid-signin { position: relative; z-index: 1001; }

.user-state .browserid-info { position: absolute; z-index: 1000; left: -999em; top: 0; margin-top: 25px; 
  width: 300px; 
  color: #ccc; 
  border: 4px solid #333; 
  padding: 8px 14px; 
  text-align: left;
  background: #000;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); 
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); 
  box-shadow: 0 0 3px rgba(0,0,0,.5); 
}
.browserid-info h3:after {
  content: "^";
  width: 100%;
  display: block;
  text-indent: -999em;
  overflow: hidden;
  padding: 0 4px;
  height: 25px;
  margin: 0 -4px;
  background: transparent url("../img/nav-arrows.png") 280px -1186px no-repeat;
  position: absolute; top: -25px; right: 0;
}
.browserid-info p { margin: 0 0 .75em; }
.user-state .browserid-info a { color: #fff !important; display: inline; padding: 0; }
.user-state .browserid-info a.browserid-signin { display: inline-block; font-size: 1.124em; font-weight: bold; padding: 2px 12px 2px 30px; margin-top: .5em; }

.hasJS .user-state .menu .browserid-info, .user-state .menu:hover .browserid-info { right: -14px; left: auto; margin-left: 0; }
.hasJS .user-state .menu .browserid-info { display: none; }

.footer .user-state .browserid-info { top: auto; bottom: 30px; margin: 0 0 25px; }
.footer .browserid-info h3:after { top: auto; bottom: -25px; background: transparent none; }

/*** @Tabzilla *********/
#masthead #tabzilla { position: absolute; right: 0; top: 0; }

/*** @Language Picker *********/
footer .languages { float: right; text-align: right; margin: 0 0 .5em; }

/*** @Toolbar *********/
#nav-toolbar { font-size: .786em; text-shadow: 1px 1px 0 rgba(255,255,255,.25); padding: 3px 0; border-top: 1px solid #cbc8b9; border-bottom: 1px solid #f8f8f6; background: #e4e4d9; background: rgba(198,198,175,.35); }
#nav-toolbar a:link, #nav-toolbar a:visited { color: #6d6d67; }
#nav-toolbar a:hover, #nav-toolbar a:focus, #nav-toolbar a:active { color: #25a; }

#nav-toolbar .demo-submit { float: right; margin: 0; }
#nav-toolbar .demo-submit .button { color: #fff; text-shadow: none; font-size: 1.183em; padding: .35em 10px; background-color: #689032; background-position: 0 .85em; }
#nav-toolbar .demo-submit .button:hover, #nav-toolbar .demo-submit .button:focus, #nav-toolbar .demo-submit .button:active { background-color: #78a935; }

/*** @Breadcrumbs *********/
#nav-toolbar .crumbs { float: left; margin: .5em 0; }
#nav-toolbar .crumbs ol { margin: 0; list-style: none; }
#nav-toolbar .crumbs li { display: inline; padding-left: 13px; margin-left: 6px; background: url("../img/nav-arrows.png") -15px -698px no-repeat; }
#nav-toolbar .crumbs li:first-child { padding-left: 0; margin-left: 0; background: none; }

/*** @Paging (Next and Prev) *********/
#nav-toolbar .paging { float: right; width: 235px; margin: .5em 0; text-align: right; font-weight: bold; text-transform: uppercase; }
#nav-toolbar .paging ul { margin: 0; list-style: none; }
#nav-toolbar .paging li { display: inline; }
.paging a { background-image: url("../img/nav-arrows.png"); background-repeat: no-repeat; }
.paging li.prev { border-right: 1px solid #6d6d67; padding-right: 13px; margin-right: 10px; }
.paging li.prev a { padding-left: 13px; background-position: 0 -798px; }
.paging li.prev a:hover, .paging li.prev a:focus, .paging li.prev a:active { background-position: 0 -848px; }
.paging li.next a { padding-right: 13px; background-position: 100% -698px; }
.paging li.next a:hover, .paging li.next a:focus, .paging li.next a:active { background-position: 100% -748px; }
.paging li.first a { display: inline-block; width: 20px; margin-right: -8px; text-indent: -999em; background-position: 100% -997px; }
.paging li.first a:hover, .paging li.first a:focus, .paging li.first a:active { background-position: 100% -1047px; }
.paging li.last a { display: inline-block; width: 20px; margin-left: -8px; text-indent: -999em; background-position: 0 -897px; }
.paging li.last a:hover, .paging li.last a:focus, .paging li.last a:active { background-position: 0 -947px; }

/*** @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% 50px 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 *********/
#section-head { background: #000 url("../img/bg-check-lt.png"); border-bottom: 4px solid #f8d575; border-top: 4px solid #333; margin-top: -4px; padding: 8px 0 4px; color: #ccc; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -moz-box-shadow: 0 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
#section-head h1.intro { width: 660px; float: left; font: normal 16px/1 "Museo Sans", sans-serif; margin: 0 0 .25em 18px; }
#section-head h1.intro b { font-size: 32px; font-weight: normal; display: block; margin-top: 8px; color: #f8d475; }

#section-head .util { width: 235px; float: right; font-size: .785em; }
#section-head .util p { margin: 0 0 .25em; }
#section-head .util ul { list-style: none; margin: 0; }
#section-head .util li { float: left; margin-right: 20px; font-style: italic; font-weight: bold; }
#section-head .util a { color: #fff; display: inline-block; padding: 5px 0 5px 25px; background: url("../img/icons-headbar.png") no-repeat; }
#section-head .util-twitter a { background-position: 0 -300px; }
#section-head .util-rss a { background-position: 0 -350px; }
#section-head .util-discuss a { background-position: 0 -400px; }

/* @Home *********/
/*** @Welcome *********/
#welcome-bar { background: #000 url("../img/bg-check-lt.png"); border-bottom: 4px solid #f8d575; border-top: 4px solid #333; margin-top: -4px; color: #ccc; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -moz-box-shadow: 0 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
#welcome-bar .wrap { padding: 25px 160px; width: 620px; }
#welcome-bar h1 { font: normal 42px/1 "Museo Sans", sans-serif; text-align: center; color: #f8d475; margin: 0 0 .3em; }
#welcome-bar h1 b { font-weight: normal; color: #cc3435; }
#welcome-bar h2 { font-size: 1em; text-align: center; color: #fff; }
#welcome-bar p { font-size: .857em; line-height: 1.6; margin: 0; text-align: justify; }
#welcome-close { cursor: pointer; width: 28px; height: 28px; position: absolute; right: 15px; top: 15px; text-indent: -999em; overflow: hidden; background: #000 url("../img/icons-welcome.png") 0 -550px no-repeat; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
#welcome-close:hover, #welcome-close:focus { background-position: 0 -600px; }

#welcome-open { position: absolute; right: 10px; top: -2px; z-index: 20; cursor: pointer; padding: 3px 8px; font: .785em/1 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: normal; color: #444; background: #f8d575 none; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }
#welcome-open:hover, #welcome-open:focus { color: #000; cursor: pointer; }

/*** @Top @Docs *********/
#top-docs { background: #fff; margin: 20px 0 40px; padding: 19px; border: 1px solid #e8e8e8; overflow: hidden; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.15); box-shadow: 0 2px 2px rgba(0,0,0,.15); }
#top-docs h1 { text-align: center; font: normal 24px/1.1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
#top-docs h1 b { font-weight: normal; color: #995c00; }
#top-docs ul { overflow: hidden; }
#top-docs li { width: 18%; padding: 0 .9%; float: left; border-left: 1px dotted gray; text-align: center;  }
#top-docs li:first-child { border: 0; }
#top-docs li li { width: 100%; float: none; margin: 0; border: 0; font-size: .857em; color: #666; }
#top-docs li a { font-weight: bold; display: block; padding: .4em 0; }
#top-docs .more { clear: both; margin: 1em 0 0; font-size: .857em; color: #666; text-align: center; }
#top-docs li a.more { margin: 0; font-size: 1em; color: #666; font-weight: normal; }

/*** @Promos *********/
#home-promos { clear: both; overflow: hidden; }
.home-promos .promo { float: left; position: relative; width: 218px; min-height: 163px; margin: 0 20px 40px 0; border: 1px solid rgba(0,0,0,.1); color: #fff; font-size: .714em; text-align: center; background: #666 url("../img/bg-check-dk.png"); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.15); box-shadow: 0 2px 2px rgba(0,0,0,.15); }
.home-promos .promo:last-child { margin-right: 0; }
.home-promos .promo a { position: absolute; left: 0; top: 0; z-index: 10; display: block; height: 133px; width: 188px; padding: 15px; color: #fff; text-decoration: none;  }
.home-promos .promo h2 { margin: 0 0 .1em; font: 2.4em/1 "Bebas Neue"; text-transform: uppercase; letter-spacing: .5px; }
.home-promos .promo .more { font-size: 1.3em; }
.home-promos .promo div { position: absolute; z-index: 5; height: 163px; width: 218px; background: url("../img/bg-homepromos.png") no-repeat; 
  opacity: .6; 
  -moz-transition-property: opacity, background-position; 
  -moz-transition-duration: 0.5s; 
  -webkit-transition-property: opacity, background-position;
  -webkit-transition-duration: 0.5s; 
  -o-transition-property: opacity, background-position; 
  -o-transition-duration: 0.5s; 
  transition-property: opacity, background-position;
  transition-duration: 0.5s;
}
.home-promos a:hover h2, .home-promos a:focus h2, .home-promos a:active h2 { text-decoration: underline; }
.home-promos .promo:hover div { 
  opacity: 1; 
  -moz-transition-property: opacity, background-position; 
  -moz-transition-duration: 0.25s; 
  -webkit-transition-property: opacity, background-position;
  -webkit-transition-duration: 0.25s; 
  -o-transition-property: opacity, background-position; 
  -o-transition-duration: 0.25s; 
  transition-property: opacity, background-position;
  transition-duration: 0.25s;  
}

#promo-learn { background-color: #7ea82a; }
#promo-learn div { background-position: 0 90px; }
#promo-learn:hover div { background-position: 0 80px; }
#promo-demos { background-color: #e24244; }
#promo-demos div { background-position: -240px 90px; }
#promo-demos:hover div { background-position: -240px 80px; }
#promo-foxdev { background-color: #022856; background-image: url("../img/bg-check-dk.png"), url("../img/bg-space-blue.jpg"); }
#promo-foxdev div { background-position: -480px 90px; }
#promo-foxdev:hover div { background-position: -480px 80px; }
#promo-aurora { margin-right: 0; background-color: #472f64; background-image: url("../img/bg-check-dk.png"), url("../img/bg-space-purple.jpg"); }
#promo-aurora div { background-position: -720px 90px; }
#promo-aurora:hover div { background-position: -720px 80px; }

#promo-apps { margin-right: 0; background-color: #f05e23; background-image: url("../img/bg-orange-collage.jpg"); }
#promo-apps div { background-image: none; box-shadow: inset 0 0 50px rgba(150,30,0,1); -moz-transition: box-shadow .2s ease-out; -webkit-transition: box-shadow .2s ease-out; -o-transition: box-shadow .2s ease-out; transition: box-shadow .2s ease-out; }
#promo-apps .more { -moz-transition: all .2s ease-out; }
#promo-apps:hover .more { margin-top: -.1em; font-size: 1.4em; text-shadow: 2px 3px 5px rgba(0,0,0,.25); -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
#promo-apps:hover div { box-shadow: inset 0 0 30px rgba(150,30,0,.25); -moz-transition: box-shadow .2s ease-in; -webkit-transition: box-shadow .2s ease-in; -o-transition: box-shadow .2s ease-in; transition: box-shadow .2s ease-in; }

.home-extra #webfwd-promo { margin: -15px 0 1.5em; }
.home-extra #snippet-promo a { background: url("../img/features/labs_snippets_landing.png"); width:456px; height:150px; position:relative; display: block; font-family: "Open Sans", sans-serif; text-shadow: 1px 1px 0 #fff; }
	.home-extra #snippet-promo a span.heading { display: block; color: #484848; font-size: 1.9em; position: absolute; top:20px; left: 20px; display: inline-block; line-height: 1.2em; }
	.home-extra #snippet-promo a span.conversion { font-size: 1.5em; left: 20px; bottom: 30px; display: inline-block; position: absolute; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25); }

.home-extra .promo { margin: 0 0 1.5em; }
.home-extra .col-1 { width: 420px; float: left; }
.home-extra .col-2 { width: 420px; float: right; }

/*** @News *********/
#home-news { width: 420px; float: left; padding: 0 20px; position: relative; }
#home-news h1 { margin: 0 0 .8em; font: normal 1.714em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
#home-news:before, #home-news:after { content: ""; display: block; width: 410px; height: 250px; position: absolute; background: #fff; border: 1px solid #cdcdcd; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#home-news:before { top: 3.2em; left: 20px; z-index: 6; -moz-transform: translate(12px) rotate(2.5deg); -webkit-transform: translate(12px) rotate(2.5deg); -o-transform: translate(12px) rotate(2.5deg); transform: translate(12px) rotate(2.5deg); }
#home-news:after { top: 3.2em; left: 20px; z-index: 5; -moz-transform: translate(-8px) rotate(-3deg); -webkit-transform: translate(-8px) rotate(-3deg); -o-transform: translate(-8px) rotate(-3deg); transform: translate(-8px) rotate(-3deg); }
#home-news .hfeed { position: relative; z-index: 10; background: #fff; padding: 15px 20px; border: 1px solid #ccc; font-size: .857em; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#home-news .hentry { border-bottom: 1px dotted #999; margin: 0 0 1em; padding: 0 0 1em; }
#home-news .hentry:last-child { border: 0; padding: 0; }
#home-news .entry-title { font-size: 14px; margin: 0 0 .5em; }
#home-news .entry-summary { margin: 0 0 .75em; }
#home-news .entry-meta { font-size: 11px; margin: 0; color: #666; }
#home-news .entry-meta :link, #home-news .entry-meta :visited { color: #333; }

/*** @Demos *********/
#home-demos { width: 420px; float: right; padding: 0 20px; }
#home-demos h1 { width: 60%; float: left; margin: 0 0 .8em; font: normal 1.714em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
#home-demos p.more { width: 35%; float: right; text-align: right; font-size: .857em; margin: .5em 0 0; }

#home-demos .gallery .demo { width: 180px; padding: 185px 10px 1px; margin: 0 0 20px 19px; }
#home-demos .gallery .demo.row-first { margin-left: 0; }
#home-demos .demo-title img { width: 180px; max-height: 133px; padding: 9px; border: 1px solid #ccc; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#home-demos .demo-title a:hover img, #home #home-demos .demo-title a:focus img, #home #home-demos .demo-title a:active img { -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.hasJS #home-demos .gallery .demo { padding-top: 153px; }
.hasJS #home-demos .gallery .byline { display: none; }
.hasJS #home-demos .gallery .demo-title { text-indent: -999em; height: 0; margin: 0; }

#home #content .demohover { display: none; position: absolute; z-index: 99; margin: -6px -6px 0; border: 1px solid #ddd; -moz-border-radius: 9px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#home #content .demohover .in { position: relative; width: 180px; padding: 165px 15px 9px; background: #fff; background: rgba(255,255,255,.95); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
#home #content .demohover .demo-title { font-size: 1.285em; }
#home #content .demohover .demo-title img { width: 180px; max-height: 180px; position: absolute; top: 5px; left: 5px; padding: 10px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#home #content .demohover .extra { display: block; }
#home #content .demohover .launch { top: 115px; right: 25px; }

#home-demos .demo .flag, #home #content .demohover .flag { display: none; }

#home-demos .gallery .demo-submit { width: 180px; height: 133px; float: left; margin: 0 0 20px 20px; padding: 9px; background: #fff; border: 1px solid #ccc; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#home-demos .gallery .demo-submit:hover { -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
#home-demos .gallery .demo-submit p { text-align: center; width: 180px; height: 133px; background: url("../img/bg-checker.png"); font: normal 1.285em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
#home-demos .gallery .demo-submit strong { display: block; margin-top: 10px; font-weight: normal; font-size: 2em; color: #369; }
#home-demos .gallery .demo-submit a { display: block; width: 140px; height: 100px; padding: 25px 20px 8px;  color: #333; text-decoration: none; }
#home-demos .gallery .demo-submit a:hover strong, #home-demos .gallery .demo-submit a:focus strong, #home-demos .gallery .demo-submit a:active strong { color: #25a; text-decoration: underline; }

/* @Tabbed boxes *********/
.tabbed-on { border: 1px solid #aba9a5; padding-top: 3em; position: relative; }
.tabbed-on ul.index { position: absolute; top: 0; left: 0; border-bottom: 1px solid #aba9a5; background: rgba(0,0,0,.04) url("../img/light-shade.png") 0 1.5em repeat-x; }
ul.index { width: 100%; height: 3em; list-style: none; margin: 0; }
#content-main ul.index li { border: 1px solid #aba9a5; border-bottom: 0; cursor: pointer; float: left; margin-right: -1px; text-align: center; color: #4e4f52; background: #eee url("../img/light-shade.png") 0 1.25em repeat-x; padding: .75em 20px; min-width: 80px; font: 200 1.2em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#content-main ul.index li:hover { background: #fff none; }
#content-main ul.index li.active { background: #fff none; color: #333; border-bottom: 1px solid #fff; padding-bottom: .85em; }
#content-main .tabbed-on ul.index li { border-width: 0 1px 0 0; margin-right: 0; }
.tabbed-on .hidden, .folder { display: none; visibility: hidden; }
.folder:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
.folder.visible { display: block; visibility: visible; background: #fbfbfa; padding: 20px; height: auto; overflow: visible; }
ul.index a { color: #2f2f2f; text-decoration: none; }
ul.index a:hover, ul.index a:focus, ul.index a:active { color: #2f2f2f; text-decoration: none; }

/* @Sidebar @modules *********/
.module { background: #fff; border-bottom: 3px solid #cecabc; padding: 18px; margin: 0 0 22px; }
.module.hot { border-bottom: 2px solid #e9c5bb; background: #fff url("../img/bg-module-hot.png") 80% 100% no-repeat; }
.module .mod-title { margin: -18px -18px 18px; padding: 15px 18px 12px; background: #2f2f2f url("../img/bg-headings.png") 0 0 no-repeat; color: #fff; font: 200 1.285em/1.2 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.module .mod-title a { color: #a8d4ff; }
.module ul, .module ol { margin: 0; overflow: hidden; }
.module .prose { font-size: .857em; }
.mod-intro { font: italic .857em 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; -moz-box-shadow: 1px 1px 0 #d5d5d5; -webkit-box-shadow: 1px 1px 0 #d5d5d5; box-shadow: 1px 1px 0 #d5d5d5; }
.module .gallery a:hover img, .module .gallery a:focus img, .module .gallery a:active img { -moz-box-shadow: 1px 1px 0 #25a; -webkit-box-shadow: 1px 1px 0 #25a; box-shadow: 1px 1px 0 #25a; }

.module .hentry { font-size: .786em; border-bottom: 1px dotted #d8d4ca; padding-bottom: 1em; margin-bottom: 1em; }
.module .hentry:last-child { border: 0; padding: 0; margin: 0; }
.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; }

#content-sub .banner { margin: 0 0 1.5em; }
#content-sub .banner a img { border: 2px solid #dcd8c9; margin-left: -2px; -moz-transition: border-color 0.15s ease; -webkit-transition: border-color 0.15s ease; transition: border-color 0.15s ease; }
#content-sub .banner a:hover img { border-color: #bfcfd7; -moz-transition: border-color 0.15s ease; -webkit-transition: border-color 0.15s ease; transition: border-color 0.15s ease; }

/* for module-style boxes in the main content */
.modules { clear: both; overflow: hidden; }
.modules .module { width: 275px; float: left; margin-right: 20px; }

#before-begin .mod-title { background-position: 100% -300px; }
#prepare-demo .mod-title { background-position: 100% -200px; }

#content .module.notes ul { font-size: .785em; }
#content .module.notes li { margin: 0 0 10px; padding: 0 0 10px; background: none; border-bottom: 1px dotted #b9b6a7; }
#content .module.notes li:last-child { padding: 0; border: 0; margin: 0; }

/*** @Doc of the day *********/
#content-sub #doc-of-the-day { border: 4px solid #f8d575; background: #000; color: #fff; }
#content-sub #doc-of-the-day .mod-title { text-align: center; padding: 35px 18px 30px; margin-bottom: 10px; font-size: 2.143em; text-shadow: 1px 2px 0 #000; background: transparent url("../img/bg-headings.png") center -600px no-repeat; }
#doc-of-the-day .entry-title a:link, #doc-of-the-day .entry-title a:visited, 
#doc-of-the-day .entry-summary a:link, #doc-of-the-day .entry-summary a:visited, 
#doc-of-the-day .entry-meta a:link, #doc-of-the-day .entry-meta a:visited { color: #f8d575; }

/*** @Doc Pagination *********/
ol.pagination { border-top: solid 1px #9ACCF7; font-family: Verdana; margin: 20px 0; padding: 20px 0; }
ol.pagination li { float: left; list-style: none; padding: 0 2px; }
ol.pagination li.prev { padding-left: 0; }
ol.pagination li a { float: left; padding: 3px 8px 5px; }
ol.pagination li a:hover { text-decoration: underline; }
ol.pagination li.prev a { padding-left: 0; }
ol.pagination li.selected a { background: #447bc4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; cursor: default; }
ol.pagination li.selected a:hover { text-decoration:none; }

/*** @Tools *********/
#content-sub #tools { background: #e1dcba; background: rgba(200,190,90,.25); border-bottom: 3px solid #c9ba5e; }
#tools .mod-title { color: #cabd6a; background: #2f2f2f url("../img/bg-headings.png") 100% -200px no-repeat; }
#tools .item { position: relative; font-size: .857em; padding: 0 0 1em 50px; margin-bottom: 1em; border-bottom: 1px dotted #b6bc9f; }
#tools .item:last-child { padding-bottom: 0; margin: 0; border: 0; }
#tools .item h4, #tools .item h5, #tools .item p { margin: 0 0 .2em; }
#tools .item .category { font: bold 9px Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; }
#tools .item .meta { font-size: .857em; font-weight: bold; }
#tools .item h4 img { position: absolute; left: 0; top: 0; }

/*** @Support *********/
#content-sub #support { background: #bab3a1; background: rgba(125,120,95,.5); border-bottom: 3px solid #80765d; }
#support .mod-title { color: #b1aa96; background: #2f2f2f url("../img/bg-headings.png") 100% -300px no-repeat; }
#support ul { margin: 0; }
#support li { padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px dotted #788275; }
#support li:last-child { padding: 0; margin: 0; border: 0; }
#support a:link, #support a:visited { display: block; padding: 14px 10px 14px 50px; background: #b1aa96 url("../img/icons-support.png") no-repeat; background-color: rgba(125,120,95,.5); color: #fff; font-size: .857em; }
#support a:hover, #support a:focus, #support a:active { background-color: #89826c; background-color: rgba(125,120,95,.6); }
#support a.support-forums { background-position: 10px 0; }
#support a.support-tech { background-position: 10px -100px; }
#support a.support-news { background-position: 10px -200px; }
#support a.support-groups { background-position: 10px -300px; }

/*** @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; background: transparent url("../img/light-shade.png") 0 .95em repeat-x; }
#content-sub .heat-graph a b { float: right; font-family: Georgia, Times, "Times New Roman", serif; }

/** @Firefox4-Web-Developers *********/
.sidebar aside div#mdn-firefox4-webdev { 
    background: url("../img/sidebar/bg-fx4-dev.png") 82px 0px no-repeat #0A1324;
    border: solid 4px #D64203;
    color: #FFF;
} 
#mdn-firefox4-webdev h3 { 
    color: #D64203; font-weight: 200;
    letter-spacing: .5px;
    line-height: 0.8em;
    font-size: 2.2em;
    margin-bottom: 0px;
}
#mdn-firefox4-webdev h4 {
   font-size: 1.5em; font-weight: 200;
}
#mdn-firefox4-webdev h3, #mdn-firefox4-webdev h4 {
    font-family: "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif;
    text-transform: uppercase;
}
#mdn-firefox4-webdev p { margin-bottom: 0px; }

/*** @Twitter *********/
#content-sub #mdn-twitter { background: #f4f8fc; border: 0; }
#content-sub #mdn-twitter .mod-title { background: #2f2f2f url("../img/bg-headings.png") 60px -115px no-repeat; }
#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: 10px 18px 10px 45px; background: #c1cbd3 url("../img/icons-headbar.png") 16px -438px no-repeat; color: #fff; font: 200 1.286em/1.6 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", 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; }

/*** @Help us *********/
#content-sub .help { border: 3px solid #f8d575;
  background: #f2a81d;
  background: -moz-linear-gradient(top, #e39c1d 0, #f2a81d 20%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e39c1d), color-stop(20%, #f2a81d));
  background: linear-gradient(top, #e39c1d 0, #f6ac22 20%);
  -moz-box-shadow: 0 3px 0 #bf8c4f, inset 0 2px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 3px 0 #bf8c4f, inset 0 2px 2px rgba(0,0,0,.2);
  box-shadow: 0 3px 0 #bf8c4f, inset 0 2px 2px rgba(0,0,0,.2);
}
#content-sub .help h3 { margin: 0 0 .15em; color: #fff; text-align: center; font: 200 32px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 5px 0 #924b09; }
#content-sub .help p { margin: 0 0 .5em; color: #630; font: bold italic .857em Georgia, Times, "Times New Roman", serif; }
#content-sub .help .go { color: #fff; font-size: 1.142em; line-height: 1; text-shadow: 0 2px 1px #924b09; display: inline-block; padding: 4px 6px; margin: 0 -6px; -moz-transition: ease .5s background; -webkit-transition: ease .5s background; transition: ease .5s background; }
#content-sub .help .go:hover, #content-sub .help .go:focus { text-decoration: none; background: #e2921f; background: rgba(146,75,9,.2); border-radius: 5px; -moz-transition: ease .15s background; -webkit-transition: ease .5s background; transition: ease .5s background; }

/*** @Contact form *********/
#content-sub #contact { background: #cdc9bb; border-bottom-color: #afa894; }
#content-sub #contact .mod-title { background: transparent none; color: inherit; padding: 0; margin: 0 0 .5em; }
#contact li { margin-bottom: 1em; }
#contact label { display: block; margin: 0 0 .25em; font: 200 1.142em/1.2 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
#contact input, #contact textarea { border: 1px solid #bfbbad; background: #fff; padding: 4px 8px; margin-left: -1px; width: 182px; font-size: .857em; }
#contact input:hover, #contact input:focus, #contact textarea:hover, #contact textarea:focus { border-color: #8d846f; }
#contact .fm-submit { text-align: right; }

/* @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 .wrap { background: #450000; }
#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: .786em; }
#site-info .wrap { background: #000; }
#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; }

/* @Boxes *********/
section.boxed, div.boxed, form.boxed { background: #fff; padding: 18px; margin: 0 4px 26px 0; border: 1px solid #ecece7;
  -moz-box-shadow: 2px 2px 0 rgba(170,160,130,.5), 4px 4px 0 rgba(200,190,165,.5);
  -webkit-box-shadow: 2px 2px 0 rgba(170,160,130,.5), 4px 4px 0 rgba(200,190,165,.5);
  box-shadow: 2px 2px 0 rgba(170,160,130,.5), 4px 4px 0 rgba(200,190,165,.5); 
}
section.boxed:after, div.boxed:after, form.boxed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.boxed .head { margin: 0 0 1.4em; border-bottom: 3px solid #f8d475; }
.boxed .head h2, .boxed .head h3 { margin-bottom: 0; color: #000; font: 200 1.857em/1.2 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.boxed .head p { margin: -2px 0 1em; font: bold italic .857em/1.1 Georgia, Times, "Times New Roman", serif; }

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

/* @Docs @Landing *********/
#doc-search { border: 1px solid #cbc8b9; background: rgba(198,198,175,.25); padding: 4px; margin-bottom: 1em; font-size: .928em; }
#doc-search p { margin: 0; }
#doc-search #q-docs { width: 390px; margin-right: 8px; }
#doc-search #doc-filter { width: 140px; margin-right: 8px; }

#docs #doc-topics { list-style: none; margin: 0 0 1.5em; font-size: .857em; overflow: hidden; border-bottom: 1px solid #dbd8cd; }
#docs #doc-topics li { float: left; width: 285px; margin: 0; position: relative; background-image: none; padding: 0 0 1em; }
#docs #doc-topics li:nth-child(even) { border-left: 1px solid #dbd8cd; margin-left: -1px; padding-left: 25px; }
#docs #doc-topics li:nth-child(odd) { border-right: 1px solid #dbd8cd; clear: left; padding-right: 25px; }
#docs #doc-topics h3 { margin: 0 0 .25em; }
#docs #doc-topics img { float: left; margin-left: -70px; -moz-box-shadow: 1px 1px 0 #cbcbcb; -webkit-box-shadow: 1px 1px 0 #cbcbcb; -box-shadow: 1px 1px 0 #cbcbcb; }

#glossary { background: #f5f5f1; font-size: .786em; }
#glossary a { font-weight: bold; }
#content #glossary li { background-image: none; padding: 18px 18px .5em; border-top: 1px solid #bdbdab; }
#content #glossary li:first-child { border: 0; }
#content #glossary li:nth-child(even) { background: #e9e9e0; }
#glossary h3 { margin: 0 0 .15em; }
#glossary ul { margin: 0 0 .5em; 
  -moz-column-count: 4; -moz-column-gap: 10px;
  -webkit-column-count: 4; -webkit-column-gap: 10px;
  column-count: 4; column-gap: 10px;
}
#content #glossary ul li { width: 90%; display: inline-table; margin: 0 10px .5em 0; background: transparent url("../img/bullet-tiny.png") 0 .5em no-repeat; padding: 0 0 0 12px; border: 0; }
#content #glossary ul li:nth-child(even) { width: 90%; display: inline-table; margin: 0 10px .5em 0; background: transparent url("../img/bullet-tiny.png") 0 .5em no-repeat; padding: 0 0 0 12px; border: 0; }

#other-sections:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#other-sections header { margin: 0 0 1em; }
#other-sections header h3 { margin: 0 0 .15em; font-size: 1em; }
#other-sections header p { margin: 0 0 .15em; font: bold italic .786em/1.1 Georgia, Times, "Times New Roman", serif; color: #666; }
#other-sections .boxed { padding: 0 0 0 1px; }
#other-sections .section { width: 27%; font-size: .786em; border-left: 1px solid #d8d4ca; border-right: 1px solid #d8d4ca; padding: 18px 2.9%; float: left; margin-left: -1px; }
#other-sections .section:first-child { border-left: 0; }
#other-sections .section:last-child { border-right: 0; }

.section h4 a { display: block; padding: 8px 18px 8px 60px; min-height: 30px; margin: -18px -18px 1em; background: transparent url("../img/icons-sections.png") no-repeat; font: 200 2em/1.4 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.section h4 a.web { background-position: 0 -100px; }
.section h4 a.mobile { background-position: 0 -300px; }
.section h4 a.addons { background-position: 0 -500px; }
.section h4 a.apps, .section h4 a.mozilla { background-position: 0 -700px; }

#other-sections .section ul { border-bottom: 1px dotted #d8d4ca; }
#other-sections .section ul li { margin-bottom: 1em; background: transparent url("../img/bullet-tiny.png") 0 .5em no-repeat; padding: 0 0 0 12px; }
#other-sections .section ul a { font-weight: bold; }
#other-sections .section .lead { padding: 15px 20px; margin: 0; background: #ebebe4; color: #391f01; font: italic 1em Georgia, Times, "Times New Roman", serif; }

#content-latest { clear: both; }
#latest-forums { width: 410px; float: left; }
#latest-comments { width: 410px; float: right; }

#content-latest h3 { padding: .5em 18px; margin: -18px -18px 18px; background: #2f2f2f url("../img/bg-headings.png") 90% -400px no-repeat; font: 200 1.571em/1.2 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
#content-latest header p { font: italic .857em Georgia, Times, "Times New Roman", serif; }
#content-latest .hfeed { margin-bottom: 0; }
#content-latest .hentry { position: relative; padding: 0 0 18px 55px; min-height: 38px; margin: 0 0 18px; font-size: .786em; border-bottom: 1px dotted #d8d4ca; }
#content-latest .hentry:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
#content-latest .photo { position: absolute; left: 0; top: 0; }
#content-latest .hentry a { font-weight: bold; }
#content-latest .category { font: 9px Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; }

/* @Section @Landing pages *********/
/*** @Popular docs, @Recent news, @Favorite articles *********/
.articles-list .hfeed { margin: 0; }
#content-main .articles-list .hfeed li.hentry { padding: 0 1px 1em; margin: 0 0 1em; background: none; border-bottom: 1px dotted #2f2f2f; }
#content-main .articles-list .hfeed li.hentry:last-child { border: 0; margin: 0; }
.articles-list .entry-title { font-size: 1.142em; margin-bottom: .25em; }
.articles-list .entry-summary { font-size: .857em; margin-bottom: 0; }
.articles-list .entry-meta { margin: 1.3em 0 0; font-size: .786em; }
.articles-list .entry-meta a { font-weight: bold; }
.articles-list .all { padding: 1em 1px; font-size: .786em; text-transform: uppercase; font-style: italic; font-weight: bold; border-bottom: 1px solid #999; border-top: 1px solid #999; }

/*** @Favorite tools *********/
#fave-tools .tools { margin: 1em 0; padding: 18px 0 18px 18px; background: #f5f5f1; }
#fave-tools .tools li { padding: 0 0 0 80px; width: 200px; float: left; margin: 0 18px 1em 0; position: relative; background: none; }
#fave-tools .tools li:nth-child(odd) { clear: left; }
#fave-tools .tools h4 { margin: 0 0 .25em; }
#fave-tools .tools h4 img { position: absolute; left: 0; top: 0; }
#fave-tools .desc { font-size: .857em; }
#fave-tools .meta { font-size: .786em; font-weight: bold; }
#fave-tools .tools li.all { width: auto; float: none; clear: both; padding: .5em 18px; background: #ebebe4; font-size: .786em; text-transform: uppercase; font-style: italic; font-weight: bold; }

/*** @Videos *********/
#videos .hfeed { overflow: hidden; }
#videos .hfeed .hentry { float: left; width: 270px; font-size: .857em; position: relative; padding: 165px 20px 0; background: transparent none; }
#videos .hentry h3 { color: #fff; height: 150px; font-size: 1.2em; position: absolute; top: 3px; left: 20px; }
#videos .hentry h3 span { position: absolute; bottom: 0; left: 0; display: block; width: 250px; padding: 4px 10px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.75); background: #000; background: rgba(0,0,0,.4); }
#videos .hentry h3 img { border: 3px solid #ccc; margin: -3px 0 0 -3px; }
#videos .hentry h3 a:hover, #videos .hentry h3 a:focus, #videos .hentry h3 a:active { text-decoration: none; }
#videos .hentry h3 a:hover img, #videos .hentry h3 a:focus img, #videos .hentry h3 a:active img { border-color: inherit; }

/* @Search @Results *********/
#google-branding { font-size: .786em; float: right; margin-top: -3.75em; opacity: .3; }
#google-branding .gsc-branding-text { vertical-align: top; padding-right: 2px; }

#search-results .gs-result { margin: 0 0 1.2em; padding: 0 2px 1.2em; border-bottom: 1px dotted #d8d4ca; }
#search-results .gs-title { font-size: 1em; font-weight: bold; margin: 0 0 .25em; }
#search-results .gs-snippet { font-size: .857em; margin: 0 0 .25em; }
#search-results .gs-visibleUrl { font-size: .786em; display: inline; margin-right: 10px; color: #aaa; }
#search-results .gs-visibleUrl-short { font-weight: bold; }
#search-results div.gs-watermark { display: none; }

#search-results .gsc-thumbnail-inside,
#search-results .gsc-url-top { display: none; }

/*** @Apps landing page *********/
#apps #content > .wrap { background: url("../img/bg-starburst-five.png") 100% 1px no-repeat; }
#apps .page-title { margin: 0 0 0 -10px; padding: 10px 0 10px 20px; font: 200 72px/.9 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); 
  background: -moz-linear-gradient(left, #e44d26 0%, #e44d26 25%, rgba(228,77,38,0) 60%, rgba(228,77,38,0) 100%);
  background: -webkit-linear-gradient(left, #e44d26 0%, #e44d26 25%, rgba(228,77,38,0) 60%, rgba(228,77,38,0) 100%);
  background: -o-linear-gradient(left, #e44d26 0%, #e44d26 25%, rgba(228,77,38,0) 60%, rgba(228,77,38,0) 100%);
  background: linear-gradient(left, #e44d26 0%, #e44d26 25%, rgba(228,77,38,0) 60%, rgba(228,77,38,0) 100%);
  color: #000; /* Old browsers don't support rgba or gradients, so will fall back to black and no background (white is hard to read and a solid background covers the artwork) */
  color: rgba(255,255,255,1); 
}
#apps .intro { font: bold italic 16px Georgia, Times, "Times New Roman", serif; 
  background: -moz-linear-gradient(left, #fff 0%, #fff 25%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, #fff 0%, #fff 25%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, #fff 0%, #fff 25%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  background: linear-gradient(left, #fff 0%, #fff 25%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  padding: .75em 20px;
  margin: 3px -10px 1em;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.15);
}

#apps .modules:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#apps .modules .boxed { font-size: .857em; word-wrap: break-word; position: relative; padding-bottom: 3.75em; float: left; width: 254px; margin: 0 30px 2em 0; }
#apps .modules h2 { color: #000; border-bottom: 3px solid #e44d26; font: 200 22px/1.1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
#apps .modules .more { position: absolute; bottom: 20px; margin: 0; font: bold italic 1.12em Georgia, Times, "Times New Roman", serif; }
#apps #newsletter { margin-right: 0; }
#apps .boxed .head { border-color: #e44d26; }

#newsletter-sub.modal { width: 260px; margin: 0; border: 0; }
#wait-modal, #error-modal { display: none; }

/* @Learning pages *********/
.section-learning #content { border: 0; }
.section-learning #page-head { margin: 0; padding: 40px 0 10px; text-align: center; border-top: 1px solid #a33500; clear: both; }
.section-learning #page-head .crumb { font-size: .857em; text-align: left; margin-top: -1.75em; }
.section-learning #page-head .crumb a:before { content: "\00AB\00A0"; }
.section-learning #page-head p { text-align: justify; font-size: .857em; width: 700px; margin: 0 auto 1em; color: #666; }
.section-learning #page-head p.intro {  font-size: 16px; }
.section-learning #page-head.landing p { text-align: center; font-size: 20px; }
.section-learning #page-head p strong { color: #333; }
.section-learning #page-head .page-title { margin: 0 0 .1em; color: #ab181a; font: 200 72px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(170, 160, 130, 0.5); }

#blackboard { width: 940px; padding: 60px 0 0; margin: -20px auto 20px; background: #242424 url("../img/boardframe-top.jpg") center top no-repeat; box-shadow: 0 2px 3px rgba(0,0,0,.25); }
#blackboard ul { margin: 0; padding: 0 60px 50px 0; overflow: auto; background: url("../img/boardframe-btm.png") center bottom no-repeat; }
#blackboard ul li { background: none; width: 22%; padding: 0; margin: 0 0 0 10%; float: left; font-size: .857em; text-shadow: 0 0 1px #000; }
#blackboard a { color: #999; display: block; text-decoration: none; }
#blackboard a:hover, #blackboard a:focus, #blackboard a:active { color: #a3a3a3; text-decoration: none; }
#blackboard strong { color: #ccc; }
#blackboard h2 { height: 80px; width: 100%; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; background-position: 50% 0; }
#blackboard a:hover h2 { background-position: 50% -80px; }
#sub-html h2 { background-image: url("../img/chalk-html.png"); }
#sub-css h2 { background-image: url("../img/chalk-css.png"); }
#sub-js h2 { background-image: url("../img/chalk-js.png"); }

#learn-p2pu { clear: both; position: relative; margin: 40px 0; padding: 20px 20px 5px 120px; min-height: 80px; background: #deded4; background: rgba(209, 209, 193, .5); }
#learn-p2pu h2 { font-size: 1em; line-height: 1.22; }
#learn-p2pu p { font-size: .857em; color: #666; }
#learn-p2pu strong { color: #333; }
#learn-p2pu a { font-weight: bold; }
#learn-p2pu a span { content: ""; position: absolute; left: 20px; top: 20px; width: 83px; height: 80px; background: url("../img/p2pu.png") no-repeat 0 0; }

#learn-fineprint { clear: both; margin: 20px 20px 40px; font-size: .786em; }

.learn-module h2 { font: 200 36px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; color: #a36100; padding: 12px 18px 0 68px; margin: -18px -18px 15px; min-height: 56px; background: url("../img/icons-learnlevels.png") no-repeat; }
#intro-level { width: 415px; float: left; clear: left; }
#intro-level h2 { background-position: 0 0; }
#inter-level, #learn-html #adv-level { width: 415px; float: right; clear: right; }
#inter-level h2 { background-position: 0 -150px; }
#adv-level, #examples { width: auto; float: none; clear: both; }
#adv-level h2 { background-position: 0 -300px; }
#examples h2 { background-position: 0 -450px; }

.link-list { font-size: .857em; margin: 0 0 -1em; }
#content .link-list li { position: relative; border-bottom: 1px dotted #ccc; padding: 1em 0; background: none; }
#content .link-list li:first-child { padding-top: 0; }
#content .link-list li:last-child { border: 0; }
.link-list .title { margin: 0 0 .15em; }
.link-list .title a:after { content: ''; position: absolute; left: 0; right: 0; top: .5em; bottom: .5em; }
.link-list .source { margin: 0 0 .15em; font-size: .857em; font-weight: normal; color: #999; }
.link-list p { margin: 0; }
.link-list.col1 { width: 46.5%; float: left; }
.link-list.col2 { width: 46.5%; float: right; }

.link-list .tag { display: inline-block; text-indent: -999em; position: relative; width: 14px; height: 14px; margin-left: 2px; line-height: 14px; vertical-align: baseline; cursor: help; }
.link-list .tag:after { content: ''; position: absolute; left: 0; top: -1px; width: 14px; height: 17px; background: url("../img/icons-tags.png") 0 0 no-repeat; }
.link-list .tag.html5:after { background-position: 0 0; }
.link-list .tag.css3:after { background-position: 0 -50px; }

.tag-popup { display: block; position: relative; left: 200px; top: -100px; width: 0; height: 0; }
.tag-popup .bubble { position: absolute; visibility: hidden; left: -170px; bottom: 8px; width: 340px; opacity: 0;
-moz-transition: bottom .4s ease-out;
-moz-transition-property: bottom, opacity, visibility;
-webkit-transition: bottom .4s ease;
-webkit-transition-property: bottom, opacity, visibility;
transition: bottom .4s ease-out;
transition-property: bottom, opacity, visibility;
}
.tag-popup.visible .bubble { visibility: visible; bottom: 12px; opacity: 1; }
.tag-popup p { margin: 0; padding: 10px; border-radius: 5px; background: #000; background: rgba(0,0,0,.85); color: #ccc; font-size: .785em; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.15); text-shadow: 0 0 1px #000; }
.tag-popup strong { color: #fff; }
.tag-popup span { display: block; width: 0; height: 0; margin: 0 auto; border-top: 10px solid rgba(0,0,0,.85); border-left: 10px solid transparent; border-right: 10px solid transparent; }

#flag-confirm label { display: block; }
#flag-confirm textarea { display: block; width: 96%; height: 8em; }
#flag-confirm .submit { margin: 1em 0 0; }
#flag-confirm .submit button { font-size: 1.142em; }

/* @Submission @Form *********/
.submission .section { position: relative; padding: 2.75em 0 0; margin: 0 0 1.286em; font-size: .928em; }
.submission .section > legend { margin: 0 -18px; padding: 0; }
.submission .section > legend b { display: block; width: 632px; position: absolute; margin: 0; font-size: 1.234em; }
.submission .section.notitle { padding-top: 0; }

.submission li { margin: 0 0 .75em; }
.submission input[type="url"], .submission input[type="email"], .submission input[type="text"] { width: 450px; }
.submission input[readonly] { background: transparent; border: 0; }
.submission textarea { width: 610px; }
.submission label input { width: auto; padding: 0; }
.submission .note { font-style: normal; font-weight: normal; font-size: .857em; font-family: inherit; color: #666; }
.submission p.note { margin: .5em 0; }
.submission .inline legend b { display: block; margin: 0 0 .5em; }
.submission .inline li { margin: 0 0 .25em; }
.submission .inline label { display: inline; font-weight: normal; margin: 0; }
.submission .disabled { color: #999; color: rgba(0,0,0,.4); }
.submission .other-value { margin-top: .25em; }
.submission .other-value label { display: block; }

.submission label, .submission .label { display: block; font-weight: bold; margin: 0 0 .5em; }
.submission .check label, .submission .check .label { display: inline; }

.submission .fm-submit button { font-size: 1.575em; }

.submission .error input { border-color: #900; }
.errorlist { color: #900; font-weight: bold; }
.errorlist li { margin: 0 0 .25em; }

/* @Profile *********/
#profile-head { position: relative; margin: 0 0 30px; padding: 20px; border: 1px solid #cbc8b9; background: rgba(198,198,175,.25); overflow: hidden; }
#profile-head .main { width: 740px; float: right; }
#profile-head .extra { width: 130px; float: left; }
#profile-head .photo { margin: 0 0 1em; background: #fff; padding: 5px; -moz-box-shadow: 3px 3px 0 rgba(0,0,0,.1); -webkit-box-shadow: 3px 3px 0 rgba(0,0,0,.1); box-shadow: 3px 3px 0 rgba(0,0,0,.1); }
#profile-head .page-title, #profile-edit .page-title { margin: 0 0 .25em; padding-right: 160px; }
#profile-head b { font-size: .77em; font-weight: normal; color: #a19f93; }
#profile-head .info li { display: inline; margin-right: 10px; }
#profile-head .info li:before { content: "/"; margin-right: 10px; color: #a19f93; }
#profile-head .info li:first-child:before { content: ""; margin: 0; }
#profile-head .bio, #profile-head .links { font-size: .857em; }
#profile-head .tags h2 { font-size: 1em; margin-bottom: .25em; }
#profile-head .tags li { font-size: .857em; display: inline; margin: 0 10px .5em 0; }
#profile-head .links li { margin: 0 0 .5em; }
#profile-head .links a { padding: 1px 0 1px 24px; background: url("../img/icons-links.png") no-repeat; }
#profile-head .edit { width: 140px; position: absolute; right: 20px; top: 25px; text-align: right; margin: 0; }

#profile-head .twitter a, #elsewhere .twitter label { background-position: 0 -50px; }
#profile-head .github a, #elsewhere .github label { background-position: 0 -100px; }
#profile-head .stackoverflow a, #elsewhere .stackoverflow label { background-position: 0 -150px; }
#profile-head .linkedin a, #elsewhere .linkedin label { background-position: 0 -200px; }
#profile-head .dribbble a, #elsewhere .dribbble label { background-position: 0 -250px; }
#profile-head .reddit a, #elsewhere .reddit label { background-position: 0 -300px; }
#profile-head .docs a { background-position: 0 -400px; }

.profile-section { clear: both; margin: 0 0 30px; }

#docs-activity header { margin: 0 0 1.5em; }
#docs-activity header h2 { display: inline; margin-right: 20px; }
#docs-activity header p { display: inline; }
table.activity { font-size: .857em; width: 100%; }
table.activity thead, table.activity tfoot { background: #e4e4d9; background: rgba(198,198,175,.30); }
table.activity thead th { font-weight: bold; }
table.activity th.date { width: 120px; }
table.activity th.page { width: 40%; }
table.activity td, table.activity th { padding: .5em 3px; vertical-align: top; }
table.activity tr:nth-child(even) { background: #e4e4d9; background: rgba(198,198,175,.2); }
table.activity tbody tr:hover { background: #ebebd9; background: rgba(255,255,255,.5); }
table.activity th h3 { margin: 0 0 .25em; }
table.activity .actions { font-size: .857em; margin: 0; }
table.activity .actions li { display: inline; margin: 0 10px .5em 0; }
table.activity tfoot td { text-align: right; padding: .5em 20px; }
table.activity tfoot .feed { padding-left: 20px; background: url("../img/icons-links.png") 0 -349px no-repeat; }

/* @Edit @Profile *********/
#profile-edit { padding-left: 165px; position: relative; }
#profile-edit .extra { width: 130px; position: absolute; left: 0; top: 0; font-size: .857em; }
#profile-edit .avatar { background: #fff; padding: 5px; -moz-box-shadow: 3px 3px 0 rgba(0,0,0,.1); -webkit-box-shadow: 3px 3px 0 rgba(0,0,0,.1); box-shadow: 3px 3px 0 rgba(0,0,0,.1); }
#profile-edit .extra figcaption { margin: .5em 0 1.5em; }
#profile-edit .extra li { margin: 0 0 .5em; }
#profile-edit .extra .delete { margin: 1.5em 0; }
#profile-edit .delete a:hover, #profile-edit .delete a:focus, #profile-edit .delete a:active { color: #900; }
#profile-edit .taglist { width: 640px; }

#profile-edit ul.tagit { width: 610px; background: #fff; border: 1px solid #cbc8b9; padding: 6px 8px; }
ul.tagit li.tagit-new { display: inline-block; }
ul.tagit li.tagit-new input { width: auto; border: 0; padding: 0; background: transparent; }
li.tagit-choice { display: inline-block; margin: 0 10px 10px 0; border: 1px solid #dbd9d1; padding: 3px 4px 4px 10px; background: #f9f9f9; border-radius: 2px; }
li.tagit-choice .close { margin-left: 4px; }
li.tagit-choice .close .text-icon { display: none; }
li.tagit-choice .close .ui-icon-close { display: inline-block; margin-left: 3px; text-indent: -999em; overflow: hidden; width: 15px; height: 15px; cursor: pointer; margin: 0 0 -3px 0; background: url("../img/icn-delete.png") center -96px no-repeat; }
li.tagit-choice .close:hover .ui-icon-close, .tagit-choice .close:focus .ui-icon-close, .tagit-choice .close:active .ui-icon-close { background-position: center -146px; }

.ui-autocomplete { position: absolute; cursor: default; padding-top: 2px; background: #fff; border: 1px solid #e3e3e3; border-top: 0; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.08); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.08); box-shadow: 1px 1px 1px rgba(0,0,0,.08); }
.ui-menu { list-style: none; padding: 0; margin: 0; float: left; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; font-size: .928em; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; line-height: 1.5; zoom: 1; }
.ui-menu .ui-state-hover, .ui-menu .ui-state-focus, .ui-menu .ui-state-highlight, .ui-menu .ui-state-active { background: #e4e4d9; background: rgba(198,198,175,.2); }

li.tag-expert { display: inline-block; margin: 0 10px 10px 0; }
li.tag-expert label { font-weight: normal; margin: 0; border: 1px solid #dbd9d1; padding: 3px 8px 3px 4px; background: #f9f9f9; border-radius: 2px; }
li.tag-expert label:hover { border-color: #bbb; }

#elsewhere label { display: inline-block; width: 120px; padding-left: 25px; background: url("../img/icons-links.png") 0 0 no-repeat; }
#elsewhere .url { width: 300px; }
#elsewhere .remove { width: 15px; height: 15px; padding: 0; margin-left: 8px; text-indent: -999em; overflow: hidden; background: transparent url("../img/icn-delete.png") center 2px no-repeat; box-shadow: none; }
#elsewhere .remove:hover { background-position: center -48px; }
#elsewhere .errorlist { margin-left: 150px; width: 500px; }

/* @Error pages *********/
.beast { float: right; margin: 20px 0 20px 20px; }

/* @Discussion @Forum-Archive page *********/
#forum_archive_iframe { width: 940px; padding: 0; margin: 0; border: 0; height: 400px;}

/* @Subscription @Form *********/
#content-sub .fm-subscribe { background: #cdc9bb; border-bottom-color: #afa894; }
#content-sub .fm-subscribe .mod-title { color: #f8d575; }
.fm-subscribe li { margin-bottom: 1em; font-size: .857em; }
.fm-subscribe label, .fm-subscribe .label { display: block; margin: 0 0 .25em; font: 200 1.25em/1.2 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.fm-subscribe input { border: 1px solid #bfbbad; background: #fff; padding: 4px 8px; width: 182px; font-size: .857em; }
.fm-subscribe input:hover, .fm-subscribe input:focus { border-color: #8d846f; }
.fm-subscribe .fm-submit { text-align: right; font-size: 1.143em; }
.fm-subscribe .inline label, .fm-subscribe .inline .label { width: auto; display: inline; font-family: inherit; font-size: 1em; text-transform: none; }
.fm-subscribe .inline input, .fm-subscribe .agree input { width: auto; border: 0; padding: 0; }
.fm-subscribe .agree label { width: auto; display: inline; font-family: inherit; font-size: 1em; text-transform: none; }

/* @HTML5 page *********/
#learn-html5 #content { background: url("../img/bg-starburst.png") center top no-repeat; }
#learn-html5 #content-main { float: right; margin-right: -5px; }
#learn-html5 #content-sub { float: left; padding-left: 10px; }

#learn-html5 #topics { position: relative; min-height: 24em; padding: 30px 0 0 265px; margin: 0 0 1em; }
#learn-html5 .page-title { margin: 10px 10px -10px; font: 200 65px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(170, 160, 130, 0.5); }

#topic-content { margin: 0 0 2em -50px; padding-left: 50px; border-top: 6px solid #e44d26; }
#topic-content h2 { margin: 0 0 .25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; }

#topics .block { padding: 20px 10px 0; position: relative; }
.hasJS #topics .block:after { content: "\00a0"; display: block; position: absolute; top: -18px; width: 0; height: 0; border-width: 0 13px 13px 13px; border-style: solid; border-color: #e44d26 transparent; }
#topics .block-hidden { display: none; }

#topics #topic-html5.block:after { border: 0; }
#topics #topic-css3.block:after { left: 15px; }
#topics #topic-semantics.block:after { left: 100px; }
#topics #topic-connectivity.block:after { left: 185px; }
#topics #topic-offline.block:after { left: 255px; }
#topics #topic-multimedia.block:after { left: 340px; }
#topics #topic-performance.block:after { left: 420px; }
#topics #topic-graphics.block:after { left: 500px; }
#topics #topic-devices.block:after { left: 580px; }
#topics #topic-more.block:after { left: 618px; }

#topic-tabs { margin: 0 0 15px; }
#topic-tabs:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#topic-tabs li { float: left; position: relative; z-index: 10; width: 65px; margin-right: 15px; }
#topic-tabs a { display: block; width: 65px; height: 72px; text-indent: -999em; overflow: hidden; background-image: url("../img/html5-icons.png"); background-repeat: no-repeat; -moz-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; transition: opacity .2s ease-out; }
#topic-tabs a:hover, #topic-tabs a:focus { opacity: .8; -moz-transition: opacity .2s ease-in; -webkit-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; transition: opacity .2s ease-in; }
#topic-tabs #tab-html5 { position: absolute; left: 0; top: 30px; width: 260px; height: 285px; }
#tab-html5 a { width: 260px; height: 285px; background: url("../img/html5-logo-big.png") center top no-repeat; }
#topic-tabs #tab-html5 a:hover, #topic-tabs #tab-html5 a:focus { opacity: 1; }
#tab-css3 a { background-position: 0 0; }
#tab-css3.current a { background-position: 0 -100px; }
#tab-semantics a { background-position: -100px 0; }
#tab-semantics.current a { background-position: -100px -100px; }
#tab-connectivity a { background-position: -200px 0; }
#tab-connectivity.current a { background-position: -200px -100px; }
#tab-offline a { background-position: -300px 0; }
#tab-offline.current a { background-position: -300px -100px; }
#tab-multimedia a { background-position: -400px 0; }
#tab-multimedia.current a { background-position: -400px -100px; }
#tab-performance a { background-position: -500px 0; }
#tab-performance.current a { background-position: -500px -100px; }
#tab-graphics a { background-position: -600px 0; }
#tab-graphics.current a { background-position: -600px -100px; }
#tab-devices a { background-position: -700px 0; }
#tab-devices.current a { background-position: -700px -100px; }
#tab-more a { background-position: -800px 0; }
#tab-more.current a { background-position: -800px -100px; }

#topic-tabs .label { position: absolute; display: none; padding: .5em 8px; width: 100px; left: 50%; top: 68px; margin-left: -60px; text-indent: 0; text-align: center; font-size: .857em;
  background: #fff; 
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 30%, rgba(255,255,255,.8) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 30%, rgba(255,255,255,.8) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 30%, rgba(255,255,255,.8) 100%);
  border: 1px solid rgba(170, 160, 130, 0.25);
  border-radius: 4px;
  box-shadow: 0 3px 3px rgba(170, 160, 130, 0.5);
}
#topic-tabs #tab-html5 .label { top: 265px; }

#learn-html5 .boxed .head { border-color: #e44d26; }
#learn-html5 .gallery { margin: 0; }
#learn-html5 .gallery .demo { width: 200px; padding: 185px 0 1px; margin: 0 0 14px 14px; }
#learn-html5 .gallery .demo.row-first { margin-left: 0; }
#learn-html5 .demo-title img { width: 180px; max-height: 135px; padding: 9px; border: 1px solid #ccc; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#learn-html5 .demo-title a:hover img, #learn-html5 .demo-title a:focus img, #learn-html5 .demo-title a:active img { -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
#learn-html5 .demo .flag, #learn-html5 #content .demohover .flag { display: none; }
#learn-html5.hasJS .gallery .demo { padding-top: 153px; }
#learn-html5.hasJS .gallery .byline { display: none; }
#learn-html5.hasJS .gallery .demo-title { text-indent: -999em; height: 0; margin: 0; }

#learn-html5 #content .demohover { display: none; position: absolute; z-index: 99; margin: -6px -6px 0; border: 1px solid #ddd; -moz-border-radius: 9px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#learn-html5 #content .demohover .in { position: relative; width: 180px; padding: 165px 15px 9px; background: #fff; background: rgba(255,255,255,.95); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
#learn-html5 #content .demohover .demo-title { font-size: 1.285em; }
#learn-html5 #content .demohover .demo-title img { width: 180px; border: 0; max-height: 180px; position: absolute; top: 5px; left: 5px; padding: 10px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#learn-html5 #content .demohover .extra { display: block; }
#learn-html5 #content .demohover .launch { top: 115px; right: 25px; }

#learn-html5 .more { margin-top: .5em; text-align: right; }
#learn-html5 #mdn-docs .mod-title { background-position: 96% -100px; }

/* @Utility Classes *********/
.hidden { display: none; }


/* RTL Classes *********/

/* need to shift around the header */
.html-rtl #nav { float: right; margin: 0 70px 6px 0; font: 200 18px/1 "Bebas Neue", "League Gothic", "Arial Narrow", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.html-rtl #branding { position: absolute; right: 10px; top: 10px; width: 50%; padding: 2px 70px 0 0; margin: 0 0 10px; }
.html-rtl #logo img { position: absolute; right: -3px; top: -4px; }
.html-rtl #masthead .user-state { left: 150px; right: auto; }
.html-rtl .user-state li + li { padding-right: 10px; margin-right: 8px; margin-left:0; padding-left:0; border-right: 1px solid #666; border-left: 0; }
.html-rtl #masthead #tabzilla { position: absolute; left: 0; top: 0; right: auto; }

.html-rtl .reportBug { left: 20px; right: auto; }

.html-rtl #welcome-close { right: auto; left: 15px; }
.html-rtl #welcome-open { right: auto; left: 10px; }
