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

undo
top-level elements
main content style
misc. copy style
navigation elements
alerts
login style
vcard Contact style
forms
co-branding
twipl

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


/* -------------------------------------------------------------- 
undo */

/* this value from screen.css conflicts with AirBudd FormBuilder's usage so we gotta undo it */
body .error {
padding:0;margin-bottom:0;border:none;background:none;color:inherit;border-color:inherit;
}

/* -------------------------------------------------------------- 
top-level elements */

body {
   height:100%;
   background-color:#1F2323;
   color:#d2d3d3;
   margin:0;
   }

.page {position:relative; min-height:100%;margin:0;}

.head {
   background: url(/images/header_icon.png) no-repeat top left;
   color:#1F2323;
   height:90px;
   position:relative;
   }

.no-alerts {
   background:#1F2323 url(/images/header.png) repeat-x top left;
   }

.alerts {
   background:#658ab2;
   border-bottom: solid  2px;
   }

.no-alerts, .alerts{
   margin:0;
   width:100%;
   min-width:830px;
   }

.content  {
   padding:2em 0 5em 0;
   }

.foot { 
   color:#f8510b;
   font-size:.9em;
   position:absolute;
   bottom:0;
   }



/* -------------------------------------------------------------- 
main content style */

.intro, .vcard {padding-bottom:0em !important;}

.feature {
   background: #2c2c2c url(/images/feature_lines.png) repeat-y left top;
   border-top: 1px solid #000000;
   border-bottom: 2px solid #000000;
   border-right: 1px solid #000000;
   margin-top:1.5em; margin-bottom:1.5em;padding-top:1.5em; padding-bottom:1.5em;
   }

.dark {background: #191c1c url(/images/feature_lines.png) repeat-y left top;}

/* -------------------------------------------------------------- 
misc. copy style */

a, a:hover, a:focus {
   text-decoration: none; 
   outline:none; 
   border:none; 
   color:#f9943c;
   }
.content a {
   border-bottom:1px dotted #c63509;
   }
.content a:hover, .content a:focus {
   border-bottom:1px solid #f9943c; 
   color:#f9943c; 
   background-color: #191c1c;
   }
.feature a:hover, .content a:focus {
   background-color: #1F2323;
   }
.icon a, .icon a:hover, .icon a:focus {
   border-bottom: none;
   background-color:transparent;
   }
.login a {
   border-bottom: 1px dotted #c63509; 
   }
.login a:hover, .content a:focus {
   border-bottom: 1px solid #f9943c; 
   background-color: #191c1c;
   }

.feature p {margin-right:1em;}

h1, h2, h3, h4, h5, h6 {color:#ffffff;}
/* 
NOTE: Careful w/ line-height: use it to determine vert space in multiline heading.
To deterime vert spacing after heading use margin-bottom
*/
h1 { font-size:2em; line-height:1.2; margin-bottom:.3; }
h2 { font-size:1.4em; line-height:1.2; margin-bottom:.3; }
.why h1 {background:url(/images/h1_chevron.png) no-repeat 0; padding-left:1em;}

.content h1 a {
   text-decoration: none; 
   outline:none; 
   border-bottom: none; 
   color:#ffffff; 
   background-color:transparent;
   }

.trademark {
   vertical-align:baseline;
   font-size:0.6em;
   position:relative;
   top:-0.4em;
   color:#2c2c2c;
   }

img {margin:0;}
.foot .trademark {color:#2c2c2c;}
.no-alerts .trademark {color:#d2d3d3;}
.verticalspace {margin-top:1.5em; margin-bottom:1.5em;padding-top:1.5em; padding-bottom:1.5em;}


/* -------------------------------------------------------------- 
   block quotes
   */
blockquote {
  margin:0 0 1.5em;
  padding-left: 25px;
  color: #b2ceeb;
  background: transparent url(/images/open-quote.png) left top no-repeat;
}
   
/* -------------------------------------------------------------- 
navigation elements */

ul.nav {position:absolute;margin:0;left:0;bottom:0;width:515px;height:26px;
/*overflow: hidden;*/background:transparent url(/images/navigation_bg.png) no-repeat 0 0;}
ul.nav li {padding:0;margin:0;display:block;float:left;text-indent:-9999px;}
ul.nav li div {text-indent:0;}
ul.nav li div a {display:inline;background:transparent}
ul.nav li a {border:0;display:block;text-decoration:none;overflow:hidden;background:transparent url(/images/navigation.png) no-repeat;}
li.userspace {width:290px;height:26px;}
li.home a {width:55px;height:26px;}
li.blog a {width:48px;height:26px;}
li.why a {width:47px;height:26px;}
li.contact a {width:74px;height:26px;}
li.home a:link, li.home a:visited {background-position:-71px 0px;}	 	 	 
li.home a:hover, li.home a:focus {background-position:-71px -26px;}
li.blog a:link, li.blog a:visited {background-position:-127px 0px;}
li.blog a:hover, li.blog a:focus {background-position:-127px -26px;}
li.why a:link, li.why a:visited {background-position:-176px 0px;}
li.why a:hover, li.why a:focus {background-position:-176px -26px;}
li.contact a:link, li.contact a:visited {background-position: -224px 0px;}
li.contact a:hover, li.contact a:focus {background-position: -224px -26px;}
body.home ul.nav li.home a {background-position:-71px -52px;}
body.blog ul.nav li.blog a {background-position:-127px -52px;}
body.why ul.nav li.why a {background-position:-176px -52px;}
body.contact ul.nav li.contact a {background-position:-224px -52px;}



/* -------------------------------------------------------------- 
alerts */

/*have to reset some properties set on error in screen.css*/
.alerts .error, .alerts .warn, .alerts .inform {
   margin:0;
   padding:0 0 0 40px; /* make room on left for image */
   border:none;
   }

.alerts .alert {
   border:none;
   color:#e5eff8;
   font-size:1.2em; /*these three properties are from screen.css large rule*/
   line-height:1.8em;
   margin: 1.25em 0;
   min-height:2em;
   }

.alerts .error {
   background:url(/images/error.png) no-repeat 0 center;
   }

.alerts .warn {
   background:url(/images/warn.png) no-repeat 0 center;
   }

.alerts .inform {
   background:url(/images/inform.png) no-repeat 0 center;
   }



/* -------------------------------------------------------------- 
login style */

.login {
   color:#d2d3d3;
   margin-top:3px;
   }

.openid_url {
   background:url(/images/login-bg.gif) no-repeat 5px;
   padding-left:25px;
   width:200px;
   background-color:#1F2323;
   color:#d2d3d3;
   border:1px solid #060707;
   }

.button {
   background-color:#1F2323;
   color:#d2d3d3;
   border:1px solid #060707;
   }

/* -------------------------------------------------------------- 
User registration style */

.captcha {
   margin:0 0 10px 0;
   padding:0 0 10px 0;
   float:left;margin-right:10px;width:550px; /* span-14 */
   margin-left:120px; /* prepend-3*/
   border-bottom:1px dotted #2c2c2c;
}


/* -------------------------------------------------------------- 
vcard Contact style */

.vcard {margin-top:2em;}
.adr {display:block;}

/*
There's nowhere to put this word in the markup without polluting the pertinent
hcard structure, so we'll stick it into the presentation.
*/
.tel .type:after {content: ' phone: ';}



/* =================================================================
forms */


/* -----------------------------------------------------------------
   corkd form style */

/* TODO: remove these once remnants of table-based forms are gone! */

.form-table p {
   margin:0;
   }
.form-table th {
   background:none;
   text-align:right;
   vertical-align:top;
   }
.form-table th, .form-table td {
   border-bottom:1px dotted #2c2c2c;
   }
.form-table tr.last th, .form-table tr.last td {
   border-bottom:none;
   }
.instructions { color:#797b7b; padding-top: .3em;}


/* -----------------------------------------------------------------
   tweaked Air Budd builder style 
   controls inherit style */

/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
   scaffolding */

/* now make edit controls inherit style! */
.draft input[type=text]
{
    font-size:inherit;
    text-align:inherit;
    font-family:inherit;
    background-color:inherit;
    color:inherit;
    width:100%;
    border:1px dotted #ddd;
}

/* hint for label appearing _after_ control e.g. check box */
.draft input + label + .hint {
   margin-left:10px;
}


.draft .attribute, .published .attribute {
   margin:0 0 10px 0;
   padding:0 0 10px 0;
   float:left;margin-right:10px;width:550px; /* span-14 */
   border-bottom:1px dotted #2c2c2c;
}

.draft .attribute label, .published .attribute label, .draft .attribute .feedback {
   font-weight:normal; /* undo screen.css */
   display:inline-block; /* establish context for em.required… */
   float:left;margin-right:10px;width:110px; /* span-3 */
   background:none;
   text-align:right;
   vertical-align:top;
   color:#797b7b;
   }

.draft .required { 
   color:#f8510b;
   /* take this out of flow so that label text is right-aligned */
   position:absolute;
   padding-left: 3px; /* push out away from label a little */
}

.draft .attribute input {
   float:left;margin-right:10px;width:230px; /* span-6 */
}

.draft .attribute .hint {
   display:inline-block;
   float:left;margin-right:10px;width:230px; /* span-6 */
   margin-left: 120px; /* prepend-3 */
}
.draft .hint { color:#a5a7a7; padding-top: .3em;}

/* .fieldWithErrors is applied automatically by the Rails framework when a field has errors.
see also: Blueprint CSS screen.css rules for .error and friends (I made this rule match that one)
*/
.fieldWithErrors input {border:2px solid #b2ceeb; background:#cbdef2;}

.draft .attribute .feedback {
   color: #7eadde;
}
.draft .error { 
   color: #7eadde;
}

.draft .buttons {
   padding-left:40px;/*prepend-1*/
}

/* -------------------------------------------------------------- 
co-branding */

.tasty-technologies h1 {
   display:none;
   }

.tasty-technologies ol {
   margin:0;
   }
.tasty-technologies ol li {
   display:block;
   float:left;
   }
.tasty-technologies ol a {
   border:0;
   display:block;
   text-decoration:none;
   }
.tasty-technologies ol a {
   margin-left:31px;
   width:80px;
   height:80px;
   }
.tasty-technologies ol a:hover {
   background:none;
   }

.tasty-technologies img {
   width:80px;
   }
.tasty-technologies img.amazon-web-services {
   width:127px; /*minimum width per AWS ToS: http://www.amazon.com/gp/browse.html?node=360388011 */
   }



/* ============================================================== 
   Twips */

textarea {
   height:100%;
   width:100%;
   padding:0;
   margin:0;
   font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size:100%;
   }

.twip img {
   background:#2c2c2c none repeat scroll 0 0;
   border:1px dashed #797b7b;
   margin:7px 12px 10px 0;
   padding:7px;
   /*vertical-align:sub;*/
   }
   
/*     ----------------------------------------------------------
       vertical spacing */
       
.twip {margin-bottom:1em;}
.authorship {
   margin-bottom:16px;
   padding-bottom:16px; /* for horizontal rule */
   }
.twip .body {margin-bottom:2em;}

/*     ----------------------------------------------------------
       authorship */

.authorship {
   font-size:.9em;
   color: #a5a7a7;
   border-bottom: 1px dashed #a5a7a7;
}

.reactions {
   float:right;
}

/*    -------------------------------------------------------------
      reaction Twip */
   
.twip-top {
   background:transparent url(/images/twip_top.png) no-repeat 0 0;
   height:11px;
   width:510px;
   margin-top:2em;
   }
.twip-top-point {
   background:transparent url(/images/twip_top-point.png) no-repeat 0 0;
   height:22px;
   width:510px;
   margin-top:1em;
   }
.twip-content {
   background:transparent url(/images/twip_mid.png) repeat-y 0 0;
   width:510px;
   padding: 0 0 0 1em;
   }
.twip-bottom {
   background:transparent url(/images/twip_bottom.png) no-repeat 0 0;
   height:11px;
   width:510px;
   }

/*    -------------------------------------------------------------- 
      Recent Twips Summary view (Trips grouped by date) 

      structure is:
      .day: all Twips for a particular day
         .date: a date
            .month
            .day
            .year
*/
.day {clear:left;}
.day h1.date .month {
   float:left;
   font-size:62.5%;
   margin-top:7px; /* tweak to fit in background image and baseline align w/ Twip title */
   }
.day h1.date .day {float:left;font-size:75%;color:#f9943c;line-height:1.1;}
.day h1.date .year {display:none;}
.day .date {display:none;}
.day h1.date {
   float:left;
   display:block; /* override rule we just defined */
   background:transparent url(/images/twip_date-tab.png) no-repeat 0px top;
   padding:0 20px 0 40px;
   margin:0 0 0 0;
   height:48px;
}

/* --------------------------------------------------------------
   YUI Editor (rich text editor)
*/
.yui-skin-sam .yui-toolbar-container .yui-toolbar-editcode span.yui-toolbar-icon { 
   background-image: url(/images/html_editor.gif ); 
   background-position: 0 1px; 
   left: 5px; 
} 
.yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon { 
   background-image: url(/images/html_editor.gif ); 
   background-position: 0 1px; 
   left: 5px; 
}
.editor-hidden { 
   visibility: hidden; 
   top: -9999px; 
   left: -9999px; 
   position: absolute; 
}

/* --------------------------------------------------------------
   Code
*/
pre {
   overflow:auto;
}
code {
   font-family: Monaco, Courier, monotype;
}

/* --------------------------------------------------------------
   Code Highlighting
*/

code span.comment {
	color: #f8510b;
}

code span.keywords,
code span.tag,
code span.selectors {
	color: #f9943c;
}

code span.symbol,
code span.attribute,
code span.properties {
	color: #7eadde;
}
 
code span.string {
	color: #b2ceeb;
}
 
code span.brackets {
}
 

# not yet implemented by highlighter
code span.erb {
   # could set background here
}
 
code span.doctype {
	color: #fefcce;
}

/** CSS **/

code.css span.units {
}

code.css span.urls {
}


/* --------------------------------------------------------------
   Swatches for development
*/
body.swatch {
   background-color: #000000;
}
.swatch .container {
   width: 870px; /* span-22 width */
   background-image: none;
   background-color: #000000;
}
.swatches {
   margin-top:100px;
   text-align:center;
}
.swatches h1 {
   margin-bottom:16px;
}
.swatches hr {
   background-color:#000000;
   color:#000000;
}
.swatches ol {
   margin:0; /* undo blueprint reset */
   margin-bottom:16px;
}
li.color {
   list-style-type: none;
}
.color .sample {
   height:70px;
   display:block;
}
.color .variable {
   display:block;
}

/* --------------------------------------------------------------
   Pagination. Adapted from mislav-will_paginate flickr_pagination
*/
.pagination {
  text-align: center;
  padding: .3em; }
  .pagination a, .pagination span {
    padding: .2em .5em; }
  .pagination span.disabled {
    color: #4c6885; }
  .pagination span.current {
    font-weight: bold;
    color: #f9943c; }
  .pagination a {
    border: 1px solid #4c6885;
    color: #98bde5;
    text-decoration: none; }
    .pagination a:hover, .pagination a:focus {
      border-color: #f8510b;
      background: #f8510b;
      color: white; }
  .pagination .page_info {
    color: #aaa;
    padding-top: .8em; }
  .pagination .prev_page, .pagination .next_page {
    border-width: 1px; }
  .pagination .prev_page {
    margin-right: 1em; }
  .pagination .next_page {
    margin-left: 1em; }