/* Main CSS */

#primer { background-color: #e6eef3; background-image: url(/img/bg.png); background-repeat: repeat-x; padding-bottom: 40px; }

#header { width: 980px; margin: 0px auto 8px auto; padding-top: 14px; height: 80px; }
#header .logo { float: left; }
#header .logo img { margin-top: -2px; }
#header .extra { float: right; }
#header .extra .links { margin-bottom: 16px; margin-top: 4px; }
#header .extra .links a { text-shadow: 0px 1px 0px #ffffff; background-color: #f2f3f4; border: 2px solid #f2f3f4; padding: 5px 12px 5px 12px; margin-left: 4px; color: #959595; text-decoration: none; font-size: 11px; }
#header .extra .links a:hover { background-color: #f2f3f4; border-bottom: 2px solid #abda3c; color: #86898a; }
#header .extra .search { width: 404px; }
#header .extra .search input[type=text] { float: left; text-align: center; height: 21px; margin-top: 0px; border: 1px solid #e9eaeb; font-size: 13px; width: 300px; }
#header .extra .search input[type=text]:focus { -moz-box-shadow: 0px 0px 4px #e4e5e6; -webkit-box-shadow: 0px 0px 4px #e4e5e6; box-shadow: 0px 0px 4px #e4e5e6; }
#header .extra .search input[type=submit] { width: 80px; padding-left: 0px; padding-right: 0px; float: right; text-align: center; margin-right: 0px; background-image: none; border: 0px; color: #959595; background-color: #f2f3f4; text-shadow: 0px 1px 0px #ffffff; background-image: none; background-image: -moz-linear-gradient(0% 100% 90deg,#eaebec, #f2f3f4); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2f3f4), to(#eaebec)); background-position: 0px 0px; }
#header .extra .search input[type=submit]:hover { float: right; margin-right: 0px; background-image: none; padding-left: 14px; border: 0px; color: #ffffff; background-color: #87cc18; text-shadow: 0px 1px 0px #7cbd14; background-image: none; background-image: -moz-linear-gradient(0% 100% 90deg,#87cc18, #b6df48); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b6df48), to(#87cc18)); background-position: 0px 0px; }
#header .extra .links span.highlight { color: #97c922; letter-spacing: 0.1em; font-weight: normal; margin-left: 2px; text-transform: uppercase; }

#nav { width: 982px; background-color: #59b6ea; height: 40px; border-bottom: 4px solid #e6eef3; font-family: Segoe UI, lucida grande, arial; }
#nav .links { margin: 0px auto 0px 4px;  }
#nav .link { text-shadow: 0px 1px 0px #2d84b5; float: left; color: #ffffff; background-color: #39a3df; height: 17px; text-decoration: none; margin: 4px 4px 0px 0px; padding: 7px 12px 6px 12px; border: 1px solid #71c6f6; font-size: 15px; line-height: 16px; display: block; } 
#nav .link:hover { background-color: #2297d9; color: #ffffff; border: 1px solid #92d4f9; }
#nav ul.nav-top { float: left; margin: 0px; padding: 0px; }
#nav ul.nav-top li { list-style: none; margin: 0px; padding: 0px; float: left; position: relative; }
#nav ul.nav-top li ul.dropdown { float: left; list-style: none; position: absolute; margin: 0px; padding: 0px; display: none; top: 36px; }
#nav ul.nav-top li ul.dropdown li {  }
#nav ul.nav-top li .link:link, #nav .links .nav-top li .link:visited, #nav .links .nav-top li .link:active { font-weight:normal; }
#nav .menu { background-color: #ffffff; padding: 12px 30px 20px 30px; line-height: 22px; border: 4px solid #59b6ea; }
#nav .menu a.join { color: #d34b8b; font-weight: bold; }
#nav .menu a.join:hover { color: #333333; }
#nav .social { float: right; padding: 8px 10px; }
#nav .social img { margin-left: 4px; }

#binder { width: 980px; background-color: #ffffff; margin: 6px auto 0px auto; min-height: 400px; padding: 6px 0px 20px 0px; border: 1px solid #e6eef3; border-top: 0px solid #ffffff; }
#binderwide { width: 100%; background-color: #ffffff; margin: 6px auto 0px auto; min-height: 400px; padding: 6px 0px 20px 0px; border: 1px solid #e6eef3; border-top: 0px solid #ffffff; }

#subnav { height: 38px; color: #5e8a08; text-align: left; font-weight: normal; margin-top: -4px; }
#subnav .left { float: left; width: 10px; border-top: 1px solid #e6eef3; }
#subnav .right { float: right; width: 10px; border-top: 1px solid #e6eef3; }
#subnav .links { float: left; height: 26px; width: 948px; padding-left: 10px; padding-top: 2px; font-size: 14px; border: 1px solid #e6eef3; border-top: 0px; background-color: #fefff9; }
#subnav .links a { margin-right: 12px; color: #47a1d4; text-decoration: none; }
#subnav .links a:hover { color: #222222; text-decoration: underline; }
#subnav strong { color: #90908e; margin-right: 4px; }
#subnav span { color: #cbd0af; margin-right: 4px; }

#breadcrumb { color: #a4a697; margin: 0px auto 10px auto; width: 958px; border-bottom: 1px dotted #dadbd3; height: 25px; padding: 1px 0px 0px 0px; font-size: 12px; }
#breadcrumb a { font-weight: normal; }
#breadcrumb .trail { float: left; }
#breadcrumb .trail a:hover { color: #444444; }
#breadcrumb .route { float: right; color: #b5b7a6; letter-spacing: 0.04em; }
#breadcrumb .trail span.arrow { color: #cbd0af; margin-right: 2px; font-weight: normal; }
#breadcrumb .trail span.location { color: #90908e; }
#breadcrumb .trail span.arrow { font-size: 11px; }

#content { float: left; width: 980px; }

#twitter { background-color: #e6eef3; padding: 0px 0px 10px 0px; margin-top: -30px; }
#twitter .latest { width: 980px; margin: 0px auto 0px auto; }
#twitter div.bird { margin-top: 0px; float: left; position: absolute; }
#twitter .buffer { padding: 20px 0px 16px 0px; background-image: url(/img/twitter-bubble.png); background-repeat: no-repeat; background-position: 100px 30px; }
#twitter .tweet { background-color: #ffffff; color: #8c9eaa; font-size: 14px; margin: 0px 0px 0px 124px; padding: 14px 20px 14px 20px; }

#footer { border-top: 6px solid #abda3c; background-color: #ffffff; }
#footer .container { width: 980px; margin: 0px auto 0px auto; }
#footer .question { background-color: #f5f5f5; padding: 20px 20px 20px 20px; }
#footer .question a { color: #59b6ea; font-weight: bold; text-decoration: none; }
#footer .question a:hover { color: #000000; font-weight: bold; text-decoration: underline; }
#footer .learn { background-color: #f5f5f5; padding: 20px 20px 20px 20px; }
#footer .learn a { display: block; color: #515354; border-bottom: 1px solid #e8ebec; height: 28px; line-height: 28px; text-decoration: none; }
#footer .learn a:hover { text-decoration: underline; color: #000000; }
#footer .about { background-color: #f5f5f5; padding: 20px 20px 20px 20px; }
#footer .col { float: left; width: 320px; margin: -6px 40px 0px 0px; border-top: 6px solid #bbe84f; }
#footer .col h3 { font-weight: normal; color: #59b6ea; font-size: 20px; line-height: 20px; margin-bottom: 16px; }
#footer .col h3 span { color: #333333; }
#footer .nav { padding-top: 40px; line-height: 34px; font-size: 12px; }
#footer .nav a { color: #8a9195; text-decoration: none; margin: 0px 10px 0px 10px; }
#footer .nav a:hover { color: #555555; text-decoration: underline; }
#footer .nav div { height: 34px; }
#footer .credit { color: #c4c8ca; padding: 20px 0px 40px 0px; font-size: 12px; line-height: 18px; }

/* Helpers */

.round { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.round-top { -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; }
.round-bottom { -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px;-webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; }
.round-right { -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px;-webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; }
.round-left { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px;-webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; }
.round-top-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.round-top-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.round-bottom-right { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.round-bottom-left { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }

.pages { height: 30px; margin: 40px auto 0px auto; font-size: 13px; text-align: left; }
.pages .on  { padding: 6px 12px 6px 12px; background-color: #59b6ea; border: 1px solid #59b6ea; color: #ffffff; margin-right: 4px; cursor: pointer; }
.pages .on  { text-decoration: none; }
.pages .off { padding: 6px 12px 6px 12px; background-color: #ffffff; border: 1px solid #b3ddf5; color: #59b6ea; margin-right: 4px; cursor: pointer; }
.pages .off:hover { border: 1px solid #e6d649; background-color: #f7f2c2; color: #d3ad15; cursor: pointer; text-decoration: none; }

.split-left { float: left; }
.split-right { float: right; }
.foot { clear: both; font-size: 1px; line-height: 0px; height: 0px; }
.break { margin-bottom: 10px; }
.line { height: 0px; font-size: 0px; line-height: 0px; border-top: 1px solid #dee2e3; margin: 10px 0px 10px 0px; }

.ribbon-fold-left { height: 4px; margin: 0px 0px 0px -8px; }
.ribbon-fold-right { height: 4px; margin: 0px -8px 0px 0px; }

.ribbon { 
  height: 25px; padding: 8px 10px 0px 10px; margin: 0px 0px 0px -8px; 
  background-image: url(/img/ribbon-bg.png); background-repeat: repeat-y; 
  font-family: 'Droid Sans'; text-align: right; font-size: 18px; letter-spacing: 0.02em; }
.ribbon.right { margin: 0px 0px 0px 0px; background-image: url(/img/ribbon-bg-right.png); background-position: right; text-align: left; }
.ribbon.green { text-shadow: -1px 1px 0px #8cb52d; color: #ffffff; background-color: #87cc18; }
.ribbon.blue { text-shadow: -1px 1px 0px #3f9fd4; color: #ffffff; background-color: #59b6ea; }

div#content > h2:first-child { font-size: 26px; margin-bottom: 20px; color: #333333; line-height: 32px; padding-bottom: 8px; margin-top: 4px; padding-right: 0px; border-bottom: 4px solid #59b6ea; font-weight: bold; text-shadow: -1px 1px 0px #f2f3f4; }
div#content > h1:first-child { margin-bottom: 20px; }
div#content h3 + h4 { color: #ec6109; }
div#content h3 > h4 { color: #ec6109; }
div#content ol + h4 { margin-top: 30px; }