/* --------------------------------------------------------------

Project: pypants
Constants:
  Greys:
    rgb(40, 40, 40)
    rgb(80, 80, 80)
    rgb(150, 150, 150)
    rgb(180, 180, 180)
    rgb(230, 230, 230)

  Blues:
    rgb(35, 150, 220)
    rgb(220, 230, 240)

  Greens:
    rgb(130, 190, 80)

  Orange:
    rgb(220, 90, 0)

-------------------------------------------------------------- */


/* RESET
-------------------------------------------------------------- */
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strike, strong, sub, sup, 
tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote, q { quotes: none; }
:focus { outline: none; }


/* BASIC
-------------------------------------------------------------- */
body { background: rgb(255, 255, 255); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4em; color: rgb(40, 40, 40); }
img { -ms-interpolation-mode: bicubic; }
p.tags { font-size: 1.1em; color: rgb(160, 160, 160) !important; }
p.tags a { color: rgb(150, 150, 150) !important; }
p.tags a:hover { color: rgb(35, 150, 220) !important; }


/* TYPE
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.25em; letter-spacing: -0.04em; line-height: 1.4em; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.6em; }
h3 { padding-bottom: 0.25em; font-size: 1.1em; border-bottom: 1px solid rgb(230, 230, 230); color: rgb(150, 150, 150); }

a { color: rgb(35, 150, 220); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0.5em 0 1em; font-size: 1.2em; line-height: 1.4em; }
ul, ol { margin: 0.5em 0 1em; padding: 0 18px; }
blockquote { margin: 0.5em 0 1em; padding-left: 10px; border-left: 1px solid rgb(230, 230, 230); }
strong { font-weight: bold; }
em { font-style: italic; }

dl { margin: 0.5em 0 1em; }
dt { font-weight: bold; }
dd { margin: 0.5em 0; }

table { margin: 0.5em 0 1em; width: 100%; font-size: 1em; }
tr { border-bottom: 1px solid rgb(230, 230, 230); }
tr:last-child { border: none; }
th { padding: 10px 0; font-weight: bold; color: rgb(150, 150, 150); }
td { padding: 10px 0; }
tr.submit { border: none; }

hr { border: none; border-bottom: 1px solid rgb(230, 230, 230); }

/* FORMS
-------------------------------------------------------------- */
label { vertical-align: top; }
input, textarea, button { margin-top: -5px; padding: 5px; border: 1px solid rgb(180, 180, 180); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.1em; line-height: 1.3em; }
input, textarea { background: rgb(255, 255, 255) url(../images/field_bg.gif) repeat-x; color: rgb(40, 40, 40); }
input[type=file] { background: none; padding: 0; border: none; }
input[type=hidden] { display: none; }
button, .button { margin: 0; padding: 5px 25px; border: none; background: url(../images/buttons.gif) 0 -10px repeat-x; cursor: pointer; line-height: 1.3em; color: rgb(255, 255, 255); -webkit-border-radius: 4px; -moz-border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 1px 2px; }
button:hover, .button:hover { background-position: 0 -100px; }
button:active, .button:active { background-position: 0 -190px; -webkit-box-shadow: rgba(0, 0, 0, .4) 0px 0px 2px; }
button::-moz-focus-inner { border: 0; }

.button { padding: 7px 25px; }
.button:hover { text-decoration: none; }

fieldset { margin: 0.5em 0 1em; padding: 20px 20px 10px; border: 1px solid rgb(230, 230, 230); -webkit-border-radius: 6px; -moz-border-radius: 6px; }

.change_form p { color: rgb(150, 150, 150); zoom: 1; }
.change_form p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.change_form p label { display: block; float: left; width: 13%; font-weight: bold; color: rgb(40, 40, 40); }
.change_form .submit { margin-bottom: 0; text-align: right; }
.change_form p .help_text { margin-top: 0px; margin-left: 13%; }
.change_form .errors { color: #ff0000; }


/* HEADER
-------------------------------------------------------------- */
#header { position: relative; margin: 20px auto 0 auto; width: 800px; zoom: 1; }
#header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#header h1 { float: left; font-family: 'Myriad Pro', 'Helvetica Neue', helvetica, arial, sans-serif; }
#header h1 a { margin: -5px; padding: 5px; color: #999; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#header h1 a:hover { background: rgb(220, 230, 240); color: rgb(35, 150, 220); text-decoration: none; }
#header .search_form { display: block; float: right; }
#header .search_form input { padding: 5px; width: 225px; font-size: 0.9em; color: rgb(180, 180, 180); }
#header .search_form input:focus { padding: 4px; color: rgb(40, 40, 40); border: 2px solid rgb(35, 150, 220); }
#header .search_form button { padding: 6px 15px; font-size: 0.9em; }
#header .search_form .all { display: block; font-size: 0.8em; }
#header .search_form .all a { color: rgb(180, 180, 180); }
#header .search_form .all a:hover { color: rgb(35, 150, 220); }

/* BODY
-------------------------------------------------------------- */
#body { position: relative; margin: 0 auto; width: 800px; zoom: 1; }
#body:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.content_title { margin-bottom: 1em; border-bottom: 1px solid rgb(230, 230, 230); }
.content_title h2 { font-size: 2.5em; }
.content_title h2 a { color: rgb(40, 40, 40); }
.content_title h2 em { font-size: 0.7em; font-weight: normal; font-style: normal; color: rgb(150, 150, 150); }
.content_title h2 em a { color: rgb(150, 150, 150); }

.content { float: left; width: 600px; }

.aside { float: left; margin-left: 40px; margin-top: 73px; width: 159px; border-left: 1px solid rgb(230, 230, 230); }
.aside h3 { padding: 0 0 0 10px; border: none; color: rgb(150, 150, 150); }
.aside ul { list-style: none; margin: 0 0 1.5em 0; padding: 0; }
.aside ul li a { display: block; margin: 0 -5px 1px 0; padding: 2px 10px; color: rgb(180, 180, 180); -webkit-border-top-right-radius: 11px; -webkit-border-bottom-right-radius: 11px; -moz-border-radius-topright: 11px; -moz-border-radius-bottomright: 11px; }
.aside ul li a:hover { background: rgb(35, 150, 220); color: rgb(255, 255, 255); text-decoration: none; }
.aside ul li.on a { background: rgb(220, 90, 0); color: rgb(255, 255, 255); }


/* FOOTER
-------------------------------------------------------------- */
#footer { position: relative; margin: 0 auto; width: 800px; zoom: 1; border-top: 1px solid rgb(230, 230, 230); }
#footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#footer p { font-size: 0.9em; color: rgb(180, 180, 180); }


/* ELEMENTS
-------------------------------------------------------------- */
.project { margin-bottom: 2em; zoom: 1; }
.project:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.project ul { margin-bottom: 0; }
.project p { font-size: 1em; color: rgb(80, 80, 80); }
.project .info { list-style: none; padding: 0; color: rgb(80, 80, 80); }

.project .score { float: right; margin-left: 10px; width: 130px; text-align: center; }
.project .score p { margin: 0; font-size: 1.1em; }
.project .score img { margin: 0 0 5px 0; }
.project .score .grade { display: block; font-size: 1.2em; font-weight: bold; color: rgb(80, 80, 80); }
.project .score .points { display: block; font-size: 0.8em; color: rgb(150, 150, 150); }

.report_card th.score { padding-right: 10px; text-align: right; }
.report_card td { padding: 10px 0; }
.report_card td.title { padding-left: 10px; }
.report_card td.title h4 { margin: 0; font-size: 1.2em; font-weight: normal; }
.report_card td.title .abbr { margin: 0 -4px; padding: 1px 5px; font-size: 0.65em; line-height: 1em; color: rgb(180, 180, 180); cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.report_card td.title .abbr:hover { background: rgb(220, 90, 0); color: rgb(255, 255, 255); }
.report_card td.title p { margin: 0 0 0.3em 0; font-size: 1em; color: rgb(150, 150, 150); }
.report_card td.score { padding-right: 10px; font-size: 1.3em; line-height: 1.3em; font-weight: bold; color: rgb(130, 190, 80); text-align: right; }
.report_card td.score small { font-size: 0.8em; font-weight: normal; color: rgb(180, 180, 180); }

.report_card tr.highlight td { background: #eee; }
.report_card tr.highlight td.title h4 { font-size: 1.5em; font-weight: bold; }
.report_card tr.highlight td.score { font-size: 1.5em; line-height: 1.3em; }

.sparkline { float: left; height: 1em; margin: 0 0.5em; }
.sparkline .index { position: relative; float: left; margin-right: 0; width: 1px; height: 100%; }
.sparkline .index .count { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: rgb(130, 190, 80); overflow: hidden; text-indent: -9999px; }
.sparkline .on .count { background: rgb(220, 90, 0); }

.recent_projects { list-style: none; margin-bottom: 30px; padding: 0; overflow: hidden; }
.recent_projects li { display: block; float: left; width: 220px; }

.report_history { margin-bottom: 2em; padding: 5px; background: #eee; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
.report_history .wrapper { padding: 10px; border: 1px solid #ddd; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.report_history h3 { border: none; }

.timeline { list-style: none; padding: 0; font-size: 0.75em; height: 6.5em; width: 53em; }
.timeline li { position: relative; float: left; width: 10px; margin: 0 0.1em; height: 6em; }
.timeline li a { display: block; height: 100%; color: rgb(150, 150, 150); }
.timeline li .label { display: block; position: absolute; bottom: -2em; left: 0; background: rgb(255, 255, 255); width: 100%; height: 2em; line-height: 2em; text-align: center; }
.timeline li a .count { display: block; position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: rgb(130, 190, 80); text-indent: -1000px; overflow: hidden; }
.timeline li:hover { background: rgb(230, 230, 230); }
.timeline li.on a .count { background: rgb(220, 90, 0); }
.timeline li a:hover .count { background: rgb(35, 150, 220); text-decoration: none; }

.evaluations { margin-bottom: 20px; }
.evaluations td { padding: 4px 0; }

.screencast { margin: 10px 0; padding: 10px; background: #d9ebc9; -webkit-border-radius: 6px; -moz-border-radius: 6px; }

.pythong { position: absolute; top: 100px; left: 200px; padding: 10px; width: 220px; height: 340px; background: rgba(0, 0, 0, .5) url(../images/hasselhoffian-recursion.gif) 10px 10px no-repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; z-index: 999; }

#intro { margin: 15px 0 30px 0; height: 155px; background: url(../images/intro.gif) no-repeat; border: none; overflow: hidden; text-indent: -1000px; }
body.home .content { width: 440px; }
body.home .aside { margin-top: 0; border: none; width: 319px; }
.submit_project { margin-bottom: 20px; padding: 15px; background: #d9ebc9; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
.submit_project p { margin: 0; color: #717a68; }

.add_project_form h3 { margin-bottom: 20px; padding-left: 0; font-size: 1.5em; color: #717a68; }
.add_project_form fieldset { margin: 10px 0 0 0; padding: 0; border: none; }
.add_project_form p { margin-bottom: 10px; }
.add_project_form p label { padding-right: 10px; width: 90px; text-align: right; color: #717a68; }
.add_project_form p input { width: 175px; }
.add_project_form .submit { font-size: 1em; text-align: right; }

.repo_form { margin-top: 10px; padding: 15px; background: #eee; }
.repo_form p { margin: 0; font-size: 1.2em; }
.repo_form p label { padding-top: 3px; width: 80px; }
.repo_form p button { font-size: 0.8em; }
.repo_form p input { width: 340px; font-size: 0.8em; }
.repo_form p.help_text { margin: 2px 0 0 80px; font-size: .9em; }

body.project_form .change_form p label { width: 100px; }
body.project_form .change_form p input { width: 300px; }
body.project_form .change_form p .errors { display: block; margin-left: 100px; }

.importing { margin-bottom: 1em; padding: 10px; background: rgb(220, 90, 0); color: rgb(255, 255, 255); -webkit-border-radius: 6px; -moz-border-radius: 6px; }
.importing p { margin: 0; text-align: center; }


/* TABS
-------------------------------------------------------------- */
.tabs { list-style: none; margin: 0; padding: 0; background: #fff url(../images/rules/horz_ddd.gif) left bottom repeat-x; font-size: 0.9em; overflow: hidden; }
.tabs a { display: block; float: left; margin-right: 1px; padding: 5px 15px; background: rgb(240, 240, 240); color: rgb(100, 100, 100); -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; }
.tabs a:hover { background: rgb(35, 150, 220); color: rgb(255, 255, 255); text-decoration: none; }
.tabs .on a, .tabs .on a:hover { background: rgb(255, 255, 255); border: 1px solid rgb(220, 220, 220); border-bottom: none; color: rgb(100, 100, 100); }