/*
Title: State Creative Group
Version: 1.0
Authors: Matt Lambert
Author URI: http://cardeo.ca
Date: March 17, 2010
*/

/* ##########################
RESET
########################## */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin:0;
 padding:0;
 border:0;
 font-weight:inherit;
 font-style:inherit;
 font-size:100%;
 font-family:inherit;
 vertical-align:baseline;
}

/* ##########################
ALL
########################## */

body {
 font-family: helvetica, arial, verdana, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 line-height: 1.5;
 color: #808080; 
 width: 100%;
 text-align: center;
}

img {
 border: 0;
}

/* ##########################
LAYOUT
########################## */

#container {
 margin: 0 auto;
 text-align: left;
 width: 854px;
}

#header {
 float: left;
 margin-top: 40px;
 padding-bottom: 10px;
 width: 854px;
}

#logo {
 float: left;
}

#nav {
 float: right;
 padding-top: 35px;
}

#content {
 border-top: 1px solid #a7a9ac;
 float: left;
 margin-bottom: 50px;
 padding-top: 30px;
}

#page-title {
 float: left;
 width: 268px;
}

#page-descrip {
 float: right;
 margin-left: 25px;
 width: 561px;
}

#featured-wrapper,
#person-wrapper {
 border-top: 1px solid #a7a9ac;
 float: left;
 padding-top: 5px;
}

.featured,
.person {
 float: left;
 margin-top: 5px;
 padding-bottom: 40px;
}

.project,
.person-image {
 float: left;
 margin-right: 25px;
 width: 268px;
}

.project-last {
 float: left;
 margin: 0;
 width: 268px;
}

.project p, 
.project-last p,
.person-bio p {
 line-height: 1.3;
}

.person-bio {
 float: left;
 width: 561px;
}

#portfolio {
 float: left;
 margin-top: 40px;
}

#footer {
 border-top: 1px solid #a7a9ac;
 clear: both;
 float: left;
 padding-bottom: 80px;
 padding-top: 5px;
 width: 854px;
}

#footer .left {
 float: left;
 width: 400px;
}

#footer .right {
 float: right;
 width: 454px;
}

.left-align {
 margin-left: 0;
}

.right-align {
 margin-right: 0;
}

hr {
 margin-bottom: 10px;
 color: #999;
 width: 100%;
}

/* ##########################
TYPOGRAPHY
########################## */

h1 { 
 font-size: 44px;
 line-height: 48px;
}

h2 {
 color: #231f20;
 font-family: georgia, serif;
 font-size: 24px;
 font-style: italic;
}

h3 {
 font-size: 12px;
}

.project h3,
.project-last h3 {
 font-size: 12px;
 font-weight: bold;
 padding-top: 10px;
}

h3#home-featured {
 font-weight: bold;
 font-size: 14px;
}

h4 {
 font-size: 12px;
}

.project h4,
.project-last h4 {
 margin-top: 5px;
}

h5 {
 font-size: 10px;
}

h6 {
 font-size: 11px;
}

#footer h6 {
 background: url(../images/footer-logo.gif) top left no-repeat;
 float: right;
 line-height: 18px;
 padding-left: 21px;
}

p {
 margin: 0px 0px 10px 0px;
}

p img {
 float: left;
 margin: 0px 10px 10px 0px;
 padding: 0;
}

p img.right {
 float: right;
 margin: 0px 0px 10px 10px;
 padding: 0;
}

strong {
 font-weight: bold;
}

em { 
 font-style: italic;
}

.light-blue {
 color: #69cadc;
 font-weight: bold;
}

.yellow {
 color: #ffcc4e;
}

.welcome {
 color: #69cadc;
 font-size: 30px;
 font-weight: normal;
 line-height: 1.5;
 margin-bottom: 0;
}

/* ##########################
LINKS
########################## */

a, a:link, a:visited {
 color: #808080;
}

a:hover {
 color: #000;

}
#nav a { 
 text-decoration: none;
}

a.georgia-link {
 font-family: georgia, serif;
 font-style: italic;
 font-weight: bold;
}

/* ##########################
LISTS
########################## */

ul,ol {
 margin: 0px 10px 10px 10px;
}

ul { 
 list-style: disc;
}

ol {
 list-style: decimal;
}

li { 
 margin: 0px 8px 0px 0px;
}

#nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

/*
#nav li {
 display: inline;
 margin: 0px 0px 0px 5px;
}
*/

#nav li {
 display: block;
 position: relative;
 float: left;
}

#nav li ul { 
 display: none; 
 background: #69cadc;
 padding: 20px;
}

#nav li ul li {
 padding-bottom: 5px;
}

#nav ul li a {
 text-decoration: none;
 white-space: nowrap;
}

#nav ul li ul li a {
 color: #fff;
}

#nav ul li ul li a:hover {
 color: #000;
}

#nav li:hover ul {
 display: block;
 position: absolute;
}
    
#nav li:hover li {
 float: none;
}