@import url('/style/reset');

/* ------------------------------------------------------------------------------------------------------------ GLOBAL STYLES -----*/
a, span, del {font-size:100%;}
h1 {font-size: 200%;}
h2 {font-size: 190%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 95%;}
h1, h2, h3, h4, h5, h6 {
 text-transform:uppercase;
 font-weight:normal;
}
h1, h2, h3, h4, h5, h6, p {margin:.25em 0 .45em}
p, img {font-size: 100%; line-height:120%;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
#prefooter-wrapper a:hover {text-decoration:none;}
em {font-weight:bold;}

h1#logo {
 float:left;
 margin:1em 0 0 .5em;
}
h1#logo a {
 width:231px;
 height:71px;
 text-decoration:none;
 border:0;
 background:url(/images/flipbox-logo.gif) no-repeat center center;
 }
/* ------------------------------------------------------------------------------------------------------------ IMAGE REPLACEMENT -----*/
h1#logo a,
a.rss-subscribe 
{
 display:block; 
 overflow:hidden; 
 text-indent:-9999em;
}
/* ------------------------------------------------------------------------------------------------------------ IMAGE STYLES -----*/
#article-details li.author-thumb img {
 border:6px solid #DEDBCA;
}
.bio img, ul#toolbox li ul li a.img, #portfolio-preview a, .port-entry a, .copy img {
 border:10px solid #DEDBCA;
 margin:0;
 }
/* ------------------------------------------------------------------------------------------------------------ DOTTED BORDERS -----*/
.bio h2, .latest-weblogs li, .recent-resources li, h2.port-title {
 border-bottom: dotted 2px #DEDBCA;
 }
/* ------------------------------------------------------------------------------------------------------------ BROWN TEXT -----*/
p, li, div {
 color:#3D3028;
}
/* ------------------------------------------------------------------------------------------------------------ RED TEXT -----*/
a, h2.client-feedback, h2.feeling-it, #prefooter-wrapper a:hover, #prefooter-wrapper .pagination a, h2.port-title {
 color:#B14926;
}
/* ------------------------------------------------------------------------------------------------------------ BLUE TEXT -----*/
a:hover, h1, h2, h3, h4, h5, h6, #prefooter-wrapper .pagination a:hover {
 color:#7BBAC9;
}
/* ------------------------------------------------------------------------------------------------------------ TAN TEXT -----*/
#prefooter-wrapper li, #prefooter-wrapper p, #prefooter-wrapper a, #footer-wrapper p {
 color:#DEDBCA;
}
/* ------------------------------------------------------------------------------------------------------------ CONTAINERS -----*/
body {
 background:#3D3028 url(/images/background.gif) repeat center center; 
 border-top:6px solid #7BBAC9;
}
#page-wrapper {
 margin:0 auto; 
 width:981px;
}
#content-wrapper {
 background: #F6F3EA url(/images/white-sides-dropshaddow.gif) repeat-y; 
 clear:both;
 padding:0 25px 1em;
 width:931px;
}
#body, #sidebar {
 display:inline;
 margin-top:1.5em;
}
#body {
 float:left;
 width:630px;
}
#sidebar {
 float:right;
 padding:0;
 width:275px;
}
.portfolio #body, .portfolio #sidebar {margin-top:0;}
.index #body, .service #body {float:right;}
.index #body {width:605px}
.index #sidebar, .service #sidebar {float:left;}
.index #sidebar {width:310px;}
.weblog #sidebar {width:280px;}

#prefooter-wrapper, .portfolio #footer-wrapper, .toolbox #footer-wrapper, .service #footer-wrapper {
 background: url(/images/white-dropshaddow.gif) no-repeat top center;
 padding-top:1.9em;
 }
#prefooter-wrapper h3 {
 margin-bottom:.4em;
}
.latest-weblogs, .recent-resources, .verifiable-truth {
 float:left;
 display:inline;
 margin:0 2% 0 3%;
 width:28%;
}
#sidebar .verifiable-truth {
 width:auto;
}
#sidebar .verifiable-truth p {
 margin:.1em 0 .2em;
}
#footer-wrapper {
 margin:0 auto 1em;
 width:981px;
}
#footer-wrapper p {
 margin:0
}
.site-credits {
 float:left;
 margin-left:1em;
}
.site-credits p {
 clear:left;
 padding-top:.1em;
}
.design-credits {
 float:right;
 margin-right:1em;
 text-align:right;
}
/* ------------------------------------------------------------------------------------------------------------ NAVIGATION -----*/
ul#main-nav {
 position:relative;
 margin-top:80px;
 float:right;
 }
ul#main-nav li {
 float:left;
 margin:0 .5em;
 }
ul#main-nav li a,ul#main-nav li.active,  ul#main-nav li.active-link a {
 background:url(/images/menu-left.gif) no-repeat left -999%;
 float:left;
 padding-left:.4em;
 }
ul#main-nav li a span, ul#main-nav li.active span, ul#main-nav li.active-link a span {
 display:block;
 float:left;
 font-size:95%;
 line-height:43px;
 padding:0 1.4em 0 1em;
 background:url(/images/menu-right.gif) no-repeat right -999%;
 text-transform:uppercase;
 text-align:center;
 height:55px;
 color:#FFF;
 text-decoration:none;
 }
ul#main-nav li.active, ul#main-nav li.active-link a {
 background-position:left bottom;
 text-decoration:none;
 }
ul#main-nav li.active span, ul#main-nav li.active-link a span {
 background-position:right bottom;
 }
ul#main-nav li a:hover {
 background-position:left top;
 }
ul#main-nav li a:hover span {
 background-position:right top;
 cursor:pointer;
 }
ul#footer-nav li {
 float:left;
 border-left:1px solid #B14926;
 padding:0 .5em;
 }
ul#footer-nav li a span {
 color:#B14926;
 }
ul#footer-nav li a:hover span {
 color:#7BBAC9;
 }
ul#footer-nav li.active span, ul#footer-nav li.active-link span {
 color:#F6F3EA;
 }
ul#footer-nav li.first {
 border:0;
 }

/* ------------------------------------------------------------------------------------------------------------ MISC DISPLAY ELEMENTS -----*/
#attention {
 background:#DEDBCA;
 margin-top:1.5em;
 padding:20px 15px 10px;
 }
#attention h2 {
 font-size:195%;
 margin-bottom:.3em;
 }
#attention p {
 line-height:150%;
 font-size:110%;
 }
#attention img {
 float:left;
 margin:0 4em 0 3em;
 }
/* ----------------------- BLOCKQUOTE CONTAINERS -----*/
blockquote {
 margin:0 0 1.5em;
 width:auto;
 }
blockquote.nocite {
 margin:1em 0 0;
 padding-bottom:20px;
 background: url(images/blue-pointer.gif) no-repeat 88% bottom;
 }
blockquote p {margin:0}
blockquote p.quote {
 background:#7BBAC9;
 padding:1em;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }
blockquote cite {
 font-style:normal;
 color:#3D3028;
 display:block;
 background:#F6F3EA url(images/blue-pointer.gif) no-repeat 88% top;
 text-align:right;
 width:75%;
 padding:.2em 25% 0 0;
 line-height:100%;
 }
blockquote cite em {
 font-style:normal;
 font-size:100%;
 display:block;
 text-transform:uppercase;
 }
blockquote.tan p.quote {
 background:#DEDBCA;
 }
blockquote.tan cite {
 background-image: url(images/tan-pointer.gif);
 }
blockquote.red p.quote {
 background:#B14826;
 }
blockquote.red cite {
 background-image: url(images/red-pointer.gif);
 }
/* ----------------------- RSS -----*/
a.rss-subscribe {
 width:42px;
 height:46px;
 background:url(images/rss-subscribe.jpg) no-repeat top right;
 position:absolute;
 top:5px;
 right:-3px;
}
a.rss-subscribe:hover {
 background-position:top left;
}
/* ----------------------- BIO -----*/
.bio {
 float:left;
 display:inline;
 width:45%;
 padding:0 2%;
 }
.bio {
 width:47%;
 padding:0; 
 margin:0 1%;
}

/* ----------------------- RED HEADER -----*/
.project-details h4 {
 background:#B14826 url(images/rounded-tr-red.gif) no-repeat right top;
 font-size:110%;
 margin-bottom:0;
 }
.project-details h4 span {
 display:block;
 text-transform:uppercase;
 color:#FFF;
 font-weight:normal;
 padding-left:.5em;
 line-height:40px;
 background:url(images/rounded-tl-red.gif) no-repeat left top;
 }
/* ------------- ARTICLE DETAIL CONTAINER -----*/
#article-details h4, h4.port-sidebar-title {
 background:#B14826 url(images/rounded-tr-red.gif) no-repeat right top;
 font-size:110%;
 margin:0;
 }
#article-details h4 span, h4.port-sidebar-title span {
 display:block;
 text-transform:uppercase;
 color:#FFF;
 font-weight:normal;
 padding-left:.5em;
 line-height:40px;
 background:url(images/rounded-tl-red.gif) no-repeat left top;
 margin:0;
 }
#article-details ul {float:left;}
#article-details li {
 width:280px;
 display:block;
 padding:.5em 0;
 border-bottom:2px dotted #DEDBCA;
}
#article-details li.author-thumb {
 float:left; 
 width:95px; 
 border-bottom:0;
 padding-bottom:0;
 background:#F6F3EA;
}
#article-details li.author-thumb img {
 float:left;
 margin-right:10px;
 margin-bottom:5px;
}
#article-details li strong {
 color:#7BBAC9;
 font-weight:bold;
 padding-right:.25em;
}
/* ----------------------- NEWSLETTER SIGNUP-----*/
.newsletter-text {margin-top:0;}
/* ----------------------- PORTFOLIO PREVIEW HOME PAGE-----*/
ul#portfolio-preview {
 margin-top:1em;
 }
ul#portfolio-preview li {
 display:block;
 height:235px;
 width:605px;
 margin:1em 0;
 }
#portfolio-preview a, .port-entry a {
 display:block;
 width:585px;
 height:215px;
 background: url(/images/port-hover.gif) no-repeat center center;
 }
/* ----------------------- COMPONENTS -----*/
.latest-weblogs li, .recent-resources li, .verifiable-truth li  {
 padding:.5em 0;
 }
.latest-weblogs .pagination, .verifiable-truth .pagination {
 padding:.3em .3em .3em 0;
 border:0;
 text-align:right;
 font-size:90%;
 }
#slidebar-container {
 background:#DEDBCA url(/images/main-container-bar-pointer.gif) no-repeat center top;
 padding:20px 15px 6px;
 margin-top:7px;
 position:relative;
 width:901px;
 }
#slidebar-container p {
 line-height:30px;
 margin:0;
 }
#slidebar {
 position: relative;
 height:29px; 
 width:350px;
 margin: 0 auto;
 overflow: hidden;
}
#slidebar li {
 float: left;
 list-style: none;
}
#slidebar li.back {
 background: url(/images/main-container-bar-slider.gif) no-repeat top right;
 width: 9px;
 height: 28px;
 z-index: 8;
 position: absolute;
}
#slidebar li.back .left {
 background: url(/images/main-container-bar-slider.gif) no-repeat top left;
 height: 28px;
 padding-left:5px;
 margin-right: 9px;
}
#slidebar li a {
 font: bold 12px arial;
 text-decoration: none;
 color:#3d3028;
 text-align:center;
 text-transform:lowercase;
 position:relative;
 z-index:10;
 display:block;
 padding:0 15px;
 line-height:30px;
 overflow: hidden;
 outline: none;
 height: 30px; 
 top: 0px;
 letter-spacing:0;
 float: left; 
 margin: 0;
}
/* ----------------------- FEELING IT BLOCK -----*/
h2.feeling-it {
 margin-top:1.5em;
 margin-bottom:.5em;
 padding-top:8px;
 padding-bottom:5px;
 position:relative;
 font-size:180%;
 }
h2.feeling-it a {
 background:url(/images/cloud-left.gif) no-repeat left top;
 position:absolute;
 float:left;
 padding-left:.2em;
 top:0;
 right:0;
 }
h2.feeling-it a span {
 display:block;
 float:left;
 font-size:14px;
 padding:0 1.4em 0 .8em;
 background:url(/images/cloud-right.gif) no-repeat right top;
 line-height:43px;
 text-transform:uppercase;
 text-align:center;
 height:55px;
 color:#FFF;
 text-decoration:none;
 }
h2.feeling-it a:hover {
 background-position:left bottom;
 text-decoration:none;
 cursor:pointer;
 }
h2.feeling-it a:hover span {
 background-position:right bottom;
 cursor:pointer;
}
/*------------------------------------------------------------------------------------------------------------------------------------ UNIVERSAL FORMS --*/
form {
 margin-bottom:1em;
 }
form h3 {
 text-transform:uppercase;
 color:#B14826;
 font-size:150%;
 margin:1em 0 .5em 0;
 border-bottom: dotted 2px #DEDBCA;
 }
form p {
 margin-left:.75em;
 }
form div {
 margin:4px 0 4px .75em;
 }
label {
 display:block;
 float:left;
 width:100px;
 margin-top:5px;
 padding-right:5px;
 text-align:right;
 font-weight:bold;
 }
label.error {
 float:left;
 display:inline;
 float:none;
 color:#7ABAC9;
 margin-left: 10px;
 width:auto;
}
input.error {}
fieldset#project-details-textarea {
 margin-top:1em;
 }
input.txt-box, textarea, select {
 font-family : "Arial Narrow", helvetica, arial, sans-serif; 
 padding:2px 3px;
 font-size:100%;
 width:225px;
 color:#3D3028;
 }
textarea {
 float:left;
 width:390px;
 }
select {
 width:auto;
 }
form .buttons {
 margin:0;
 padding-bottom:.75em;
 position:relative;
 min-height:35px;
 }
form .button {
 position:absolute;
 margin:0;
 top:.75em;
 left:115px;
 background:url(/images/button-right.gif) no-repeat right top;
 }
form .button input.send {
 border:0;
 background:url(/images/button-left.gif) no-repeat left top;
 height:35px;
 margin:0;
 padding:0 .5em 2px;
 color:#fff;
 font-size:100%;
 overflow: visible;
 }
form .button:hover {
 cursor:pointer;
 background-position:right bottom;
 }
form .button:hover input.send {
 cursor:pointer;
 background-position:left bottom;
 }
/*------------------------------------------------------------------------------------------------------------------------------------ MICROFORMATS --*/
.vcard {
 margin-bottom:.5em;
 }
.adr {
 margin:.4em 0;
 }
h4.org {
 margin-bottom:0;
 text-transform: none;
 font-weight:bold;
}
p.fn {margin-top:0;}
.thank-you h3 {
 color:#006600;
 padding-bottom:.3em;
 }