/*   

MAIN.CSS
Contains:    Basic Layout and Typography for Both Interior Templates
For:         Lapchick & Co.
By:          Joe @ iBec Creative
             joe@ibeccreative.com
Created:     10-22-09 Joe
Updated: 	 12-18-09 JDB

*/

@import 'reset.css';

/* -----  HTML & Body  ----- */
html {font-size:100.01%; height: 101%;}
body { 
    height:100%;
    font-family:'Trebuchet MS',Futura,'Lucida Sans','Lucida Grande',Helvetica,Verdana,Geneva,sans-serif;
    font-size:12px;
    background:#fff;
    color:#2b2915;
    z-index:1;}
    
/* -----  Wrap & Bottom  ----- */
#wrap {
    position:relative;
    margin:28px auto;
    width:899px;
    background:#eff2d3 url('../images/bg-wrap-interior.png') repeat-y 0 0;
    z-index:1;}
    .white #wrap { background:#fff url('../images/bg-wrap-interior-white.png') repeat-y 0 0; }
    #wrap #bottom {
        position:relative;
        width:100%;
        margin:0;
        height:23px;
        background:#eff2d3 url('../images/bg-bottom-interior.png') no-repeat 0 0; }
    .white #wrap #bottom { background:#fff url('../images/bg-bottom-interior-white.png') no-repeat 0 0; }
        
/* -----  Header  ----- */
#header {
    position:relative;
    margin:0;
    width:100%;
    height:100px;
    background:#c2d1d3 url('../images/bg-header-interior.png') no-repeat 0 0;
    z-index:300;}
    #header a#logo {
        position:absolute;
        z-index:300;
        top:17px;
        left:33px; }
        #header a#logo img { border:0; z-index:300; }
        
    /* -- Tagline -- */
    #header h1 { display:none; }
    .circle #header h1 {
        display:block;
        position: absolute;
        top:104px;
        left:167px;
        z-index:300;}
        .circle #header h1 img { z-index:300; }
        
    /* -- Semi Circle -- */
    #header h2 {
        position:absolute;
        top:100px;
        left:177px;
        z-index:300; }
        #header h2 img { z-index:300; }
        
        
/* -----  Navigation  ----- */
ul#navigation {
    list-style-type:none;
    display:block;
    position:absolute;
    top:19px;
    left:172px; }
    ul#navigation li {
        list-style-type:none;
        display:inline;
        margin:0 7px;
        padding:0; }
            ul#navigation li a img { border:0; }

/* -----  Columns  ----- */
#leftColumn,
#rightColumn {
    display:inline-block;  /*   IE.CSS[display:inline;]   */
    vertical-align:top;
    margin-left:2px;
    z-index:1;}
#leftColumn { width:573px; }
#rightColumn {margin-bottom:25px; width: 303px; }

/* -- Blog-specific Things -- */
.blog #leftColumn { height:700px; background:transparent url('../images/circle-blog.png') no-repeat 0 0; }
    .blog #leftColumn div.inner {
        position:relative;
        margin:254px 70px 0 132px; }
    .blog #leftColumn div.up { margin-top:169px; }
        .blog #leftColumn div.inner h3 {
            margin:13px 0; }
            .blog #leftColumn div.inner h3 a:hover { text-decoration:underline; }

    /* -- Left Column Giant Circle -- */
    #leftColumn h3 img {display:block;min-height:660px;}
        
    /* -- Left Column Address -- */
    #leftColumn address {
        display:block;
        position:absolute;
        top:380px;
        left:135px;
        font-style:normal;
        color:#fff;
        font-size:18px;
        line-height:27px;
        z-index:100;
        text-align:right;}
    
    /* -----  Typography  ----- */
    #rightColumn h2 {z-index:300;position:relative;margin:33px 0 0 -70px;}
    #rightColumn h2 img { z-index:300; }
    .blog #rightColumn h2 a {z-index:999;position:absolute;bottom:15px;left:128px; }
    
    #rightColumn p,
    #leftColumn p{line-height:18px;margin:15px 0; }
    #rightColumn a.newsTitle,
    #leftColumn a.newsTitle{ font-size:14px; font-weight:bold; }
    #rightColumn .bold p { font-weight:bold; }
    #leftColumn p {margin-left:25px;margin-right:40px; }
    #rightColumn a {color:#000;text-decoration:underline; }
    #leftColumn a { color:#fff; }
    #leftColumn a:hover { text-decoration:none; }
    .semi #leftColumn a { color:#000; }
    #rightColumn a:hover { text-decoration:none; }
        .corporate-benefits-of-cause-branding p strong,
        .corporate-benefits-of-cause-branding p b { font-weight:normal; color:#a84d10; }
    .semi #leftColumn h3,
    .semi #rightColumn h3 {
        text-transform:uppercase;
        color:#a84d10;
        font-size:20px;
        line-height:28px;
        padding:6px 0;
        margin:5px 0;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        font-style:italic;
        font-weight:bold;}
    .semi #leftColumn h3 { margin:156px 40px 5px 25px; }
    .blog #rightColumn h3 { font-size:14px;font-weight:bold; }
    #leftColumn h4,
    #rightColumn h4 {
        text-transform:uppercase;
        color:#a84d10;
        font-size:14px;
        line-height:30px;
        margin:10px 0; }
        #leftColumn h4 a,
        #rightColumn h4 a {text-decoration:underline;color:#a84d10; }
        #leftColumn h4 a:hover, #rightColumn h4 a:hover { text-decoration:none; }
        
    /* -- Images in the Left Column -- */
    #leftColumn.thumbnails {text-align:center; }
        #leftColumn.thumbnails img { margin-top:110px; }
    /* -- Left Column Divider -- */
    .semi #leftColumn img.divider {float:right;margin:50px 20px 20px 0; }
        
    /* -- Previous/Next Links on Thumbnail Pages -- */
    #rightColumn p.prevNext a { color:#a84d10;}
    /* -- Previous/Next Arrows on Thumbnail Pages -- */
    #rightColumn p.prevNextArrows {
        position:absolute;
        top:120px;
        text-align:right;
        right:81px;}
        #rightColumn p.prevNextArrows a {
            margin:0 38px;
            padding:0;}
            #rightColumn p.prevNextArrows a img { border:0; }

/* ----- Comments ----- */
label {cursor:pointer;}
#comments form {margin:0 auto;width:290px;}
#comments fieldset {border:none;}
#comments legend {font-weight:bold;}
#comments div {clear:both;display:block;padding:.5em 0;overflow:hidden;border:1px solid #EFF2D3}
#comments label, #comments p.label, #comments input, #comments textarea {display:block;float:left;}
#comments label, #comments p.label {padding-right:1em;width:30%;text-align:right;vertical-align:baseline;}
#comments div.checkbox label {padding:0 0 0 15px;text-align:left;width:175px;}
#comments div.captcha label {float:right;padding:0 12px 0 0;text-align:left;width:178px;}
#comments div.captcha img  {float:right;width:178px;}
#comments div.captcha input {/*float:none;*/margin:0 0 0 34%;width:172px;}
#comments input[type="text"], #comments textarea {padding:.2em;width:60%;background:url(../images/inputbg.png) 0 0 no-repeat;border:none;vertical-align:baseline;}
#comments textarea {height:120px;overflow:auto;}
#comments input[type="checkbox"] {position:relative;top:2px;left:40px;width:85px;}
.error {color:red !important;}

/* -----  Classes  ----- */
.floatRight { float:right; }
.floatLeft { float:left; }
.alignLeft { text-align:left; }
.alignCenter { text-align:center; }
.alignRight { text-align:right; }
.hidden { display:none; }
.clear { clear:both; }