/*
Theme Name: Spiro
Theme URI: http://argraffdesign.com
Description: Spirograph theme
Version: 1.0
Author: Argraff Design
Author URI: http://argraffdesign.com
Tags: spiro, clean
*/

/* UNIVERSAL */
body {background: #0c004e url(images/body_bkgrd.jpg) repeat-y 50% 0; color: #2a1b12; width: 960px; margin: 0 auto; padding: 0; position: relative; font-size: 75%; line-height: 1.4em;  font-family: verdana, tahoma, arial, sans-serif;}
html>body {font-size: 12px;}

h2, h3, h4, p, ol, ul, dl {padding: 0 1em;}
h2 {font-size: 40px; margin: 0;}
h3 {font-size: 18px;}
.alt-h3 {font-size: 14px;}
p {font-size:1em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em;}
h2 + p {font-size: 120%;}
ul, ol {margin: 0 24px; padding: 0; list-style: disc inside; line-height: 1.5em;}

/* LINKS */
p a {color: #166593; text-decoration: none; border-bottom: 1px dotted #166593;}
p a:hover {color: #166593; text-decoration: none; border-bottom: none;}
a.alt-border {color: #166593; border-bottom: none;}
a.alt-border img:hover {border: 2px solid #0c004e;}

#container {background: #d3e1ea; float: left; margin: -2em auto; padding: 0;}

/* BRANDING */
#branding {width: 960px; height: 230px; background: #d3e1ea url(images/branding.png) no-repeat 50% 50%;}
#branding h1 a {text-indent: -9999px; margin: 0; padding: 0; display: block; width: 960px; height: 230px; border: none;}

/* CONTENT */
#content {background: transparent url(images/background.png) repeat-y 50% 0; float: left; width: 332px; margin: 3px 6px 0 6px; border-left: 308px solid #d3e1ea; border-right: 308px solid #d3e1ea;}
/* name pages 'double' to enable the two col span illusion */
#content.double {background: transparent url(images/background_double.png) repeat-y 50% 0;}
.onecolpic {margin: 0 6px;}

/* COLUMN CONTROLS */
.col {margin: 6px;}
.one{float:left; width:308px; margin-left:-308px; position:relative;}
.two{float:left; width:308px; margin-right:-628px;}
.three{float:right; width:308px; margin-right:-308px; position:relative;}
.onedouble {float: left; width: 628px; margin-left: -308px; position: relative;}
.twodouble {float: left; width: 628px; margin-right: -628px;}

/* ABOUT US */
.bio {margin: 0 3px; list-style: none;}
.biopic {border: 3px solid #166593; float: left; margin: 0 6px;}

/* PORTFOLIO */
.portfolio-return {}
.panel {background: red;}
a img.ngg-singlepic {border: 0;}

/* QUOTE */
blockquote .quotescollection {}
blockquote p {color: #0c004e; background: url(images/openquote.png) no-repeat 0 0; padding-top: 0.5em; padding-left: 2.25em;}
q {font-size: 160%; line-height: 2em; background: url(images/closequote.png) no-repeat 100% 100%; padding-top: 0.5em; padding-right: 1.5em; font-weight: bold;}
cite { font-style: italic;}

/* WORK STATUS */
#workstatus {background: #fc354c; -moz-border-radius: 12px; -webkit-border-radius: 12px; margin: -1em 6px 2em 6px; padding: 0.5em;}
#workstatus h2 {width: 200px; height: 30px; background: url(images/workstatus.png) no-repeat 50% 0; text-indent: -9999px;}
#workstatus h3 {color: #fcf7c5; text-align: center; font-size: larger;}
#workstatus p {font-weight: bold; font-size: 80%;}

/* NEWS */
.NewsSummary {margin: 1em; padding: 0 1em; border-bottom: 1px solid #574f84;}
.NewsSummary h3 {font-size: 14px; background: url(images/news_spiro.jpg) no-repeat 0 50%; text-indent: 35px; padding: 0.5em 0;}
.NewsSummaryAuthor {font-style: italic;  text-align: right; /*margin: -0.5em 0 -0.5em 3em;*/}

/* CONTACT FORM */
#gb_form_div form {padding-bottom: 12px; margin-left: -6px; width: 290px;}
#gb_form_div h2 {font-size: 150%;}
#results {margin: 1em;}
#gb_form_div fieldset {border: 0;}
legend {display: none;}
checkbox {border: 0;}
#name, #url, #email, #phone, #spamq, textarea {width: 270px; border: 0;}
.error {color: #fc354c; font-weight: bold;}
.whythis a {color: #166593;}

/* FOOTER */
#site-info {width: 948px; clear: both; position: relative; color: #166593; background: #d3e1ea url(images/footer_bg.jpg) no-repeat 50% 100%; margin: 6px; padding: 6px 0; border-top: 1px dashed #574f84;}
.vcard {margin: 6px; position: relative; top: 1em; left: 0;}

.vcard-main {width: 308px; margin: 6px; float: right; text-align: right;}
.tel {width: 308px; height: 40px; background: url(images/phone.png) no-repeat;}
.tel abbr {display: block; width: 0; height: 0; overflow: hidden;}
.email {width: 308px; height: 20px; background: url(images/email.png) no-repeat 80% 0; margin-top: -1em;}
.email a {display: block; width: 0; height: 0; overflow: hidden;} 

.vcard-content {background: #faf5c4; width: 284px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 1em 1em 4.5em 1em;}

#search {width: 308px; position: relative; top: -3.5em; margin: 12px; border: 2px;}

/* MAIN NAVIGATION */
#nav-main {position: absolute; top: 1em; right: 2em; background: #faf5c4; -moz-border-radius: 6px; -webkit-border-radius: 6px; list-style-type: none; padding: 1em 1em 4.5em 1em;}
#nav-main li {display: inline; margin-right: 1em; font-weight: bold;}
#nav-main li:last-child {margin-right: 0;}
#nav-main a {color: #166593; text-decoration: none; border: none;}
#nav-main a:hover {color: #2a1b12; text-decoration: none;}

/* SUB-NAVIGATION */
#nav-sub {position: absolute; top: 5em; right: 2em; background: transparent; color: #0c004e; list-style-type: none;}
#nav-sub li {display: inline; margin-right: 0.75em;}
#nav-sub li a {color: #0c004e; text-decoration: underline; border: none;}
#nav-sub a:hover {color: #0c004e; text-decoration: none;}

/* 404 Error */

h2.four04 {height: 300px; width: 600px; display: block; text-indent: -9999px; background: url(images/four04.png) no-repeat 0 0;}
h2.not-found {color: #0c004e; font-size: 500%; text-align: center;}

/* ACCESSIBILITY */
.accessibility, hr, .hidden {
   position: absolute;
   top: -999em;
   left: -999em;
}