/*
 *  Styles for jcornelius.com
 *  ~~~ this is my stylesheet. there are many like it, but this one is mine
 */
@import 'reset.css';

/* typography */
@font-face {
   font-family: 'MuseoSans900';
   src: url('museosans_900.eot');
   src: local('☺'), url('museosans_900.woff') format('woff'), url('museosans_900.ttf') format('truetype'), url('museosans_900.svg#webfontzFpJe6jR') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'MuseoSans700';
   src: url('museosans_700.eot');
   src: local('☺'), url('museosans_700.woff') format('woff'), url('museosans_700.ttf') format('truetype'), url('museosans_700.svg#webfontqGC0MLrN') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'MuseoSans500';
   src: url('museosans_500.eot');
   src: local('☺'), url('museosans_500.woff') format('woff'), url('museosans_500.ttf') format('truetype'), url('museosans_500.svg#webfontCT2lH2k4') format('svg');
   font-weight: normal;
   font-style: normal;
}

/* Structure */
html                               { color:#222; width:100%; }
body                               { font-family:'helvetica neue',helvetica,sans-serif;  background:#f2f2f2 url('/images/background.jpg') 50% 0 repeat-x; }
header, div#container              { display:block; margin:0 auto; width:960px; text-align:left; }
nav, header form,
div#content, aside                 { float:left; margin-left:10px; margin-right:10px; }
footer                             { clear:left; display:block; width:100%; text-align:center; margin-top:40px; padding:10px 0; color:#888; font-size:.9em; text-shadow:0 1px 0 #fff; }
footer #copyright                  { border-top: 3px double rgb(221, 221, 221); margin: 0 auto; padding: 20px 0 0; width: 900px; }
h2,h3,h4,h5                        { font-weight:bold; text-transform:uppercase; border-bottom:1px solid #aaa; line-height:1.2em; text-align:left; letter-spacing:-0.05em; word-spacing:.15em; text-shadow:0 1px 0 #FFF; }
h2                                 { font-family:"MuseoSans900",helvetica,sans-serif; font-size: 30px; }
h3,h4,h5                           { font-family:"MuseoSans500",helvetica,sans-serif; margin-bottom:10px; }
h3                                 { font-size: 22px; color:#444; }
h4                                 { font-size: 18px; }
h5                                 { font-size: 15px; }
p                                  { margin-bottom:1.5em; line-height:1.5em;}
ul                                 { margin-left:20px; margin-bottom:2em; }
a                                  { color:#000; text-decoration:none; -webkit-transition: all 0.2s linear; outline:none; }
a:visited                          { color:#444; }
a:hover                            { color:#900; text-decoration:underline; -webkit-transition: all 0.2s linear; }
a:active                           { outline:0; position:relative; top:1px;}
a.highlight                        { text-decoration:underline !important; }

/* Global Header */
header h1                          { margin:0 10px; float:left; }
header h1 a                        { display:block; width:100px; height:140px; background:transparent url('/images/jc.png') 0 -20px no-repeat; text-indent:-999px; text-decoration:none; border:0; -webkit-transition: all 0.2s linear; text-decoration:none; }
header h1 a:hover                  { -webkit-transition: all 0.2s linear; background-position: 0 -18px; text-decoration:none; border:none; }
header nav                         { margin-left:70px; width:460px;  height:1.75em; font-size:.9em; }
header nav a                       { display:block; float:left; margin-left:10px; margin-right:10px; padding:2em 0 .5em; width:100px; color:#888;
                                     text-transform:uppercase; text-decoration:none; text-align:center; text-shadow:0 1px 0 #FFF; border:0;
                                     font-weight:bold;
                                     color: rgba(20, 20, 20, 0.75);
                                     -webkit-border-bottom-right-radius: 10px;
                                     -webkit-border-bottom-left-radius: 10px;
                                     -moz-border-radius-bottomright: 10px;
                                     -moz-border-radius-bottomleft: 10px;
                                     border-bottom-right-radius: 10px;
                                     border-bottom-left-radius: 10px;
                                     background-color: rgba(255,255,255,0.35);
                                     -webkit-transition: all 0.7s linear;
                                   }
header nav a:hover,header nav a.current {
                                     background-color: rgba(255,255,255,0.45);
                                     border:none;
                                     text-decoration:none;
                                     color: rgba(100, 0, 0, 0.75);
                                     -webkit-box-shadow: 0 1px 3px #888;
                                     -moz-box-shadow: 0 1px 3px #888;
                                     -webkit-transition: all 0.2s linear;
                                     }
header nav a#first                 { margin-left:0; }
header nav a#last                  { margin-right:0; }
header form                        { width:220px; margin-top:24px; margin-left:70px; text-align:right; }
header form input[type="search"]   { margin-right:4px; width:170px; }
header form input[type="image"]    { height:16px; vertical-align:middle; }

/* Global Content Layout */
div#container                      { text-shadow:0 1px 0 #FFF; }
div#content                        { display:block; margin-left:70px; width:460px; }
aside                              { width:220px; margin-left:70px; padding-top:13px; }
div#content, aside                 { margin-top:50px; }

footer a                           { color: #888; }
footer a:hover                     { color: #aaa; }


/********************************************
 * Main Content Area
 */

/* Individual Articles */
article                            { font-size:16px; line-height:1.75em; font-family:georgia,times,serif; text-rendering: optimizeLegibility; }
article hgroup                     { display:block; margin-bottom:2em; }
article h2 a                       { border:0; text-decoration:none; }
article h2 a:hover                 { color:#900; text-decoration:none; }
article h2 a span                  { display:none; }
article h2 a:hover span            { display:inline; }
article p a                        { color:#000; border-bottom:1px dotted #555; }
article p a:hover                  { border-bottom:1px solid #900; text-decoration:none; }
article #meta                      { display:block; border-top:1px solid #ddd; }
article #meta span                 { margin-right:20px; font-size:.8em; color:#999; }
article #meta time,
article #meta a                    { color:#555; }
article #meta a:hover              { color:#900; }
article section                    { display:block; }
article section p                  { font-size:1.1em; line-height:1.75em; text-indent:20px;}
article section ul                 { margin:0 0 2em 30px; }
article section li                 { margin:0 5px 5px; list-style-image:url("/images/bullet.png"); }

/* special cases */
article .sdrive-stream-post-datetime { display:block; margin-bottom:2em; font-size:.8em; color:#999; }

/* Article List */
#summary-list div                  { margin:20px 0; border-bottom:1px solid #aaa; }
#summary-list div p                { margin:10px 0 20px; font-size:.9em; color:#444; }
#summary-list div a.title          { font-size:1.2em; font-weight:bold; }
#summary-list div a.continue       { font-style:italic; }
#summary-list .meta                { font-size:.8em; color:#888; }

/* Stream */
#sdrive-stream-container           { margin-top:6px;} /* offset for difference between h2 and h3 font sizes to make things line up on the vertical grid */

/* General Lists */
#page-contents ul                  { list-style:none; }
#page-contents ul li               { padding:0 0 1em 24px; background:transparent url('/images/bullet.png') 0 1px no-repeat; }
#page-contents ol                  { padding:0 0 0 30px; list-style:decimal; }
#page-contents ol li               { padding:0 0 1em; list-style:decimal; }
ul#aboutlist li                    { background-position:0 -1px; padding-left:16px; }
#aboutlist li a                    { text-decoration:underline; }

/* sidebar */
aside h4                           { color:#666; }
aside>section                      { display:block; margin-bottom:3em; }
aside p                            { font-size:.9em; }
aside ul                           { margin: 10px; }
aside li                           { margin:0 5px 5px; list-style-image:url("/images/bullet.png"); }

#bio p                             { padding: 0 10px; }

article blockquote                 { display:block; font-family:serif; font-size:1.25em; font-style:italic; margin:20px 40px 40px; border-left:10px solid #ddd; padding-left:10px; }
article p:first-child              { text-indent:0; }
article p:first-child:first-letter { font-size: 3.5em; line-height: 1em; font-weight: 400; float: left; margin: 0 0.107em 0 0; }
article p:first-child:first-line   { font-weight: 800; }

article p a.external               { background: url('/images/link_external_icon.png') center right no-repeat; padding-right: 13px; }
#related_articles li span          { display: block; }

#social                            { display:block; margin:0 0 40px; font-weight:bold; border-top:1px solid #ddd; padding:10px 0 0; }
#social.index                      { margin: 0 0 20px; }
#social a                          { display:block; float:left; margin-right:10px; text-decoration:none; border:0 !important; background-position: 0 0 !important; font-family:helvetica,sans-serif; font-size:12px; font-weight:normal; }
#social .shortlink                 { background:transparent url('/images/offsite/shorturl_100.png') 0 0 no-repeat; padding:0 0 0 24px; font-size:10px; width:76px; height:16px; }
#social:after                      { display: block; clear: both; content: " "; } /* clearing without presentational markup,IE gets extra treatment */

#related_articles ul               { display: block; margin: 0; padding: 10px; }
#related_articles ul span          { font-size: .8em; color: #444; }
.insetfigure                       { margin: 40px 20px; padding: 20px 0; }
.insetfigure .credit               { display: block; padding: 10px; font-size: 12px; font-style: italic; color: #888; }
code                               { display: block; margin: 20px; padding: 0 10px; font-size: 11px; border: 1px solid #ccc; background: #eee; white-space: pre; overflow: auto; }
.output                            { margin:20px 0; padding: 10px;height: auto; overflow: auto; border: 1px solid #aaa; border-width:1px 0; background: #fcfcfc; }
.pre                               { white-space: pre; }
.error                             { font-weight: bold; text-transform: uppercase; color: #c00; }


/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* generic table styles
*/
table { margin: 9px auto; width: 99%; }
td { margin: 0; padding: 9px; border-top: 1px dotted #ccc; }
td.key { width: 24%; border-right: 1px dotted #ccc; font-weight: bold; color: #666; text-align: right; vertical-align: top; }
td.value { color: #000; }


/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* form styles
*/
form { }
form legend { display: block; margin: 0 0 20px; padding: 0 10px 20px; width: 800px; border-bottom: 1px solid #999; }
form label { display: block; margin: 10px 0 20px; font-size: .9em; font-weight: bold; color: #444; }
form span { display: block; float: left; padding-right: 20px; width: 160px; text-align: right; }
form input[type=text],
form input[type=email],
form input[type=password],
form textarea { width: 270px; font-size: 14px; font-family: monospace; font-weight: normal; }
form input[type=text],
form input[type=email],
form input[type=password],
form textarea { border: 1px solid #888; padding: 4px; margin: 0; }
form input[type=text].focused,
form input[type=email].focused,
form input[type=password].focused,
form textarea.focused { border-color: #222; }
form textarea { height: 120px; }
form input.button { margin: 0 0 0 180px; }
form#contact { margin-bottom:3em; }
form#contact fieldset { padding:20px 0 0; }
form#contact #send-my-message { display:block; width:160px; height:30px; border:0; text-indent:-999em; background:transparent url('/images/send-my-message.png') 0 0 no-repeat; }
form#contact #send-my-message:hover { background-position:0 -30px; }
form#edit_content span { float: none; text-align: left; }
form#edit_content input { width: 760px; }
form#edit_content textarea { margin: 0; padding: 0; width: 750px; height: 450px; }
form#edit_content .form_element_group { margin-bottom: 4em; }
form#edit_content .form_element_group span { display: block; width: 60px; float: left; font-weight: bold; color: #444; font-size: .9em; }
form#edit_content .form_element_group label { display: block; width: 220px; float: left; padding: 0; margin: 0; }
form#edit_content .form_element_group input[type=radio] { width: auto; vertical-align: middle; }

#availabletags { width: 80%; margin: 0 10px 60px; }
#availabletags span { display: inline; margin: 0; padding: 0 2px; white-space: nowrap; font-size: .9em; }
.form_error { border-bottom: 2px solid #900; padding: 10px 0; background: #fef; }
.form_error p { color: #900; font-weight: bold; }

.error_block       { margin:2em 0 0; }
.error_block ul li { list-style-image:url("/images/famfamfam/bullet_red.png"); padding-bottom:.75em; }

form label.error   { color:#900; }
form label.error input,
form label.error textarea { border-color:#900; }

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* pagination
*/
hr                                 { clear:both; margin-bottom:20px; color:#eee; }
#pagination                        { clear: both; margin-bottom:40px; text-align:center; }
.paginator                         { padding: 20px 0 0; width: 100%; height: 1.5em; text-align: center !important; }
.pagination *                      { border: solid 1px #bbb !important; font-size: 11px !important; }
.pagination span                   { color: #888; padding: 6px; }
.pagination .current_page          { color:#222; font-size:13px !important; font-weight:bold; border:0 !important; }
.pagination a:link,
.pagination a:visited              { font-size:11px !important; color:#444;padding: 6px; background: none !important; }
.pagination a:hover                { color:#222 !important; background: #fcfcfc !important; }

#hookups a                         { background-position:0 1px !important; border:0 none !important; display:block; font-size:0.9em; height:20px; margin:10px 10px 10px 0; padding:0; text-decoration:none; text-indent:26px; }
#hookups a:hover                   { text-decoration:underline; }
#hookups a.delicious               { background: transparent url('/images/offsite/delicious_16.png') no-repeat; }
#hookups a.digg                    { background: transparent url('/images/offsite/digg_16.png') no-repeat; }
#hookups a.facebook                { background: transparent url('/images/offsite/facebook_16.png') no-repeat; }
#hookups a.flickr                  { background: transparent url('/images/offsite/flickr_16.png') no-repeat; }
#hookups a.lastfm                  { background: transparent url('/images/offsite/lastfm_16.png') no-repeat; }
#hookups a.linkedin                { background: transparent url('/images/offsite/linkedin_16.png') no-repeat; }
#hookups a.twitter                 { background: transparent url('/images/offsite/twitter_16.png') no-repeat; }
#hookups a.rdio                    { background: transparent url('/images/offsite/rdio_16.png') no-repeat; }

/* Error Pages */
.error-page                        { padding-bottom:200px; }
.error-page section                { margin:0 10px; display:block; }
.error-page #error-block           { padding: 60px 0 100px 180px}
.error-page h2                     { margin-bottom:40px; }
.error-page p                      { font-size:24px; }
.error-page p.error-message        { margin:0; font-weight:bold; color:#900; }
.error-page p.apology              { font-size:18px; margin-bottom:80px; }
.error-page .error-message span    { display:block; color:#900; }
.error-page section a              { text-decoration:underline; }
.error-page li                     { margin:0 5px 5px; list-style-image:url("/images/bullet.png"); }