/*   

COMMON.CSS
Contains:    Basic Layout & Typography
For:         The Circle
By:          Joey @ Goose Rock Design
             joey@gooserockdesign.com
Created:     09-18-09 Joey

*/

@import 'reset.css';

/* -----  HTML & Body  ----- */
html {font-size:100.01%; height: 101%;}
body { 
    height:100%;
    font-family:Verdana,Arial,sans-serif;
    font-size:10px;
    /*background:#000;
    background-image:url('../images/bg-body.jpg');
    background-repeat:no-repeat;*/
    background:#000;
    color:#d9d9d9; }
    
#wrap {
    width:1000px;
    margin:00px auto;
    position:relative;
    /*background:#000 url('../images/bg-body.jpg') no-repeat 0 0;*/}
    
/* -----  Left Column  ----- */    
#leftColumn {
    position:relative;
    display:inline-block;   /*   IE.CSS[display:inline;]   */
    vertical-align:top;
    width:400px;}
    
    /* -- Photo -- */
    #photo {
        position:absolute;
        z-index:50;
        top:100px;
        left:46px; }

    /* -- Circle -- */
    .circle {
        width:375px;
        width:334px;
        width:400px;
        height:438px;
        height:408px;
        height:465px;
        position:absolute;
        top:20px;
        left:0;
        display:block;
        outline:0;
        z-index:100;
        background:transparent url('../images/bg-circle-revised.png') no-repeat 0 0;}
    
/* -----  Navigation  ----- */
#navigation {
    position:relative;
    margin:460px 0 0 0;
    list-style-type:none;
    text-align:center;
    width:330px;}
    #navigation li { margin:10px 0 5px 80px; }
    #navigation a {
        display:block;
        height:20px;
        width:173px;
        padding:0;
        margin:0;
        background-repeat:no-repeat;
        background-position: 0 -40px;
        text-indent:-5000px;
        outline:0;}
    #navigation li.text { text-align:center; color:#999; margin-left:7px; }
        /*#navigation li.text a { 
            text-indent:0; 
            color:#999; 
            text-decoration:none;
            display:inline;
            padding:5px 0;
            width:90px;}
        #navigation li.text a:hover { text-decoration:underline; color:#b1bbcb; }*/
    #navigation a:hover { background-position: 0 -20px; }
    #navigation a.current,
    #navigation a:active { background-position:0px 0; }
    #navigation li.nav-trailer a { background-image:url('../images/nav-trailer.png'); }
    #navigation li.nav-about a { background-image:url('../images/nav-about.png'); }
    #navigation li.nav-art a { background-image:url('../images/nav-art.png'); }
    #navigation li.nav-store a { background-image:url('../images/nav-store.png'); }
    #navigation li.nav-donate a { background-image:url('../images/nav-donate.png'); }
    
/* -----  Right Column  ----- */
#rightColumn {
    position:relative;
    display:inline-block;   /*   IE.CSS[display:inline;]   */
    vertical-align:top;
    width:530px;
    padding:80px 0 0 0;
    margin-left:10px}
    #rightColumn h1 {
        position:relative;
        background:transparent url('../images/title-homepage.png') no-repeat 0 0; 
        height:55px;
        width:353px;
        display:block;
        margin:-20px 0 10px 84px;
        padding:0;
        z-index:200;
        text-indent:-5000px;}
    #rightColumn #cycle { margin:30px 0 0 0px; }
        #rightColumn #cycle { width:500px; }
    .interior #rightColumn h1 {
        position:absolute;
        top:95px;
        left:-44px;
        margin:0;
        height:35px;
        width:209px;
        background:transparent url('../images/title-interior.png') no-repeat 0 0;
        cursor:pointer;}
    #rightColumn h2,
    #rightColumn h3 {
        font-family:Trajan,'Trajan Pro',Garamond,Georgia,'Times New Roman',serif;
        font-size:16px;
        word-spacing:4px;
        letter-spacing:1px;
        color:#b1bbcb;
        font-weight:normal;
        text-align:center;
        line-height:20px;}
    #rightColumn h2 { color:#8594ab; color:#bbb; color:#E6E6E6; }
        /*#rightColumn h2 span { font-size:14px; }*/
    /*.interior #rightColumn h2 { 
        margin:29px 0 40px 80px;
        font-size:18px;}*/
    #rightColumn h3 { 
        padding:0 0 0 13px;
        background:transparent url('../images/bg-h3.png') no-repeat 0 -2px;
        text-transform:none;
        letter-spacing:1px;
        font-size:16px;
        font-style:normal;
        line-height:27px;
        margin:15px 0 5px 0;
        text-align:left;
        color:#E6E6E6;}
    .home #rightColumn h3 {
         background:none;
         text-align:center; }
    .interior #rightColumn h3 {
        margin-top:80px; }
    #rightColumn p {
        line-height:16px;
        margin:10px 0; }
    #rightColumn a {
        color:#b1bbcb;
        text-decoration:underline; }
    #rightColumn a:hover { text-decoration:none; }
    
    /*#rightColumn object { position:relative; left:-50px; }*/
    
    #rightColumn a.btn-lightbox { float:left; margin:0 3px; padding:2px 0; }
    
/* -----  Episodes  ----- */
#episodes {
    position:relative;
    margin:20px 0 0 00px;
    width:550px;
    height:40px;
    text-align:center;
    padding:30px 0; }
.interior #episodes { margin:50px 0 0 0; width:100%; padding-top:10px; }
    #episodes img {  }
    #episodes a {
        height:34px;
        padding:17px 35px 2px 35px;
        outline:0;
        text-decoration:none;}
    #episodes a.one { background:#000 url('../images/episode-1.png') no-repeat 0 0; }
    #episodes a.two { background:#000 url('../images/episode-2.png') no-repeat 0 0; }
    #episodes a.three { background:#000 url('../images/episode-3.png') no-repeat 0 0; }
    #episodes a.four { background:#000 url('../images/episode-4.png') no-repeat 0 0; }
    #episodes a.five { background:#000 url('../images/episode-5.png') no-repeat 0 0; }
    #episodes a:hover { background-position:0 -34px; }
    #episodes a.openDialog { background-position:0 -68px; }
    #episodes a.openDialog:hover { background-position: 0 -102px; }
    
#largeNavigation {
    position:relative;
    margin:40px 0 0 145px;
    width:700px;
    text-align:right;
    color:#444; }
    #largeNavigation a {
        padding:10px 110px 10px 110px;
        outline:0;
        text-decoration:none;}
    #largeNavigation a.trailer { background:#000 url('../images/nav-large-watch-the-trailer.png') no-repeat 0 0; }
    #largeNavigation a.about { background:#000 url('../images/nav-large-about-the-circle.png') no-repeat 0 0; }
    #largeNavigation a.donate { background:#000 url('../images/nav-large-donate.png') no-repeat 0 0; }
    #largeNavigation a:hover { background-position:0 -30px; text-decoration:none;}
    
/* -----  Footer  ----- */
#footer {
    position:relative;
    margin:30px 0 0 0;
    width:100%;
    height:39px;
    text-align:center;
    padding:0;}
    #footer a { padding:0 40px; }
    
    
/* -----  Facebook and Twitter Icons  ----- */
#largeNavigation a.btn-facebook,
#largeNavigation a.btn-twitter {
    position:absolute;
    top:-5px;
    right:96px; }
#largeNavigation a.btn-facebook,
#largeNavigation a.btn-twitter,
#navigation a.btn-facebook,
#navigation a.btn-twitter {
    display:block;
    width:16px;
    height:16px;
    text-indent:-5000px;
    padding:0;
    margin:0 2px;}
#navigation a.btn-facebook,
#navigation a.btn-twitter { display:inline-block; } /*  IE.CSS [display:inline]  */
#largeNavigation a.btn-facebook,
#navigation a.btn-facebook{ 
    background:transparent url('../images/btn-facebook.png') no-repeat 0 0;
    right:76px;}
#largeNavigation a.btn-twitter,
#navigation a.btn-twitter { 
    background:transparent url('../images/btn-twitter.png') no-repeat 0 0; }
#largeNavigation a.btn-facebook:hover,
#largeNavigation a.btn-facebook:active,
#largeNavigation a.btn-twitter:active,
#largeNavigation a.btn-twitter:hover,
#navigation a.btn-facebook:hover,
#navigation a.btn-facebook:active,
#navigation a.btn-twitter:active,
#navigation a.btn-twitter:hover{ background-position: 0 -16px; }

/* -----  Forms  ----- */
label {margin:9px 0 0;display:block;font-weight:bold;}
input.text,
textarea {
    display:block;
    border:1px solid #000;
    padding:5px 7px;
    width:300px;
    margin:2px 0;
    font:12px Arial,Verdana,sans-serif #bbb;}
textarea {width:450px;}
input.text:focus,
textarea:focus {border:1px solid #b1bbcb;}
       
        /* -- Error Messages -- */
        label.error { color:red; }
        input.error,
        textarea.error { border:1px solid red; }
    
/* -----  Other  ----- */
a.closeDialog { padding:6px 2px 2px 2px; cursor:pointer; outline:0; }

.dialog { text-align:center; }
.dialog a { display:block; }
    
/* -----  Classes  ----- */
.floatRight { float:right; }
.floatLeft { float:left; }
.alignCenter { text-align:center; }
.alignLeft{ text-align:left; }
.alignRight{ text-align:right; }