/********************************************************************
 * Outside the Cubes - Style Sheet
 *
 * Main Style Sheet for Outside the Cubes Website
 * Copyright - Robert Chapman - 2009
 *
 * Notes:
 * The page consists for four main sections:
 *
 *  * Header/Navigation
 *    - Main Logic
 *    - User Login/Logout
 *    - Space for updates and messages
 *    - Navigation Bar
 *  * Splash Bar
 *    - Only for the main home page
 *  * Content in two or three columns
 *    - Locations in first column - static
 *    - Home Page info in second and third columns
 *    - General Text in second+third column area
 *  * Footer
 *    - Copyright
 *    - Graphic Design Credit to LLD
 *
 * The colors are derived from Cube and Crayons corprorate styles
 *
 * * Cubes and Crayons Blue-Green: #71c0bd;
 * * Cubes and Crayons Darker-Blue: #00b1b0;
 *
 ********************************************************************/

/********************************************************************
 * Foundation Style
 *
 * - San Serif Font
 * - Derive font size from user preferences
 * - Page width is a static 900px with a simple border
 *
 ********************************************************************/
body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.9em;
    color: #000000;
    background-color: #FFFFFF;
    width: 900px;
    margin: auto;
    margin-top:  20px;
    border: 1px solid #000000;
}

/********************************************************************
 * Typical CSS practice, eliminate any margin/padding as every browser
 * has a different default for these.  Thus any margin or padding that
 * we add will come out the same in all browsers.
 ********************************************************************/
* {
    margin: 0;
    padding: 0;
}

/********************************************************************
 * Main Navigation Section
 ********************************************************************/
div#header {
    width: 870px;
    height:  210px;
    background-color: #FFFFFF;
    color: #000000;
    margin:  15px 15px 0 15px;
}

/* Main Landing Logo - Left Third of the Header
 * Image is currently set to 200px x 200px
 *
 * Pad out on the right to 1/3 of the total width:  870/3 = 290px but
 * we are using 270px to give more room for the contents on the right
 * side (600px for content, 270px for images
 *
 * Height of the splash screen remains at 200px + 15px margin above it
 */
div#main-logo {
    position: absolute;
    background-color: #FFFFFF;
}

/* Login/User Name in the upper right corner
 * 15px margin above and below + 30px in height
 * 
 * 215px - 60px = 155px for content below the login button
 */
div#login {
    height:  30px;
    text-align: right;
    font-size: 0.8em;
    margin: 15px;
    background-color: #FFFFFF;
}

div#login a {
    text-decoration: none;
    color: #000000;
}

div#login a:hover {
    color: #00b1b0;
}


/* Flair Logo, for special announcements and the like. Floats above
 * the main navigation bar
 *
 * 155px left from previous, use 125px to leave 30px for the menu element
 *
 * Leave in a small right margin to keep the image off the right column edge
 * Generally though we will be aligning any image here against the right
 * margin.
 */
div#flair-logo {
    height: 125px;
    margin-right: 30px;
    background-color: #FFFFFF;
}

/* Float any flair image to the right
 * Margin out top/bottom to get it into the middle of the blank space
 */
div#flair-logo img {
    float: right;
    margin: 30px 0px;
}


/********************************************************************
 * Main Navigation Menu Styles
 *
 * Nested Un-ordered lists that we will style into a drop-down menu
 *
 ********************************************************************/
/****************************************
 * Drop Down Menu Items, ul's contained within a li of the root ul.
 * Hide them when there is no hovering going on.
 * Use absolute position so that they track their parent li's
 * Make them as wide as we want the drop down menu's to appear
 ****************************************/

div#listmenu {
    height:  30px;
    width:  580px;
    margin-left: 285px;
    font-size: 1.0em;
    background-color: #FFFFFF;
}

/****************************************
 * Main Menu - 
 * Stack the items left to right (float, left)
 * Get a divider in place
 * Remember to clear the divider for the first element
 ****************************************/
div#listmenu ul {

}

div#listmenu li {
    position: relative;
    float: left;
    list-style-type: none;
}

div#listmenu *.dir {
    text-transform:  uppercase;
    border-left: 2px solid #000000;
}

div#listmenu li.firstdir {
    border-left: none;
}


div#listmenu ul li ul {
    position: absolute;
    width: 8.5em;
    display: none;
    left: 9px;
}

div#listmenu ul li.lastdir ul {
    position: absolute;
    width: 10em;
    display: none;
    left: -50px;
}

div#listmenu ul li:hover ul {
    display: block;
    border: 1px solid #D0D0D0;
}

/* Menu items display properties */
div#listmenu ul li ul li {
    width: 100%;
    font-size:  0.8em;
    background-color: #FFFFFF;
    text-transform:  lowercase;
}


/****************************************
 * Get the link and link-hover behavior the way we want it
 ****************************************/
div#listmenu a:link,
div#listmenu a:visited {
    display: block;
    padding: 0 9px;
    text-decoration: none;
    color: #00b1b0;
}
div#listmenu a:hover {
    color: #000000;
}
div#listmenu a:active {
    color: #00b1b0;
}

div#listmenu ul li ul li a:link,
div#listmenu ul li ul li a:visited {
    color: #000000;
}
div#listmenu ul li ul li a:hover {
    color: #00b1b0;
}
div#listmenu ul li ul li a:active {
    color: #000000;
}


/********************************************************************
 * Left Navigation Pane - present for two and three column layouts
 ********************************************************************/

div#left-nav {
    width: 270px;
    height:  auto;
    background-color: #FFFFFF;
    color: #000000;
    margin:  0 0 0 15px;
    float: left;
    font-size: 1em
}

div#left-nav h2 {
    color: #00b1b0;
    margin: 20px 0 0 0;
    font-size: 1.1em;
    font-weight: lighter;
    border-bottom: 1px solid #000000;
}

div#left-nav h3 {
    color: #000000;
    margin: 10px 0 0 0;
    font-size: 1.0em;
    font-weight: lighter;
}

div#left-nav p {
    color: #000000;
    margin: 0;
    font-size: 0.8em;
}

div#left-nav form {
    margin: 10px 0 10px 0;
}

div#left-nav a {
    color: #00b1b0;
    text-decoration: none;
}

div#left-nav a:hover {
    color: #000000;
}

/*****************************
 * The Left-Nav has several sub-sections
 *
 * - The Header w/ Splash Image
 * - The actual Navigation Options
 *
 ****************************************/

div#left-nav-splash {
    width: 270px;
    border: 0 0 0 0;
}

div#left-nav-splash-image img {
    position: absolute;
    padding: 0;
    margin: 0;
    border-bottom: 3px solid #000000;
}

div#left-nav-content {
    margin: 250px 0 0 0;
    padding: 0 0 0 15px;
}

/********************************************************************
 * Page Specific Sytles Start Here
 ********************************************************************/
/********************************************************************
 * Main Content Section
 *
 * Basic Style Guidelines
 *
 *  * Main Headers are OTC Blue
 *  * Secondary Headers are Bold
 *  * Main Text is Black
 *  * Links are OTC Blue
 *  * Hovered Links are Black
 *
 ********************************************************************/

div#content {
    width: 595px;
    height:  auto;
    background-color: #FFFFFF;
    color: #000000;
    float: left;
}

div#content h2 {
    color: #00b1b0;
    font-size: 1.3em;
    font-weight: lighter;
}

div#content h3 {
    color: #000000;
    margin: 10px 0 0 0;
    font-size: 1.2em;
}

div#content p {
    color: #000000;
    margin: 0 0 7px 0;
    font-size: 0.9em;
}

div#content ul {
    margin: 0 0 0 30px;
}

div#content a {
    color: #00b1b0;
    text-decoration: none;
}

div#content a:hover {
    color: #000000;
}


/****************************************
 * The Content has several sub-sections
 *
 * - The Header or the Splash
 * - The actual content
 *
 * Special formating for these sections
 * is below
 ****************************************/

div#content-header {
    background-color: #000000;
    padding:  15px 0 15px 15px;
    margin:  0 0 15px 0;
    font-weight: lighter;
    font-size: 1.5em;
}

div#content-header p {
    color: #FFFFFF;
    margin:  0;
}

div#content-contents {
    padding: 0;
    margin: 15px 0 0 0;
}

div.content-simple {
    margin: 15px 0 0 30px;
}


/* Home Page Splash */
div#content-splash {
    height:  225px;
    background-color: #000000;
    color: #FFFFFF;
    padding: 0 0 0 15px;
    border-bottom: 3px solid #000000;
}

div#splash-otc-think img {
    padding: 10px 0 0 0;
}

div#splash-otc-about h2 {
    color: #FFFFFF;
    padding: 5px 0 0 15px;
    font-size: 1.3em;
    font-weight: lighter;
}

div#splash-otc-about p {
    color: #FFFFFF;
    padding: 0px 0 0 15px;
    font-size: 0.7em;
}


/*****************************
 * Three Column Format
 *****************************/

div#c3-second-column {
    width: 270px;
    padding: 0 10px 0 19px;
    float: left;
}

div#c3-second-column p {
    line-height:  200%;
}

div#c3-third-column {
    width: 270px;
    padding: 0 10px 0 10px;
    float: left;
}

div#c3-third-column p {
    line-height:  200%;
}


/*****************************
 * Two Column Format
 *****************************/

div#c2-second-column {
    width: 560px;
    padding: 0 10px 0 19px;
    float: left;
}

/********************************************************************
 * Form Style
 *
 * Generic Style for the Forms on the site.  Largely the form
 * pages will inherit from the other pages.  Generally speaking
 * we just want the form elements to line up.
 *
 ********************************************************************/
div#formheader {
    width: 870px;
    height:  110px;
    background-color: #FFFFFF;
    color: #000000;
    margin:  15px 15px 0 15px;
    border-bottom: 3px solid #000000;
}

div#formcontainer {
    width:  840px;
    margin: 30px 30px 30px 30px;
}

div#formcontainer form {
    border-top:  2px solid #000000;
    border-bottom: 3px solid #000000;
}

/* Make a divider between each element of the form
 * and use the divider element to clear out floats */
div#formcontainer div.clearfix {
    border-top:  1px solid #000000;
    padding: 10px 0px;
}

/* Clearfix for cleaning up floats after each element
 * in the form */
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Fix for Internet Explorer */
.clearfix {
    display: inline-table;
}

/* backslash hack hides this from IE6 for mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* end backslash hack */


/* Make sure that the elements for each form entry stack horizontally
 */
div#formcontainer form label,
div#formcontainer form input {
    width: 200px;
    float: left;
}

div#formcontainer p.form-error {
    width: 400px;
    float: left;
    margin: 0 0 0 15px;
}

div#formcontainer div.tos_button input {
    margin-left: 10px;
    width: 20px;
}

div#formcontainer div.tos_button label {
    margin-left: 10px;
    width: 326px;
}


/********************************************************************
 * Break any div column formatting at this point
 ********************************************************************/
div.clearfloats {
    height:  1px;
    clear: both;
}

/********************************************************************
 * Footer
 *
 * Universal Footer for the entire site
 *
 *  * Grey and unobtrusive
 *  * Small divider to seperate it from any text
 *
 ********************************************************************/
#footer p {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 0.9em;
    font-stretch: narrower;
    text-align: left;
    border-top: 1px solid #000000;
    color:  #B0B0B0;
    background-color:  #FFFFFF;
    margin: 15px 15px 10px 15px;
    padding: 5px 0px;
}