/*  
Theme Name: Ratio7
Description: Custom Blog Theme
Version: 1.0
Author: Steve Hill
Author URI: http://www.ratio7.com
Tags: ratio7

Index:
(Y) 1.  base styles
(Y) 2.  layout elements
(Y) 3.  header
(Y) 4.  features
(Y) 5.  content
(Y) 6.  definition list (dl) styles
(Y) 7.  table styles
(Y) 8.  form styles
(Y) 9.  homepage styles
(Y) 10. who are we styles
(Y) 11. what we do styles
(Y) 12. our work styles
(Y) 13. contact us styles
(Y) 14. social bookmarking
(Y) 15. footer
(Y) 16. miscellaneous styles
*/

/* 1. base styles
---------------------------------------------------------- */

body {
 margin: 0;
 padding: 0;
 font-family: Verdana, Arial, sans-serif;
 font-size: 75%;
 line-height: 1.4em;
 background: #F5F5F6; }

div, ul, li {
 margin: 0;
 padding: 0; }

p {
 margin: 0;
 padding: 0 0 1.4em 0; }

a:link, a:visited {
 text-decoration: underline;
 color: #000; }

a:hover {
 color: #CC001A; }

blockquote {
 display: block;
 margin: 0;
 padding: 1.4em 0 0 35px;
 font-size: 110%;
 line-height: 1.4em;
 background: url(images/common/blockquote-66.gif) no-repeat 0 13px;
 font-style: italic; }

blockquote p {
 display: block;
 margin: 0;
 padding: 0 35px 0 0;
 background: url(images/common/blockquote-99.gif) no-repeat bottom right;
 color: #666; }

cite {
 display: block;
 margin: 0;
 padding: 0 0 1.4em 0;
 font-size: 80%;
 font-weight: bold;
 font-style: normal; }

form {
 margin: 0;
 padding: 0; }

input {
 margin: 0;
 padding: 2px;
 font-family: Arial, Verdana, sans-serif;
 font-size: 95%; }

select {
 margin: 0;
 padding: 1px;
 font-family: Arial, Verdana, sans-serif;
 font-size: 95%; }

textarea {
 margin: 0;
 padding: 3px;
 font-family: Arial, Verdana, sans-serif;
 font-size: 95%; }

.button {
 margin: 0;
 padding: 2px 4px 2px 4px;
 font-weight: bold;
 color: #333; }

/* 2. layout elements
---------------------------------------------------------- */

#navigation {
 display: block;
 clear: both;
 color: #F5F5F6;
 margin: 0 0 30px 0;
 padding: 0;
 border-top: 20px solid #CC001A; }

#wrap {
 display: block;
 width: 955px;
 margin: 0 auto; }

#post #wrap {
 background: url(images/common/content-bg.gif) repeat 0 0; }

#header {
 display: block;
 width: 955px;
 height: 340px;
 padding: 0 0 30px 0;
 background: #F5F5F6; }

#feature {
 display: block;
 width: 955px;
 height: 238px;
 margin: 0 0 30px 0;
 padding: 0;
 border-top: #ccc 1px solid;
 border-bottom: #ccc 1px solid; }

#home #content {
 display: block;
 width: 955px; }

#post #content {
 display: block;
 width: 602px;
 padding: 20px 38px 0 0;
 border-top: 1px solid #ccc; }

#sidebar {
 float: right;
 width: 299px;
 margin: 0;
 padding: 15px 5px 5px 11px;
 border-top: 1px solid #ccc; }

#sidebar-wrap {
 width: 269px;
 margin: 0;
 padding: 10px;
 background: #F5F5F6; }

#sidebar h3 {
 display: block;
 margin: 0 0 10px 0;
 padding: 0 0 5px 20px;
 background: url(images/common/star.gif) no-repeat 0 0;
 border-bottom: 1px solid #ccc; }

#sidebar-wrap ul {
 margin: 0 0 10px 0;
 padding: 0; }

#sidebar-wrap li {
 display: block;
 margin: 0;
 padding: 0 35px 10px 20px;
 list-style: none;
 background: url(images/common/more-icon-grey.gif) no-repeat 3px 4px; }
 
#sidebar-wrap a:link, #sidebar-wrap a:visited {
 text-decoration: none;
 color: #666; }

#sidebar-wrap a:hover {
 text-decoration: underline;
 color: #CC001A; }

#footer {
 display: block;
 clear: both;
 background: #CC001A;
 color: #F5F5F6;
 padding: 15px 0 0 0;
 font-size: 85%; }

/* 3. header
---------------------------------------------------------- */

#navigation-wrap {
 display: block;
 width: 955px;
 margin: 0 auto;
 padding: 5px 0 0 0; }

#navigation-wrap ul {
 width: 237px;
 margin: 0;
 padding: 0;
 display: inline; }

#navigation-wrap li {
 display: inline;
 margin: 0;
 padding: 0 35px 0 20px;
 list-style: none;
 background: url(images/common/star.gif) no-repeat 0 0; }

#navigation-wrap a:link, #navigation-wrap a:visited {
 text-decoration: none;
 color: #999; }

#navigation-wrap a:hover {
 text-decoration: underline;
 color: #CC001A; }

#print-header {
 display: none; }

/* 4. features
---------------------------------------------------------- */

#feature #text {
 float: left;
 width: 480px;
 padding: 30px 0 0 0; }

#feature #text h1 {
 display: block;
 margin: 0;
 padding: 0;
 font-size: 29px;
 line-height: 1.4em;
 color: #666; }

#feature #text h2 {
 display: block;
 margin: 0;
 padding: 0;
 font-size: 29px;
 line-height: 1.4em;
 color: #CC001A; }

#feature #text ul {
 float: left;
 width: 237px;
 margin: 0;
 padding: 0; }

#feature #text ul li {
 display: block;
 margin: 0;
 padding: 0 0 0.4em 0;
 list-style: none; }

#feature #text ol {
 margin: 0 0 0 51px;
 padding: 0; }

#feature #text ol li {
 padding: 0 0 0.4em 0; }

#feature #text p {
 padding: 30px 0 0 0; }

#feature #imagery {
 float: right;
 width: 470px; }

/* 5. content
---------------------------------------------------------- */

#content p {
 margin: 0 0 1.4em 0;
 padding: 0;
 line-height: 1.4em; }

#content strong {
 color: #333; }

#content h1 {
 display: block;
 margin: 0;
 padding: 0;
 font-size: 28px;
 line-height: 1.4em;
 color: #666; }

#content h2 {
 display: block;
 margin: 0;
 padding: 0;
 font-size: 28px;
 line-height: 1.4em;
 color: #CC001A; }

#post #content h2 {
 margin: 0 0 1em 0; }

#content h3 {
 display: block;
 margin: 0 0 1.4em 0;
 padding: 0;
 font-size: 100%;
 color: #666; }

#content ul {
 margin: 0 0 1.4em 5px;
 padding: 0; }

#content ul li {
 display: block;
 padding: 0 0 0.2em 23px;
 list-style: none;
 background: url(images/common/bullet.gif) no-repeat 0 2px; }

#post #content img {
 border: 1px solid #ccc; }

/* 6. definition list (dl) styles
---------------------------------------------------------- */

#content dl {
 clear: both;
 float: left;
 display: block;
 width: 955px;
 margin: 0 0 30px 0;
 padding: 0; }

#content dt {
 float: left;
 margin: 0;
 padding: 0;
 width: 275px;
 text-align: center; }

#content dd {
 float: left;
 width: 680px;
 margin: 0;
 padding: 0; }

/* 7. table styles
---------------------------------------------------------- */

#content table {
 width: 100%;
 margin: 0; }

#content caption {
 display: none; }

#content thead th {
 padding: 5px;
 background: #ffffcc;
 border-bottom: 1px solid #ccc; }

#content tbody th {
 padding: 12px;
 background: #ffffcc;
 border-bottom: 1px solid #ccc; }

#content td {
 padding: 12px;
 border-bottom: 1px solid #ccc;
 background: #F5F5F6; }

#content td.dark {
 background: #eee; }

#content td.error {
 padding-left: 32px;
 background: #FFCCCC url(images/common/alert-icon.gif) no-repeat 10px 50%;
 color: #990000;
 font-weight: bold; }

#content tbody td p {
 margin: 0;
 padding: 0 0 10px 0; }

#content tfoot td {
 padding: 6px;
 text-align: left;
 background: #ffffcc;
 border-bottom: 1px solid #ccc; }

/* 8. form styles
---------------------------------------------------------- */

#content form {
 margin: 0;
 padding: 0; }

#content form fieldset {
 margin: 0 0 1.4em 0;
 padding: 0;
 border: 0 none; }

#content form legend {
 display: none; }

#content form label {
 display: block;
 padding-bottom: 5px; }

#content form .text {
 width: 175px; }

#content form select {
 padding: 2px;
 border: 1px solid #bbb; }

#content form textarea {
 width: 320px;
 height: 85px; }

/* 9. homepage
---------------------------------------------------------- */

#home #feature #text h2 {
 margin: 0; }

#home #case-studies {
 margin: 0 0 30px 0; }

#home #introduction {
 float: left;
 width: 925px;
 padding: 15px;
 background: #999 url(images/common/introduction-bg.gif) no-repeat 0 0;
 color: #fff; }

#home #introduction a:link, #home #introduction a:visited {
 color: #eee; }

#home #introduction a:hover {
 color: #fff; }

#home #welcome {
 float: left;
 width: 447px;
 padding: 0 15px 0 0;
 border-right: 1px solid #ccc; }

#home #news-reel {
 float: right;
 width: 447px;
 padding: 0 0 0 15px;
 font-size: 85%;
 line-height: 1.2em; }

#home #news-reel ul {
 margin: 0;
 padding: 0; }

#home #news-reel ul li {
 display: block;
 padding: 0 0 1.4em 20px;
 list-style: none;
 background: url(images/common/more-icon-grey.gif) no-repeat 0 4px; }

#home #news-reel li.tight {
 padding: 0 0 0 20px; }

#home #services-wrap {
 float: left;
 width: 935px;
 margin: 0 0 15px 0;
 padding: 10px;
 background: url(images/common/lines-bg.gif) repeat 0 0; }

#home #services {
 float: left;
 width: 895px;
 padding: 100px 20px 5px 20px;
 background: #fff;
 font-size: 90%;
 line-height: 1.3em;
 background: #fff url(images/home/services-heading.gif) no-repeat 0 0; }

#home #services .service {
 float: left;
 width: 372px;
 padding: 0 0 1.3em 65px;
 background: #fff; }

#home #services .pad {
 padding-right: 21px; }

#home #services .web {
 background: url(images/home/web-icon.gif) no-repeat 0 20px; }

#home #services .logo {
 background: url(images/home/logo-icon.gif) no-repeat 0 20px; }

#home #services .graphic {
 background: url(images/home/graphic-icon.gif) no-repeat 0 20px; }

#home #services .video {
 background: url(images/home/video-icon.gif) no-repeat 0 20px; }

#home #services .sem {
 background: url(images/home/sem-icon.gif) no-repeat 0 20px; }

#home #services .copywriting {
 background: url(images/home/copywriting-icon.gif) no-repeat 0 20px; }

#home #services p {
 padding: 0; }

#home blockquote {
 float: left;
 width: 400px; }

#home #ratio-foundation {
 float: right;
 width: 170px;
 height: 52px;
 padding: 135px 0 0 306px;
 background: url(images/home/ratiofoundation.gif) no-repeat 0 0; }

/* 12. our work styles
---------------------------------------------------------- */

#our-work #feature #text h1 {
 margin: 10px 0 0 0;
 font-size: 24px;
 line-height: 1.4em; }

#our-work #feature #text h2 {
 margin: 0 0 20px 0; }

#our-work h3 {
 display: block;
 height: 71px;
 padding: 71px 0 0 0;
 overflow: hidden;
 height: 0px !important; }

#case-studies {
 float: left;
 display: block;
 width: 955px;
 margin: 0 0 15px 0;
 font-size: 90%;
 line-height: 1.3em; }

#case-studies img {
 padding: 13px;
 background: url(images/our-work/case-study-bg.gif) no-repeat 0 0; }

#case-studies h1 {
 display: block;
 margin: 5px 0 5px 0;
 padding: 0;
 font-size: 20px;
 line-height: 1.6em;
 color: #666; }

#case-studies h2 {
 display: block;
 margin: 5px 0 5px 0;
 padding: 0;
 font-size: 14px;
 line-height: 1.3em;
 color: #666; }

#case-studies .container {
 display: block;
 padding: 10px;
 background: url(images/our-work/case-study-panel.gif) no-repeat bottom left;
 color: #fff; }

#case-studies .links {
 margin: 0;
 padding: 0;
 color: #aaa; }

#case-studies a {
 padding-left: 18px; }

#case-studies a:link, #case-studies a:visited {
 color: #ccc; }

#case-studies a:hover {
 color: #fff; }

#case-studies .more {
 background: url(images/common/more-icon-grey.gif) no-repeat 0 50%; }

#case-studies .more-dim {
 background: url(images/common/more-icon-dim.gif) no-repeat 0 50%; }

#case-studies .website {
 background: url(images/common/website-icon-grey.gif) no-repeat 0 50%; }

#case-studies .tight {
 padding-bottom: 0; }

#case-study-1, #case-study-4, #case-study-7, #case-study-10, #case-study-13, #case-study-16, #case-study-19, #case-study-22 {
 float: left;
 width: 299px;
 padding: 0 14px 30px 0;
 border-right: 1px solid #ccc; }

#case-study-2, #case-study-5, #case-study-8, #case-study-11, #case-study-14, #case-study-17, #case-study-20, #case-study-23 {
 float: left;
 width: 299px;
 padding: 0 14px 30px 14px;
 border-right: 1px solid #ccc; }

#case-study-3, #case-study-6, #case-study-9, #case-study-12, #case-study-15,#case-study-18, #case-study-21, #case-study-24 {
 float: left;
 width: 299px;
 padding: 0 0 30px 14px; }

#case-study {
 width: 700px; }

#case-study-previews {
 float: right;
 width: 217px;
 text-align: center;
 color: #999; }

#case-study-previews p {
 padding: 0 0 75px 0; }

#logos-wrap {
 clear: both;
 display: block;
 padding: 10px 0 10px 0;
 background: url(images/common/lines-bg.gif) repeat 0 0; }
 
#graphic-print {
 float: left;
 margin: 0 0 30px 0;
 width: 955px;
 height: 722px; }

#graphic-print img {
 float: left; }

/* 14. social bookmarking
---------------------------------------------------------- */

#social-bookmarks {
 clear: both;
 display: block;
 margin: 0 0 30px 0;
 padding: 10px 8px 10px 8px;
 font-size: 85%;
 text-align: center;
 border: 1px dashed #ccc;
 background: #fff; }

#social-bookmarks p {
 display: inline;
 font-size: 100%;
 margin: 0 40px 0 0;
 padding: 0;
 font-weight: bold; }

#social-bookmarks ul {
 display: inline;
 margin: 0;
 padding: 0; }

#social-bookmarks ul li {
 display: inline;
 margin: 0;
 padding: 2px 55px 2px 20px;
 font-size: 110%;
 list-style: none; }

#social-bookmarks .delicious {
 background: url(images/common/delicious-icon.gif) no-repeat 0 2px; }

#social-bookmarks .digg {
 background: url(images/common/digg-icon.gif) no-repeat 0 2px; }

#social-bookmarks .reddit {
 background: url(images/common/reddit-icon.gif) no-repeat 0 2px; }

#social-bookmarks .facebook {
 background: url(images/common/facebook-icon.gif) no-repeat 0 2px; }

#social-bookmarks .google {
 background: url(images/common/google-icon.gif) no-repeat 0 2px; }

#social-bookmarks .stumbleupon {
 padding-right: 0;
 background: url(images/common/stumbleupon-icon.gif) no-repeat 0 2px; }

/* 12. footer
---------------------------------------------------------- */

#footer-wrap {
 display: block;
 width: 955px;
 margin: 0 auto;
 color: #EDC4CA; }

#footer-links {
 display: block;
 height: 126px;
 margin: 0 0 30px 0; }

#footer-links ul {
 float: left;
 height: 126px;
 margin: 0 30px 0 0;
 border-left: 1px solid #EDC4CA; }

#footer-links ul li {
 display: block;
 padding: 0 0 1px 10px;
 list-style: none; }
 
#footer-links p {
 display: block;
 float: right;
 margin: 0 0 40px 0;
 padding: 0; }

#footer-wrap .twitter {
 display: block;
 margin: 0 0 30px 0;
 padding: 0 0 0 165px;
 height: 36px;
 line-height: 36px;
 background: url(images/common/twitter.gif) no-repeat 0 0; }

#footer a:link, #footer a:visited {
 text-decoration: none;
 color: #EDC4CA; }

#footer a:hover {
 text-decoration: underline;
 color: #F5F5F6; }

/* 13. miscellaneous styles
---------------------------------------------------------- */

.clear {
 margin: 0;
 padding: 0;
 height: 1px;
 clear: both; }

.center {
 text-align: center; }

.left {
 float: left; }

.right {
 float: right; }

hr, .hide {
 display: none; }

a img {
 border: none; }

.tight {
 margin-bottom: 0;
 padding-bottom: 0; }

.icon {
 padding-left: 18px; }

.icon-alt {
 padding-right: 18px; }

.more {
 background: url(images/common/more-icon-dgrey.gif) no-repeat 0 50%; }

.website {
 background: url(images/common/website-icon-dgrey.gif) no-repeat 0 50%; }

.back {
 background: url(images/common/back.gif) no-repeat 0 50%; }

.previous {
 background: url(images/common/previous-icon.gif) no-repeat 0 50%; }

.next {
 background: url(images/common/next-icon.gif) no-repeat center right; }