/*
color: #24A3BC; dark blue - blog titles
color: #7CCDDD; medium blue - link
color: #AEEDFA; light blue - link hovered
*/

/* Top level and navigation page elements */
    body 
    {
        background-color: #1B1B1B;
        font-family: "Lucida Grande", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans Regular", Verdana, sans-serif;
        color: #eee; /* defaault text color */
        height: 100%; /* this needs to be here for Chrome, otherwise the background will end when the content ends */
    }
    div#mainContainer 
    {
        width: 900px;
        margin-left:auto;
        margin-right:auto;
    }
    /* mainContainer has a navigation and background */
    div#navigation 
    {
        position: relative; 
        margin-top: 40px;
    }
    div.background 
    {
        display:block;
        margin-left:auto;
        margin-right:auto;    
        background-color: #292929;
        position: relative;
        font-size: 14px;
    }
    /* Navigation has a title, tabs and links */
    div#title 
    {
        margin: 20px 0px 0px 0px;
        padding: 0px 0px 3px 0px;
    }
    div#tabs 
    {
        position: absolute; 
        padding:0px;
        bottom: 0px;
        right: 0px; 
    }
    div#links 
    {
        position: absolute;
        padding:0px;
        top: 0px;
        right: 0px;
    }
    /* Styles for title */
    div#title img#siteImage 
    {
        border: 0px;    
    }
    /* Styles for links */
    div#links a, div#links span 
    {
        text-transform: lowercase;
        font-size: 11px;
        padding: 0px;
        margin: 0px;
        outline: none;
        text-decoration: none;
    }
    div#links a:hover 
    {
        text-decoration:underline;
    }
    /* Styles for tabs */
    div#tabs ul 
    { 
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
    div#tabs li 
    {
        float: left;
        margin: 0px;
    }
    div#tabs li a 
    {
        display: block;
        text-transform: lowercase;
        font-size: 13px;
        color: #aaa;
        width: 100px;
        height: 25px;
        background-image:url('images/UnselectedTab.png');
        background-repeat: no-repeat;
        padding: 5px 0px 0px 0px;
        margin: 0px 0px 0px 3px;
        text-align:center;
        outline: none;
        text-decoration: none;
    }
    div#tabs li a:hover 
    {
        color: #eee;
    }
/* Outer rounded corners - used in every page's background */    
    div.topLeft, div.bottomLeft, div.bottomRight 
    {
        width: 5px;
        height: 5px;
        position: absolute;
    }
    div.topLeft 
    {
        background: url('images/OuterRoundedCorners/TopLeft.png') no-repeat left top;
        top: 0px;
        left: 0px;
    }
    div.bottomLeft 
    {
        background: url('images/OuterRoundedCorners/BottomLeft.png') no-repeat left bottom;
        bottom: 0px;
        left: 0px;
    }
    div.bottomRight 
    {
        background: url('images/OuterRoundedCorners/BottomRight.png') no-repeat right bottom;
        bottom: 0px;
        right: 0px;
    }
/* Inner rounded corners - used in the account pages */
    div.innerTopLeft, div.innerBottomLeft, div.innerBottomRight, div.innerTopRight 
    {
        width: 5px;
        height: 5px;
        position: absolute;
    }
    div.innerTopLeft 
    {
        background: url('../zagstudio/account/images/InnerRoundedCorners/TopLeft.png') no-repeat left top;
        top: 0px;
        left: 0px;
    }
    div.innerBottomLeft 
    {
        background: url('../zagstudio/account/images/InnerRoundedCorners/BottomLeft.png') no-repeat left bottom;
        bottom: 0px;
        left: 0px;
    }
    div.innerBottomRight 
    {
        background: url('../zagstudio/account/images/InnerRoundedCorners/BottomRight.png') no-repeat right bottom;
        bottom: 0px;
        right: 0px;
    }
    div.innerTopRight 
    {
        background: url('../zagstudio/account/images/InnerRoundedCorners/TopRight.png') no-repeat right bottom;
        top: 0px;
        right: 0px;
    }
/* Form input */
    input.inputSubmit, input.inputText, input.inputPassword, input.inputImage, textarea.inputTextArea
    {
        border: 1px #666 solid;
        font-size: 12px;
        color: #ccc;
        font-family: "Lucida Grande", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans Regular", Verdana, sans-serif;
    }
    input.inputText, input.inputPassword, textarea.inputTextArea
    {    
        background: #444;
    }
    input.inputSubmit, input.inputImage
    {
        background: #333;
        font-weight: bold;
    }
    /* Styles used when hovering submit buttons */
    input.mouseOverSubmitInputButton
    {
        background: #3c3c3c;
        color: #eee;
        border: "1px #888 solid"; 
    }
    input.mouseOutSubmitInputButton
    {
        background: #333;
        color: #ccc;
        border: "1px #666 solid";        
    }
    input.inputImage
    {
        padding: 7px;
    }
    input.inputCheckbox 
    {
        padding: 0px;
    }
    div.formInputRow 
    {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin-bottom: 5px;
        padding: 0px;
    }
    div.formInputLabelContainer 
    {
        float: left;    
        width: 110px;
        position: relative;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }
    div.formInputContainer 
    {
        float: left;
        width: auto;
        position: relative;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }
    span.formInputLabel 
    {
        float: right;
        padding-right: 8px;
        font-size: 15px;
        font-weight: bold;
        height: 18px;
    }
    span.formInputCheckboxText 
    {
        font-size: 12px;
        margin-left: 3px;    
    }
    div.additionalInfoSection 
    {
        margin: -13px 0px 15px 0px;
        font-size: 12px;
    }
    div.formResultAdditionalInfoSection 
    {
        margin: -13px 0px 15px 0px;
        font-size: 12px;
        color: orange;
    }
    span.changeInfoError 
    {
        color: orange;
        font-size: 14px;    
    }
    div.horizontalSectionBackground 
    {
        background: #222;
        margin: 15px;
        padding: 15px; 
        position: relative;
        overflow: hidden;
    }
    input.horizontalInputText, input.horizontalInputPassword 
    {
        width: 230px;    
        height: 18px;    
    }
    /* Message displayed when user is already or not yet signed in */
    div#signInMessage 
    {
        width: 100%;
        float: left;    
    }
    div#signInMessageBackground 
    {
        background: #222;
        margin: 15px;
        padding: 25px 20px 25px 20px;    
        font-size: 14px;
        position: relative;
    }
    /* Big submit buttons */
    div.bigSubmitButtonOuterContainer
    {
        position: relative;
        overflow: hidden;  
        width: 100%; /* This needs to be here for Chrome. */  
    }
    div.bigSubmitButtonInnerContainer
    {
        padding-right: 5px;
        padding-top: 20px;
        padding-bottom: 0px;
        float: right;
    }
    input.bigSubmitButton
    {
        padding: 7px;
        font-size: 14px;
    }
/* Webcast tables */
    div.webcastRowTitle
    {
        position: relative;
        overflow: hidden;
        padding: 5px; 
        border-bottom: #555 1px solid;
        border-top: #555 1px solid;
    }
/* Titles */
    div.imageTitle 
    {
        margin: 0px 15px 0px 15px;
        padding: 25px 0px 3px 0px;
    }
    h3.underlinedTitle 
    {
        margin: 0px 0px 15px 0px;
        font-size: 20px;
        border-bottom: #555 1px solid;
    }
    .postTitle 
    {
        font-size: 26px;
        font-weight: bold;    
        text-decoration: none;
        margin-top: 0px;
        padding-top: 0px;
        color: #24A3BC; /* dark blue */
    }
/* General */
    a 
    {
        text-decoration:none;
        color: #7CCDDD; /* medium blue */
    }
    a:hover 
    {
        text-decoration:underline;
        color: #AEEDFA; /* light blue */
    }
    p 
    {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    li 
    {
        padding: 0px;
        margin: 15px 0px 15px 0px;    
    }
    ul 
    {
        padding: 0px;
        margin: 0px 0px 0px 30px;    
    }