/********************************************************************
 * Cubes and Crayons - Style Sheet
 *
 * Robert Chapman - 2009
 * Free and open
 * Please feel free to copy as much as you'd like.
 *
 * Notes:
 * The page consists of several 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 corporate styles
 *
 * * Cubes and Crayons Blue-Green: #71c0bd;
 * * Cubes and Crayons Darker-Blue: #00b1b0;
 *
 ********************************************************************/

/********************************************************************
 * Best 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;
}

/********************************************************************
 * 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;
    background: #FFFFFF url(/site_media/images/cc_gradient_800.png) repeat-x
    scroll center top;
}

div#page-content {
    width: 900px;
    margin:  auto;
    margin-top:  20px;
    margin-bottom:  20px;

    color: #000000;
    background: #FFFFFF;

    border: 1px solid #000000;
    border-radius:  11px;
    -moz-border-radius:  11px;
    -webkit-border-radius:  11px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/********************************************************************
 * Main Navigation Section
 ********************************************************************/
/* Main Landing Logo - 400x125px image.
 */
div#main-logo {
    width: 400px;
    height:  125px;
    position: absolute;
    margin: 15px;
    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: 100px;
    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;
}


/********************************************************************
 * 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;
    font-size: 1.0em;
    background-color: #FFFFFF;
    margin-left: 285px;
}

/****************************************
 * 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: 9em;
    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;
}


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


/********************************************************************
 * 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#splash {
    width: 270px;
    border: 0 0 0 0;
}

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

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

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

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;
}


/********************************************************************
 * 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: 580px;
    height:  auto;
    background-color: #FFFFFF;
    color: #000000;
    float: left;
}

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

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

div#c2-second-column h2 {
    border-bottom: 1px solid #00b1b0;
}

div#c2-second-column h3 {
    margin: 20px 0 10px 0;
}


div#content form {
    margin: 10px 0 10px 0;
}

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

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

div#content a {
    color: #008AB1;
    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: #00b1b0;
    padding:  15px 0 15px 15px;
    margin:  0 0 15px 0;
    font-weight: lighter;
    font-size: 2em;
    text-transform: uppercase;
}

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

div#content-splash img {
    border-bottom: 3px solid #00b1b0;
}

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


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

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

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

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

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


/*****************************
 * Two Column Format
 *****************************/
div#c2-background {
    background-image:url('/site_media/images/cc_backdrop.png');
    background-repeat: no-repeat;
}

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

div#c2-min-height {
    width: 1px;
    height: 500px;
    float left;
}

/********************************************************************
 * Simple Pages
 *
 * Largely content free pages used for forms and displaying messages
 * such as login/logout and other administrative type information.
 *
 ********************************************************************/
div#simple-header {
    width: 870px;
    height:  140px;
    background-color: #FFFFFF;
    color: #000000;
    margin:  15px 15px 0 15px;
    border-bottom: 3px solid #00b1b0;
}

div#main-logo-simple {
    position: absolute;
    padding: 0 0 0 0;
    background-color: #FFFFFF;
}


div#simple-login {
    height:  30px;
    text-align: right;
    font-size: 0.8em;
    margin: 15px;
    background-color: #FFFFFF;
}

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

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

div#simple-menu {
    width: 870px;
    height:  40px;
    margin:  15px 15px 0 15px;
    border-bottom: 3px solid #00b1b0;
}

div#simple-menu ul {
    text-decoration: none;
}

div#simple-menu li {
    float: left;
    margin:  0 15px;
}

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

div#simple-menu a:hover {
    color: #00b1b0;
}

div#simple-content {
    width: 840px;
    margin:  15px 30px 0 30px;
    background-color: #FFFFFF;
    color: #000000;
}

div#simple-content h2 {
    color: #00b1b0;
    font-size: 1.3em;
    font-weight: lighter;
    margin: 20px 0 10px 0;
    border-bottom: 1px solid #00b1b0;
}

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

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

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

div#simple-content a {
    color: #008AB1;
    text-decoration: none;
}

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

span.mandatory {
    color: red;
}

/********************************************************************
 * 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#formcontainer {
    width:  840px;
    margin: 15px 0;
}

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: 250px;
    float: left;
}

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

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

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


/********************************************************************
 * Event Forms
 *
 * First up is the RSVP for Events that are Free.
 *
 ********************************************************************/
div#rsvpcontainer {
    width:  500px;
    margin: 15px 10px 30px 10px;
}

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

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

div#rsvpcontainer form input.rsvp-float-right {
    width: 200px;
    float: right;
}

/********************************************************************
 * Google Checkout Customizations
 ********************************************************************/
.override #googlecart-widget {
    margin-left: 30px;
}

.override #googlecart-widget-head {
    background:#ffffff;
    border-color:#00b1b0;
}

.override #googlecart-title {
    color:  #00b1b0;
}

.override #googlecart-widget-body {
    border-color:#00b1b0;
}

.override .googlecart-widget-quantity-box {
    border-color:  #00b1b0;
}

#googlecart-widget-spacer {
    width: 100px;
    float: left;
}


/******************************
 * Table Style Forms
 *****************************/
table { border-collapse: collapse; font-size: 1em; }
    td, th { padding: 4px 10px; border: 1px solid #ccc;}
    td.first, th.first { width: 120px;}
    th { background-color: #fff; }
    dt { font-weight: bold; }

form table { width: 100% }
    form table ul { margin: 0; padding: 0;}
    form table li { list-style-type: none; }
    form table th { text-align: right; width: 10em; }
    form tfoot td { text-align: center; background-color: #fff; }

.horizontal {
    width: 30em;
}

.horizontal li {
    float: left;
    margin: 0;
    list-style-type: none;
}

.horizontal li label {
    width: 4em;
    display: block;
    float: left;
}

.add-month-view td { vertical-align: middle; text-align: center; height: 4em; min-height: 4em; }
    .add-month-view td, .month-view th { min-width: 4em; width: 4em; }
    .add-month-view .day-ordinal { font-weight: bold; font-size: 1.1em; }
    .add-month-view ul { list-style: none; margin: 1px 2px; padding: 0; }
    .add-month-view .today { background-color: #71c0bd; }

#recurrence-options {
    float: left;
}

#recurrence-options li {
    margin-bottom: 4px;
}

.calendar td, .calendar th { min-width: 4em; width: 4em; }

table.month-view {
  border-collapse: collapse;
  font-size: 0.8em;
}
table.month-view td,
table.month-view th {
  padding: 0px 5px;
  border: 1px solid #ccc;
  width: 120px;
}
table.month-view tr.odd {
  background-color: #eee;
}
table.month-view tr.even {
  background-color: #fff;
}

.month-divider th, .month-divider td { border-top: 3px double #888; }

.daily-view {
  padding: 0px 5px;
  border: 1px solid #ccc;
}

table.daily-view { font-size: 0.8em; }
.daily-view .today { background-color: #71c0bd; }




/********************************************************************
 * 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;
}