/* =Containers */ .container_14, #logo_wrap {margin-left:auto; margin-right:auto; width:840px;} #nav_wrap {margin-left:auto; margin-right:auto; width:840px; background:#fff;} /* =Grid >> Global */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid {display:inline; float:left; margin-left:10px; margin-right:10px;} /* =Grid >> Children (Alpha ~ First, Omega ~ Last) */ .alpha {margin-left:0;} .omega {margin-right:0;} /* =Grid >> 16 Columns */ .grid_1 {width:40px;} .grid_2 {width:100px;} .grid_3 {width:160px;} .grid_4 {width:220px;} .grid_5 {width:280px;} .grid_6 {width:340px;} .grid_7 {width:400px;} .grid_8 {width:460px;} .grid_9 {width:520px;} .grid_10 {width:580px;} .grid_11 {width:640px;} .grid_12 {width:700px;} .grid_13 {width:760px;} .grid_14 {width:820px;} .prefix_1 {padding-left:60px;} .prefix_2 {padding-left:120px;} .prefix_3 {padding-left:180px;} .prefix_4 {padding-left:240px;} .prefix_5 {padding-left:300px;} .prefix_6 {padding-left:360px;} .prefix_7 {padding-left:420px;} .prefix_8 {padding-left:480px;} .prefix_9 {padding-left:540px;} .prefix_10 {padding-left:600px;} .prefix_11 {padding-left:660px;} .prefix_12 {padding-left:720px;} .prefix_13 {padding-left:780px;} .suffix_1 {padding-right:60px;} .suffix_2 {padding-right:120px;} .suffix_3 {padding-right:180px;} .suffix_4 {padding-right:240px;} .suffix_5 {padding-right:300px;} .suffix_6 {padding-right:360px;} .suffix_7 {padding-right:420px;} .suffix_8 {padding-right:480px;} .suffix_9 {padding-right:540px;} .suffix_10 {padding-right:600px;} .suffix_11 {padding-right:660px;} .suffix_12 {padding-right:720px;} .suffix_13 {padding-right:780px;} #logo {width:280px; padding-left:60px;} #quote {width:340px; padding-left:60px; padding-right:60px;} #nav_wrap, #hello_ibg, #meet_team, #recent_work, #contact, #footer_inside {width:700px; padding-left:60px; padding-right:60px;} #recent_work_column_lt, #recent_work_column_rt {width:280px; padding-left:60px; padding-right:60px;} /* =Clear Floated Elements */ /* http://sonspring.com/journal/clearing-floats */ .clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;} /* http://www.positioniseverything.net/easyclearing.html */ .clearfix:after {clear: both; content: '.'; display: block; visibility: hidden; height: 0;} .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a:link, a:visited {color:#0063dc; text-decoration:none;} a:hover {color:#0063dc; text-decoration:underline;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse; border-spacing: 0;} /* =Basic HTML --------------------------------------------------------------------------------*/ body {font: 13px/1.5 Helvetica, Arial, sans-serif; background:#4b2000;} a:focus {outline: 1px dotted invert;} hr {border:0 #ccc solid; border-top-width:1px; clear:both; height:0} /* =Headings --------------------------------------------------------------------------------*/ h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} /* =Spacing --------------------------------------------------------------------------------*/ ol {list-style: decimal;} ul {list-style: square;} li {margin-left: 30px;} p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {margin-bottom:5px;} #header {background:url(/images/bg_header.png) repeat-x #fff; padding-top:60px;} #logo {width:280px; padding-left:60px; display:inline; float:left; margin-left:10px; margin-right:10px;} #quote {padding-top:34px;} #nav_wrap_wrap {background-color:#fff; height:56px;} #nav_wrap {background:#fff; overflow:auto;} ul#nav {margin:0; padding:0; list-style:none; position:absolute; top:180px;} ul#nav li {float:left; margin:0 5px 0 0; padding:0; width:117px; height:39px;} ul#nav li a {background-image:url(/images/nav.png); margin:0; padding:0; display:block;} ul#nav li#branding a {background-position:0px top;} ul#nav li#print a {background-position:349px top;} ul#nav li#web a {background-position:233px top;} ul#nav li#contact a {background-position:117px top;} ul#nav li#branding a:hover {background-position:0px 112px;} ul#nav li#print a:hover {background-position:349px 112px;} ul#nav li#web a:hover {background-position:233px 112px;} ul#nav li#contact a:hover {background-position:117px 112px;} ul#nav li#branding a.current {background-position:0px 56px;} ul#nav li#print a.current {background-position:349px 56px;} ul#nav li#web a.current {background-position:233px 56px;} ul#nav li#contact a.current {background-position:117px 56px;} .sifr_border {background:url(/images/bg_dotted_border.png) repeat-x 0 2.5em; padding-bottom:10px; overflow:auto; margin-top:40px;} #content {background:#eeede5; border-top:1px solid #dfded4; color:#594c3e; padding-bottom:40px;} #content #hello_ibg h5 {margin:0; font-weight:normal;} #content h5 {} #content #staff {margin:0;} #content #staff a {background:#fff; border:1px solid #d7dbd1; padding:4px; display:inline-block; margin-right:15px;} #content #staff a:hover {background:#bbbbb7;} #recent_work_column_lt .nine_border a, #recent_work_column_rt .nine_border a {padding:9px; margin:0; width:260px; height:140px; background:#fff; border:1px solid #bbbbb7; display:block;} #recent_work_column_lt .nine_border a:hover, #recent_work_column_rt .nine_border a:hover {background:#bbbbb7;} #recent_work_wrap h5 {color:#659486; margin:20px 0 0 0;} #recent_work_wrap p {} #recent_work_column_lt a, #recent_work_column_rt a {color:#659486; text-decoration:none;} #recent_work_column_lt a:hover, #recent_work_column_rt a:hover {color:#659486; text-decoration:underline;} .portfolio_nine_border {height:200px; overflow:hidden;} .portfolio_nine_border a {display:block; background:#fff; width:380px;} .portfolio_nine_border img {border:9px solid #fff; outline:1px solid #bbbbb7; margin:1px 0 10px 1px;} .portfolio_title {margin:0; color:#659486;} #footer {background:url(/images/wood_pattern.jpg); border-top:10px solid #19819f; color:#fff; text-align:left; padding-top:30px;} #footer p {} #footer ul#footer_nav {list-style-type:none; margin:10px 0 0 0; padding:0;} #footer ul#footer_nav li {list-style-type:none; float:left; margin:0; padding:0 20px 0 0;} #footer ul#footer_nav li a {color:#fe8903;} #footer ul#footer_nav li a:hover {color:#fe8903; text-decoration:underline;} #footer p#chamber {color:#1cb6e2;} #footer p#chamber img {vertical-align:middle; margin-left:5px;} #footer_designers_wrap {width:270px; margin-left:20px; display:inline; float:left; margin-left:10px; margin-right:10px;} #footer ul#footer_designers {list-style-type:none; margin:0; padding:0;} #footer ul#footer_designers li {list-style-type:none; float:left; margin:0 10px 0 0; padding:0;} #footer ul#footer_designers li a {padding:3px; background:#fff; display:block; border:1px solid #bbbbb7;} #footer ul#footer_designers li a:hover {background:#bbbbb7; } #footer p#copyright {clear:both; color:#659486; padding-top:7px;} /* Personal Pages */ p.author_category {font-size:.9em; padding-bottom:15px; border-bottom:1px solid #bbbbb7;} .comment_odd {border-bottom:1px solid #bbbbb7; padding-top:15px;} .comment_even {border-bottom:1px solid #bbbbb7; padding-top:15px;} .comment_even p, .comment_odd p {margin-bottom:0;} .comment_about {font-size:.8em; margin:0; padding:0; text-align:right;} #comment_form {padding-top:20px;} img.avatar {border:4px solid #fff; float:right; margin:0 0 10px 10px;} .vimeoBadge {margin:20px 0; padding:10px 0 10px 0; font:normal 11px Helvetica, Arial;} .vimeoBadge img {border:0;} .vimeoBadge a:link, a:visited, a:active {color:#3A75C4; text-decoration:none;} .vimeoBadge a:hover {color:#0cf;} .vimeoBadge #vimeo_badge_logo {display:none;} .vimeoBadge .credit { font:normal 11px Helvetica, Arial;} .vimeoBadge .clip {padding:0; margin:15px 0px 0px 0px; line-height:0;} .vimeoBadge .caption {font:normal 11px Helvetica, Arial; width:160px; margin-top:10px;} h3#blog {margin:40px 0 20px 0;} #blog_title {} span#blog_date {font-weight:normal; font-size:12px; color:#659486; display:block;} #profile_image {padding:10px; width:190px; margin:0; background:#fff; border:1px solid #bbbbb7;} #sidebar {padding-top:70px; width:210px; margin-left:20px;} /* Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started! */ #flickr_badge_wrapper {padding:10px 0 10px 0; margin:20px 0;} #flickr_badge_wrapper img#flickr {margin-bottom:10px;} .flickr_badge_image a {margin:0 10px 10px 0; border:1px solid #bbbbb7; display:block; background:#fff; float:left;} .flickr_badge_image a:hover {background:#bbbbb7;} .flickr_badge_image img {margin:5px; background:#fff;} #twitter_div {} #twitter_div img {margin-bottom:10px;} ul#twitter_update_list {list-style-type:none; margin:0; padding:3px;} ul#twitter_update_list li {margin:0; padding:0; font-size:.9em; text-align:left;} ul#twitter_update_list li span {display:block;} ul#twitter_update_list li a {display:block; margin-bottom:15px; color:#0063dc; text-decoration:none;} ul#twitter_update_list li a:hover {color:#0063dc; text-decoration:underline;} /* Overlays */ #triggers {} #triggers img {} #triggers a.active img {outline:1px solid #000; z-index:9999; position:relative;} .simple_overlay {display:none; z-index:10000; background-color:#333; width:675px; min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000;} .simple_overlay .close {background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px;} #img {border:1px solid #666;} .next, .prev {position:absolute; top:40%; border:1px solid #666; cursor:pointer; display:block; padding:10px 20px; color:#fff; font-size:11px; -moz-border-radius:5px; -webkit-border-radius:5px;} .prev {left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0;} .next {right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0;} .next:hover, .prev:hover {text-decoration:underline; background-color:#000;} .disabled {visibility:hidden;} .info {position:absolute; bottom:0; left:0; padding:10px 15px; color:#fff; font-size:11px; border-top:1px solid #666;} .info strong {display:block;} .progress {position:absolute; top:45%; left:50%; display:none;} .next, .prev, .info {background:#333 !important; background:rgba(0, 0, 0, 0.6) url(http://static.flowplayer.org/img/global/gradient/h80.png) repeat-x;} /* Contact */ #contact_content {background:#dfded4; padding:22px; margin-top:22px;} label {color:#796956; text-transform:uppercase; font-size:.9em; display:block; clear:both;} #contact input, #contact textarea, #contact select {margin-bottom:15px; padding:10px; width:400px; border:0; font-size:1.2em; font-family:Arial, sans-serif;} #contact select {width:214px; padding:9px 10px;} #contact .checkbox {width:16px; float:left; clear:both; text-align:left; margin:0 10px 0 0;} #contact input#submit {width:150px; height:42px; padding:0; background:#c0bfb5; display:block;} #contact input#submit:hover {background-color:#659486;} #contact_contact {float:left; width:460px;} #sidebar_rfp {float:left; width:180px; margin-top:-22px;} #sidebar_rfp a.button {display:block; padding:16px; text-transform:uppercase; background:#c0bfb5; font-size:11px; color:#fff; text-align:center; margin-top:20px;} #sidebar_rfp a.button:hover {background:#1cb6e2;}