/* ----------------------------------------------------------
File: blink-design.css
Site: www.blink-design.net
Description: All site styles
Author: Simon Smith - http://www.blink-design.net
Version: 1.0
--------------------------------------------------------------

/* Imports ------------------------------------------*/ 
@import url(resets.css);

/* Hide things ------------------------------------------*/ 
#accessibility, 
#change span,
legend span, 
#swatch li span, 
#gallery li img,
#sidebar p.mini-rss a span,
h2.site-nav
 { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden; }

/* Rounded edges ------------------------------------------*/ 
#sidebar p.twitter,
#sidebar dd,
.post p.date,
#comments #user-comments li, 
#comments #user-comments li.comment-number p,
#comments #user-comments li p.comment-user,
#employment h4 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

/* Body ------------------------------------------*/ 
body {
background-color: #fff;
text-align: left;
font: 62.5% Helvetica, Arial, sans-serif;
color: #999;
padding: 55px 0 0 15px;
min-width: 990px;
max-width: 1650px;
}

a { border-bottom: 1px dotted; padding-bottom: 1px; }
a:hover { border-style: solid; }

#content h2,
#content h3,
#sidebar,
#footer,
#nav,
#portfolio-list dt,
.contact {
text-transform: lowercase;
}

/* Colour bars ------------------------------------------*/
.strip {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 100%;
background-repeat: repeat-x;
background-image: url(../images/site/site-bars.png);
}

#pink .strip { background-position: 0 0;  }
#blue .strip { background-position: 0 -20px; }
#green .strip { background-position: 0 -40px; }
#red .strip { background-position: 0 -60px; }

/* Header ------------------------------------------*/ 
#header { margin: 0 0 0 70px; }

#header h1 {
width: 516px;
height: 121px;
text-indent: -9999em;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../images/site/hdr-new.png);
}

#pink #header h1 { background-position: 0 0; }
#blue #header h1 { background-position: 0 -121px; }
#green #header h1 { background-position: 0 -242px; }
#red #header h1 { background-position: 0 -363px; }

/* Content ------------------------------------------*/ 
#content { 
font-size: 1.8em;
margin: 50px 0 0 162px;
padding: 0 35px 0 0;
float: left; 
width: 55%;
}

#content #summary li { margin: 0 0 30px; }
#content #summary + h2 { margin: 45px 0 20px;}
#content #things { margin: 0 0 35px 16px; }
#content #summary span { color: #fff; padding: 1px 3px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }


#content #things li {
list-style-type: square;
margin: 0 0 10px 0;
}

#content h2 {
font-size: 1.6em;
margin: -9px 0 0 0;
overflow: auto;
}

#content h3 {
font-size: 1.2em;
margin: 0 0 15px 0;
}

/* 404 */
.error h2 { padding: 0 0 25px 0; }
.error p { line-height: 1.4; margin: 0 0 10px 0; }

/* Common Colours ------------------------------------------*/ 

/* Fonts */
#pink h2,
#pink h3,
#pink #nav li.current a,
#pink #nav a:hover,
#pink #gallery-menu a:hover,
#pink #gallery-menu a.wactive,
#pink #sidebar #toolbox dt:hover,
#pink #sidebar #twitter dt,
#pink .comment-form li label span,
#pink p.instruct span,
#pink a,
#pink #portfolio-list dt.hover { 
color: #e860cd;
}

#blue h2,
#blue h3,
#blue #nav li.current a,
#blue #nav a:hover,
#blue #gallery-menu a:hover,
#blue #gallery-menu a.wactive,
#blue #sidebar #toolbox dt:hover,
#blue #sidebar #twitter dt,
#blue .comment-form li label span,
#blue p.instruct span,
#blue a,
#blue #portfolio-list dt.hover  { 
color: #6db5e3;
}

#green h2,
#green h3,
#green #nav li.current a,
#green #nav a:hover,
#green #gallery-menu a:hover,
#green #gallery-menu a.wactive,
#green #sidebar #toolbox dt:hover,
#green #sidebar #twitter dt,
#green .comment-form li label span,
#green p.instruct span,
#green a,
#green #portfolio-list dt.hover  { 
color: #5cb45a;
}

#red h2,
#red h3,
#red #nav li.current a,
#red #nav a:hover,
#red #gallery-menu a:hover,
#red #gallery-menu a.wactive,
#red #sidebar #toolbox dt:hover,
#red #sidebar #twitter dt,
#red .comment-form li label span,
#red p.instruct span,
#red a,
#red #portfolio-list dt.hover  { 
color: #dd5656;
}

/* Borders */
#pink #search input[type='text'],
#pink #sidebar,
#pink .cv h3,
#pink .comment-form input[type='text'], 
#pink .comment-form textarea { 
border-color: #e860cd;
}

#blue #search input[type='text'],
#blue #sidebar,
#blue .cv h3,
#blue .comment-form input[type='text'], 
#blue .comment-form textarea { 
border-color: #6db5e3;
}

#green #search input[type='text'],
#green #sidebar,
#green .cv h3,
#green .comment-form input[type='text'], 
#green .comment-form textarea { 
border-color: #5cb45a;
}

#red #search input[type='text'],
#red #sidebar,
#red .cv h3,
#red .comment-form input[type='text'], 
#red .comment-form textarea  {
border-color: #dd5656;
}

/* Backgrounds */
#pink #gallery-menu,
#pink input[type='submit'],
#pink .results .marker,
#pink p.date,
#pink #comments #user-comments li.author p.comment-user,
#pink #content #summary span {
background: #e860cd;
}

#blue #gallery-menu,
#blue input[type='submit'],
#blue .results .marker,
#blue p.date,
#blue #comments #user-comments li.author p.comment-user,
#blue #content #summary span { 
background: #6db5e3;
}

#green #gallery-menu,
#green input[type='submit'],
#green .results .marker,
#green p.date,
#green #comments #user-comments li.author p.comment-user,
#green #content #summary span {
background: #5cb45a;
}

#red #gallery-menu,
#red input[type='submit'],
#red .results .marker,
#red p.date,
#red #comments #user-comments li.author p.comment-user,
#red #content #summary span { 
background: #dd5656;
}

/* Search ------------------------------------------*/ 
#search {
position: absolute;
top: 40px;
left: 600px;
}

#search label { font-size: 1.2em; }

#search input[type='text'] {
border-style: solid;
border-width: 1px;
padding: 3px;
color: #777;
width: 180px;
margin: 0 1px 0 0;
}

#search input[type='submit'] {
border: none;
padding: 3px;
color: #fff;
cursor: pointer;
}

*:first-child+html #search input[type='submit'] { padding: 2px; }

input[type='submit'],
#search input[type='text'] {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/* Results */
.results h2 { padding: 0 0 25px 0; }
.results dl { margin: 15px 0; }
.results dt { color: #666; }
.results h2 + p { margin: 0 0 40px; }

.results dd { 
margin: 7px 0 12px;
padding: 0 0 25px;
border-bottom: 1px dotted #ccc;
line-height: 1.4;
}

.results .marker { color: #fff; padding: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

/* Sidebar ------------------------------------------*/ 
#sidebar {
position: relative;
float: left;
width: 230px;
font-size: 2em;
text-align: right;
padding: 0 12px 0 0;
border-style: solid;
border-right-width: 2px;
}

#sidebar h2 { margin: 0 0 12px 0; }
#sidebar h2 ~ h2 { margin-top: 30px; }

#sidebar dd {
line-height: 1.4;
color: #888;
padding: 5px;
background: #f0f0f0;
}

/* Toolbox */
#sidebar #toolbox { margin: 0 0 10px 0; }

#sidebar #toolbox dt { 
cursor: pointer; 
margin: 0 -12px 0 0; 
padding: 0 12px 0 0;
}

#sidebar #toolbox dd {
text-align: left;
font-size: 0.6em;
margin: 2px 0 8px 0;
}

#sidebar #toolbox dt:hover {
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../images/site/toolbox-arrow.png);
}

#pink #sidebar #toolbox dt:hover { background-position: right 10px; }
#blue #sidebar #toolbox dt:hover { background-position: right -14px; }
#green #sidebar #toolbox dt:hover { background-position: right -38px; }
#red #sidebar #toolbox dt:hover { background-position: right -62px; }

/* Latest blog */
#sidebar .latest-blog dt { font-size: 0.8em; }
#sidebar .latest-blog dd { background: none; padding: 4px 0 12px; color: #999; font-size: 0.65em;  } 

/* Twitter */
#sidebar h2[title='Twitter'] {
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../images/site/twitter-birds.png);
margin-top: 20px;
}

#pink #sidebar h2[title='Twitter'] { background-position: 144px 4px; }
#blue #sidebar h2[title='Twitter'] { background-position: 144px -24px; }
#green #sidebar h2[title='Twitter'] { background-position: 144px -52px; }
#red #sidebar h2[title='Twitter'] { background-position: 144px -80px; }

/* Recent Work */
#sidebar li { margin: 0 0 10px 0;}
#sidebar img { margin: 0 0 8px 0; }
#sidebar li a, #sidebar li a:hover { border: none; }

/* Nav ------------------------------------------*/ 
#nav {
position: absolute;
top: 199px;
left: 20px;
font-size: 1.8em;
text-align: right;
width: 80px;
}

#nav li { 
padding: 0 14px 0 0;
margin: 0 0 6px;
}

#nav a { color: #999; border: none; }
#nav a:hover { border: none; }

html > body #nav li.current {
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../images/site/nav-arrow.png);
}

#pink #nav li.current { background-position: right 9px; }
#blue #nav li.current { background-position: right -7px; }
#green #nav li.current { background-position: right -23px; }
#red #nav li.current { background-position: right -39px; }

/* Swatch ------------------------------------------*/ 
#swatch {
position: absolute;
top: -87px;
right: -14px;
width: 35px;
}

#swatch li {
margin: 2px;
height: 9px;
width: 8px;
float: left;
cursor: pointer;
}

#swatch .blue { background: transparent url(../images/site/blue-swatch.png) no-repeat top left; }
#swatch .red { background: transparent url(../images/site/red-swatch.png) no-repeat top left; }
#swatch .green { background: transparent url(../images/site/green-swatch.png) no-repeat top left; }
#swatch .pink { background: transparent url(../images/site/pink-swatch.png) no-repeat top left; }

#change { 
background: transparent url(../images/site/change.png) no-repeat top left;
width: 66px;
height: 17px;
font-size: 0.9em;
position: absolute;
top: -82px;
right: 26px;
margin: 0 !important;
}

/* Portfolios ------------------------------------------*/ 
#portfolio-list { margin: 30px 0 0 0; }
#portfolio-list dt { margin: 0 0 3px 0; }
#portfolio-list dd { margin: 0 0 25px 0; }
#portfolio-list a, #portfolio-list a:hover { border: none; }

.portfolio h2 { padding: 0 0 15px 0; }

/* Portfolio pages ------------------------------------------*/ 
.site dl.glance { line-height: 1.3; margin-top: -13px; }

.site dl.glance dt{
float: left;
width: 100px;
color: #666;
padding-top: 10px;
}

.site dl.glance dd {
margin: 0 0 0 100px;
padding-top: 10px;
}

.site p {
line-height: 1.4;
margin-bottom: 17px;
text-transform: none;
}

.site h3 { padding-top: 30px; }
.site ul { margin: 0 0 0 16px; }

.site li {
margin: 0 0 5px 0;
list-style-type: square;
}

/* Gallery */
#gallery-menu { 
margin: 7px 0 0 0;
padding: 3px 0 2px 3px;
width: 61px;
}

#pink #gallery-menu { background: #e860cd; }
#blue #gallery-menu { background: #6db5e3; }
#green #gallery-menu { background: #5cb45a; }
#red #gallery-menu { background: #dd5656; }

#gallery-menu a { border: none; color: #fff; padding: 0 3px; }

#gallery-menu a:hover, #gallery-menu a.wactive { 
border: none;
background: #fff;
}

#gallery { margin: 20px 0 0 0; }

#gallery li {
background-color: transparent;
background-repeat: no-repeat;
background-position: top left;
margin-bottom: 15px;
list-style-type: none;
}

#gallery li span {
display: block;
height: 330px;
width: 520px;
}

html > body #gallery li span { background: transparent url(../images/site/gallery-corners.png) no-repeat top left; }

/* CV ------------------------------------------*/ 
.cv h3 {
width: 80%;
border-bottom: 1px dotted;
padding-top: 30px;
}

.cv p { margin: 10px 0 0 0; line-height: 1.4; }

/* Vitals */
.cv dl.vitals { line-height: 1.5; }

.cv dl.vitals dt{
float: left;
width: 150px;
color: #666;
}

.cv dl.vitals dd { margin: 0 0 0 150px; }

/* Employment */
.cv dl.employment dt {
color: #666;
margin: 0 0 10px;
}

.cv dl.employment dd { margin: 0 0 8px; line-height: 1.4; text-transform: none; }

.cv dl.employment dd + dd {
margin: 0 0 25px;
font-size: 0.8em;
}

/* Info */
.cv dl.info dt {
color: #888;
margin: 0 0 15px;
font-weight: bold;
}

.cv dl.info dd { margin: 0 0 25px; line-height: 1.4; }

.cv h4 { font-size: 0.8em; }
.cv h4 strong { font-size: 1.2em;}

#employment > li { margin: 0 0 30px; }

#employment h4 { 
margin: 0 0 20px; 
background: #f4f4f4; 
padding: 5px;
}

#employment li li {
margin: 0 0 14px 0;
line-height: 1.3;
}

/* Contact ------------------------------------------*/ 
dl.contact { margin-top: 30px; }
dl.contact dt { color: #666; }
dl.contact dd{ margin: 0 0 18px 0; }

/* About ------------------------------------------*/ 
.about .img {
position: absolute;
top: 55px;
left: 0;
width: 150px;
}

.about { position: relative; }
.about .img li { margin-bottom: 8px; }
.about h2 { padding-bottom: 25px; }
.about h3 { margin: 5px 0 18px 165px !important; }

.about p {
line-height: 1.3;
margin: 0 0 17px 165px;
text-transform: none;
}

/* Blog page ------------------------------------------*/ 
.blog h2 { padding: 0 0 10px; }
.blog { position: relative; }
#blog-posts { margin: 35px 0 0; }
#blog-posts h3 { margin: 0; }

.blog .rss a {
display: block;
text-indent: -9999em;
background: url(../images/site/small-rss.png) no-repeat 0 0;
height: 13px;
width: 13px;
position: absolute;
top: 5px;
left: 65px;
border: none;
}

.blog .rss a:hover { border: none; }

.post ol {
list-style-type: decimal;
margin: 30px 0 30px 35px;
}

.post code ol {
margin: 0 0 0 35px;
line-height: 1.65;
}

.post ul {
list-style-type: square;
margin: 30px 0 30px 35px;
}

.post ul li { margin: 0 0 10px; }
#comments li { list-style-type: none; }

.post pre {
background:transparent url(../images/site/code_bg.jpg) repeat scroll 0 0;
font-size: 12px;
font-family: 'Courier New', Arial, Tahoma;
line-height: 19.65px;
margin: 8px 20px 30px 0;
overflow: auto;
width: 100%;
color: #444;
}

p.codeswitch { 
background: transparent url(../images/site/page_white_code.png) no-repeat center left;
font-size: 0.65em;
padding: 2px 0 2px 21px;
margin: 0 !important;
}

#content textarea.select { 
width: 100%; 
height: 220px; 
line-height: 20px; 
margin: 10px 0 20px 0; 
font-size: 12px; 
display: none;
}

.post p code { font-family: 'Courier New', Arial, Tahoma; color: navy; }

*:first-child+html #content textarea { margin-left: -160px; }

#blog-posts .posted-date { 
font-size: 0.85em;
margin: 0 0 15px;
}

#blog-posts h3 { font-weight: bold; }
#blog-posts h3 a, #blog-posts h3 a:hover { border: none; }

#blog-posts li { 
margin: 0 0 20px; 
padding: 0 0 25px;
border-bottom: 1px dotted #999;
}

#blog-posts li.paginate { border: none; }
#blog-posts li.paginate span { margin: 0 0 0 20px; }
#blog-posts li p { line-height: 1.3; }
#blog-posts li p + p { margin: 7px 0 0; text-transform: none; }
#blog-posts li p.post-info { margin: 35px 0 0; text-transform: lowercase; }
#blog-posts li p.post-info a { margin: 0 2px 0 0; }

/* Blog single post ------------------------------------------*/ 
.post h2 { padding: 0 0 30px; }
.post p img { border: 1px solid #888; }
.post p.img { text-align: center; margin: 12px 0; }

.post p {
margin: 0 0 20px 0;
line-height: 1.5;
text-transform: none;
}

.post h2 + p { font-style: italic; }
.post p.categories { text-transform: lowercase; }

.post p.date {
padding: 1px 6px 3px;
color: #fff;
text-transform: lowercase;
margin: 60px 0 15px 0;
}

#jump-links { 
overflow: auto; 
margin: 20px 0 35px;
border-top: 1px dotted #999; 
color: #666;
padding: 15px 0 0;
}
#jump-links li { padding: 2px; }
#jump-links li.next { float: right; }
#jump-links li.previous { float: left; }

/* Comments */
#comments h2 { font-size: 1.4em; margin: 0; }
#comments #user-comments { margin: 0 0 35px; }

#comments #user-comments li {
background: #f0f0f0;
color: #888; 
padding: 4px 8px;
margin: 0 0 15px 0;
}

#comments #user-comments li p {
margin: 0 0 15px 0;
line-height: 1.4;
}

#comments #user-comments li p.comment-user {
margin: 35px 0 4px 0;
text-transform: lowercase;
background: #fff;
padding: 2px 6px;
}

/* Author */
#comments #user-comments li.author p.comment-user { color: #fff; }
#comments #user-comments li.author p.comment-user a { color: #fff; }

#comments #user-comments li.comment-number {
background: none;
margin: 35px 0 0;
}

#comments #user-comments li.comment-number p {
margin: 0 auto;
width: 170px;
background: #f0f0f0;
text-align: center;
padding: 2px 0;
}

/* Comment Form */
.comment-form li { margin: 0 0 10px; }

.comment-form li label {
float: left;
display: block;
width: 80px;
}

.comment-form input[type='text'] {
border-style: solid;
border-width: 1px;
padding: 3px;
color: #777;
width: 350px;
margin: 0 1px 0 0;
}

.comment-form textarea {
width: 425px;
height: 180px;
font-size: 1em;
color: #777;
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 15px 0 0;
line-height: 1.4;
}

.comment-form li.captcha {
overflow: auto;
margin: 25px 0 0;
}

.comment-form li.captcha p { margin: 0 0 10px; font-size: 0.85em; }

.comment-form li.captcha img {
float: left;
display: block;
margin: 0 10px 0 0;
}

.comment-form input[name='captcha'] {
width: 100px;
height: 19px;
padding: 6px 3px 3px;
}

.comment-form input[type='submit'] {
border: none;
padding: 3px;
color: #fff;
cursor: pointer;
font-size: 0.9em;
margin: 20px 0 0;
}

/* Image preview */
#preview {
position: absolute;
border: none;
background: transparent url(../images/site/opacity-bg.png) repeat 0 0;
padding: 5px;
display: none;
color: #fff;
font-size: 1.2em;
}

.post a.preview, .post a.preview:hover { border: none; }

/* Web standards article ------------------------*/ 
.standards { text-transform: none; }
.standards p { margin: 0 0 16px; line-height: 1.4; }
.standards h3 { padding: 30px 0 0; }
.standards p.download { margin: 10px 0 35px; }
.standards li { margin: 0 0 10px; }

/* Footer ------------------------------------------*/ 
#footer {
color: #999;
clear: both;
font-size: 1.2em;
margin: 0 0 0 162px;
padding: 95px 0 20px 0;
}