/*
 * Global style elements
 * wejoinin.com
 * @author darkwulf, andrew
 *
 * Colors:

 *** KULER THEME **
 * Orange: DB4105
 * Tan/white: CCCC9F
 * Dark blue: 083645
 * Dark olive: 3D3D20, 544A27, 5E503E
 * Blue: 9FB4CC

 ** THE REST **
 * Tan (light): #f1e4c2, A18263
 * Tan (dark):  #837764
 * Brown: #98562e
 * Blue (dark): #7F9995, 5A696E, 7396A1
 * Blue (light): #dde8f3
 * Blue-grey (dark): #083645
 * Red (light): #DC502A
 * Red (med): #cc4c2b
 * Carousel Purple: 615d5b
 */

/**
 * First, import other sheet elements
 */
@import "base/defaults.css";
@import "base/buttons.css";
@import "base/view_table.css";
@import "base/edit_table.css";

/**
 * ----- TOOLTIP -----
 * The quote-y looking popup thing.
 * Like a modal window; only pointier!
 */
.tooltip {
    position: absolute;
    display: none;
    width: 300px;
    text-align: left;

}
.tooltip input[type=text] {
    width: 250px;
}
.tooltip .contents {
    padding: 0.5em;
    background: #fff;
    border-left: 5px solid #98562e;
    border-right: 5px solid #98562e;
    border-bottom: 5px solid #98562e;
    overflow:hidden;
}

.tooltip.loading .contents {
    height: 64px;
    background: #FFF url(../images/spinner.gif) center center no-repeat;
}

.tooltip .contents h1 {
    font-size: 1.5em;
}

.tooltip .top-padding {
    background: url(../images/tooltip-top.gif) no-repeat bottom;
    height:24px;
}
/* instructional cues that describe tooltip actions */
.tooltip .description {
    font-size:0.9em;
    color:#333;
    line-height:1.2em;
    margin-bottom:0.8em;
}

/* Info hints should be smaller. */
.tooltip .info {
    font-size:0.85em;
    line-height: 1.2em;
    margin-bottom: 0.8em;
}

/* +/- comment in signup block specific styles */
#signup-tooltip #comment-prompt {
    margin: 0.5em -0.7em;
    padding: 0.5em 0.7em;
    background: #f7f7f7;
    border: 1px solid #EEE;
}
#signup-tooltip #comment-prompt label {
    color: #cc4c2b;
    line-height: 15px;
}
#signup-tooltip #comment-prompt label span {
    float: left;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    text-indent: -9000px;
    padding-right: 5px;
    background: url(/images/micro_plus_minus.gif) no-repeat top left;
}
#signup-tooltip .active#comment-prompt label span {
    background-position: bottom left;
}
#signup-tooltip #comment-prompt div.info {
    padding-left: 17px;
}

/**
 * ----- MODULES -----
 */
div.module {
    margin: 0 0 1em 0;
}
div.module.tabbed {
    margin: 0 0 1em -1em;
    padding:0.4em 0.4em 0.8em 0.75em;
    background-color:#FFF;
    border-bottom:1px solid #DDD;
    border-right:1px solid #CCC;
}

div.module.shaded {
    background-color: #F2F7FB;
}

/* Admin module */
div#admin.module { margin-bottom: 0; border-bottom: 2px solid #EEE }
div#admin.module ul { margin:0; }
div#admin.module ul li { list-style:none; }
div.module.tabbed h2.title {
    font-family: Georgia, "Bitstream Vera Serif", serif;
    font-style:italic;
    font-weight:normal;
    font-size:1.25em;
    color:#776;
    margin-bottom:0.5em;
}
div#admin.module li.action a {
    display:block;
    padding:0.4em 0.3em 0.4em 28px;
    margin-top:0.2em;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    border-bottom:1px solid #999;
    border-right:1px solid #999;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-decoration:none;
    background-color:#837764;
    background-repeat: no-repeat;
    background-position: 6px 50%;
    color:#FFF;
    font-size:0.9em;
}
div#admin.module li.action a:hover {
    background-color:#f1e4c2 !important;
    color:#776 !important;
}

/* Admin module - module links */
div#admin.module li#preview.action a {
    background-image: url(/images/icons/page_white_magnify.png);
}
div#admin.module li#edit-title-desc.action a {
    background-image: url(/images/icons/rename.png);
}
div#admin.module li#view-emails.action a {
    background-image: url(/images/icons/email_go.png);
}
div#admin.module li#duplicate.action a {
    background-image: url(/images/icons/copy.png);
}
div#admin.module li#rotate.action a {
    background-image: url(/images/icons/arrow_rotate_clockwise.png);
}
div#admin.module li#clear-signups.action a {
    background-image: url(/images/icons/eraser.png);
}
div#admin.module li#delete.action a {
    background-image: url(/images/icons/delete.png);
}

/* Admin options module */
#admin-options h2 {
    margin: 7px 7px 0 -0.5em;
    padding-left: 0;
    position: relative;
}
#admin-options h2 span.expand {
    position: absolute;
    bottom: 3px;
    left: 5px;
    display: block;
    height: 12px;
    width: 12px;
    text-indent: -9000px;
    background: url(/images/micro_plus_minus.gif) no-repeat top left;
}
#admin-options.active h2 span.expand {
    background-position: bottom left;
}
#admin-options h2 a {
    display: block;
    margin-left: 0.9em;
    padding-left: 7px;
}
#admin-options div.content {
    margin: 0 7px; /* Prevents jitter with slideToggle */
}

/* special styling for the remove module */
div#remove-signup.module {
    background-color:#EFE38a;
    border:1px solid #CCC;
}
div#remove-signup.module h2 {
    color:#98562e;
}
div.module h2.title {
    font-size:1.35em;
    margin:7px 7px 0pt 7px;
}
div.module div.content {
    margin:0pt 7px 7px 7px;
    line-height:1.3;
}
div.module ol {
    font-size:0.95em;
    line-height:1.3;
    margin-top:0;
    margin-bottom:0;
}

/**
 * ----- FRONT PAGE -----
 * Hacked a bit.
 */

 body#frontpage {
    background:#FFF;
 }
 body#frontpage .yui-t7 {
    text-align:center;
 }

/**
 * ------- REUSABLE ELEMENTS --------
 */
/* link will turn to hand cursor */
a.join,
.hover-pointer,
button,
a.button {
    cursor:pointer;
    cursor:hand;
}
/* link will turn to text cursor */
.text-pointer {
        cursor:text;
}
/* Stylistic Ornaments */
hr.divider {
    color:#DDD;
    height:0px;
    border:0;
    border-bottom: 1px solid #CCC;
    width:45%;
    margin: 1.2em auto;
}
/* dividers on content box are left-aligned */
hr.divider.left {
    margin-left:-0.7em;
}
ul.big-links {
    list-style: none;
    margin: 0;
    padding: 1px 0;
    background: #f1e4c2 url(../images/big_link_bkg.gif);
}
ul.big-links li {
    margin: 5px;
    list-style:none;
}
ul.big-links li a {
    display:block;
    font-weight:bold;
    font-size:1.5em;
    padding: .5em;
    margin: 5px 0 0;
    color: #888;
    margin-bottom:6px;
    background-color: #FFE; /* accColor */
    text-decoration: none;
    border-top: 1px solid #FFE;
    border-left: 1px solid #FFE;
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;
}
ul.big-links li a:hover {
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-bottom: 1px solid #FFE;
    border-right: 1px solid #FFE;
}

/*  hacked for the inplaceedit form -- reset to .subheader style
    from h1 style. */
h1 .subheader {
    font-family: Frutiger, Univers, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size:0.3em; /* for the edit header in sheet titles */
}

/**
 * ----- BLANK SHEET -----
 * On admin view.
 */
#blank-table {
        margin:1em auto;
        overflow:hidden;
}
#blank-table #manually-build,
#blank-table #view-examples,
#blank-table #or {
        float:left;
}

#blank-table #manually-build,
#blank-table #view-examples {
        width:45%;
}
#blank-table #or {
        width:10%;
        text-align:center;
        font-size:1.3em;
        padding: 1em 0;
}
#blank-table .content {
        padding-left:66px;
    min-height:64px;
}
#blank-table #view-examples .content {
        background: url('/images/icons/new_sheet/view_examples-64x64.png') top left no-repeat;
}
#blank-table #manually-build .content {
    background: url('/images/icons/new_sheet/manual_new_sheet-64x64.png') top left no-repeat;
}

/**
 * ------ FORMS -----
 */
ul.form-container {
    display: block;
    list-style: none;
    margin: 0.2em;
    padding: 0;
    width: 100%;
}
ul.form-container li {
    margin: 1em 0 0 0;
    padding: 0;
    list-style:none;
}
ul.form-container label {
    display: block;
    font-weight: bold;
}
ul.form-container input.checkbox {
    width: auto;
    margin-right: 0.5em;
}

ul.form-container li.one-line label {
    display: inline;
}

ul.form-container li.one-line input {
    display: inline;
    width: auto;
    float: none;
    clear: both;
}

ul.form-container li.explain {
    font-size: 0.8em;
    color: #555;
    margin: 0;
}

input.text, input.password, textarea {
    line-height:1.2em;
    padding:0.2em;
    width:90%;
    color:#333;
    font-size:1.25em;
    border-top:1px solid #333;
    border-left:1px solid #333;
    border-bottom:1px solid #BBB;
    border-right:1px solid #BBB;
}
/* Add a focus class to input elements when they receive focus
 * (JQuery LiveQuery does this for us.... thanks HF). */
input.text.focus,
input[type=text].focus,
input.password.focus,
input[type=password].focus,
textarea.focus {
    color:#333;
    border:1px solid #cc4c2b;
    background-color:#FFE;
}
.form-container .info {
    color: #777;
}

/**
 * ----- Form Field Errors -----
 */
li.field-with-errors .error {
        background: transparent url("/images/icons/bullet_error.png") no-repeat 6px;
        padding:4px 0 4px 23px;
        color: #CC5A5A;
}
li.field-with-errors ul.errors {
        margin:0;
        padding:0;
}
li.field-with-errors ul.errors li.error {
        padding:4px 0 2px 23px;
        margin:0;
}
li.field-with-errors input.text,
li.field-with-errors input.password,
li.field-with-errors textarea {
        border-color: #CC5A5A;
}

/**
 * ----- Flashes -----
 */
ol#flash-wrapper {
    margin: 15px 0 7px;
    padding: 0;
}
/* success flashes are green = good */
li.flash {
    border: 1px solid #A7C7A1;
    color: #54824A;
    padding:0.5em;
    padding-left: 28px;
    background: #DAEBCC url("../images/icons/accept.png") no-repeat 6px;
    margin:0.2em 0 0.7em 0;
    font-size:1.1em;
    line-height:1em;
    list-style: none;
}
/* error flashes are red with a red exclamation mark */
li.flash.error {
    background: #FCCCC2 url("../images/icons/exclamation.png") no-repeat 6px;
    color:#CC5A5A;
    border: 1px solid #D1B4B6;
}
/* warning flashes are brown and have a yellow "!" triangle icon */
li.flash.warning {
    border: 1px solid #D3BCA8;
    color:#837764;
    background: #f1e4c2 url("../images/icons/error.png") no-repeat 6px;

}
/* notice flashes are brown and have a blue "i" icon */
li.flash.notice {
    border: 1px solid #D3BCA8;
    color:#837764;
    background: #f1e4c2 url("../images/icons/information.png") no-repeat 6px;
}

/* these margins are for flashes outside the
   confines of the #content block */
.outside-flash li.flash {
    margin: 0 15px 5px 15px; /* give 'em margins */
}
/* extra column on yui-t5s (2-col), so no right margin */
.yui-t5 .outside-flash li.flash {
    margin-right:0;
}
div.empty {
    /*background-color:#F0F0F0;*/
    /*border:1px solid #CCC;*/
    color:#999;
    padding:2em;
    line-height:2em;
}

/**
 * ----- Home -----
 */
div#header-actions ul,
div#header-actions li {
    margin:0;
    padding:0;
    list-style:none;
}
div#manage-sheets {
    border-collapse:collapse;
    margin:10px 0;
    width:100%;
    padding:0;
}
div#manage-sheets div.sheet {
    overflow:hidden;
    clear:both;
    padding: 0.4em;
}
div#manage-sheets div.sheet:last-child {
    border-bottom:0;
}
div#manage-sheets div.even.sheet {
    background-color:#F5F5F5;
}
div#manage-sheets span.tag {
  float: left;
  height:1.8em;
  line-height:1.8em;
  font-size:0.85em;
  padding: 0.15em 0.33em;
  margin-right: 0.33em;
  color: #aaa;
  border-right: 1px solid #aaa;
}
div#manage-sheets a.name {
    margin-left: 0.2em;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    text-decoration:none;
    outline:none;
    display: block;
}
div#manage-sheets a.name span.title {
    font-size:1.5em;
    font-weight: bold;
}
div#manage-sheets a.name:hover span.title {
    text-decoration:underline;
}
div#manage-sheets a.name span.desc {
    font-size:1.1em;
    font-family: Georgia, "Bitstream Vera Serif", serif;
    font-style:italic;
    color:#667;
    padding-left:0.6em;
}
div#manage-sheets a.name span.dotdotdot {
    position: absolute;
    right: 0;
    padding-left: 5px;
    font-size: 1.5em;
    color: #667;
    background-color: #FFF;
}
div#manage-sheets div.even.sheet a.name span.dotdotdot {
    background-color: #F5F5F5;
}
div#manage-sheets ul.actions {
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    overflow:hidden;
}
div#manage-sheets ul.actions li {
    list-style:none;
    float:left;
    margin-top:0.2em;
    padding:0;
}
div#manage-sheets ul.actions li.action a {
    display:block;
    height:1.8em;
    line-height:1.8em;
    padding:0.15em 0.33em 0.15em 24px;
    font-size:0.85em;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border: 1px solid transparent;
}
div#manage-sheets ul.actions li.action a:hover {
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #CCC;
    border-left:1px solid #CCC;
}

/**
 * Link styling for manage-sheet links on dashboard
 */
div#manage-sheets ul.actions li.create a {
    background: url("../images/icons/add.png") no-repeat 4px;
}
div#manage-sheets ul.actions li.view a {
    background: url("../images/icons/page_white_magnify.png") no-repeat 4px;
}
div#manage-sheets ul.actions li.edit a {
    background: url("../images/icons/page_white_edit.png") no-repeat 4px;
}
div#manage-sheets ul.actions li.view-emails a {
    background: url("../images/icons/email_go.png") no-repeat 4px;
}
div#manage-sheets ul.actions li.delete a {
    background: url("../images/icons/delete.png") no-repeat 4px;
}
div#manage-sheets ul.actions li.copy a {
    background: url(/images/icons/copy.png) no-repeat 4px;
}

/**
 * ----- Tabs -----
 * and assorted things that live in that region.
 */
div#nav-tabs {
    width:100%;
    overflow:auto;
}

/**
 * Style for a standard tab-group
 */
ul.tab-group {
    list-style:none;
    padding:0;
    margin:0;
}
ul.tab-group li {
    list-style:none;
    padding:0 3px 0 0;
    margin:0;
    float:left;
}
ul.tab-group li a {
    padding:5px;
    height:1.3em;
    line-height:1.3em;
    display:block;
    float:left;
    background-color:#F3F3F3;
    text-decoration:none;
    border-bottom:0;
}
ul.tab-group li a:hover {
    background-color:#FFF;
}
ul.tab-group li.current a {
    background-color:#FFF;
}

/**
 * ----- Edit Sheet -----
 */
div#sheet-description p {
    font-size:1.3em;
    font-family: Georgia, "Bitstream Vera Serif", serif;
    color:#555;
}

/**
 * Edit-slot-limits tooltip on sheet admin.
 */

#edit-slot-limits #unlimited,
#edit-slot-limits #limited {
        height:30px;
        font-size:1.3em;
}
#edit-slot-limits input[type=radio] {
        float:left;
        clear:both;
        margin:0.5em 0.3em;
        line-height:30px;
}
#edit-slot-limits label {
        padding: 0.3em 0;
}
/* simulate the label */
#edit-slot-limits #signup_slot_set_limit {
        float:left;
        font-weight:bold;
        line-height:30px;
}
/* hide the real label */
#edit-slot-limits label#yes_label {
        display:none;
}
/* input field in simulated label is smaller */
#edit-slot-limits #signup_slot_set_limit input[type=text] {
        width:auto;
        padding:2px;
        width:2.5em;
        display:inline;
}
#edit-slot-limits .button-group{
        clear:both;
}

/**
 * ----- Edit Account -----
 */
#account-settings-form label {
    display:inline;
}
#account-settings-form .section {
        margin:1em 0;
}
#account-settings-form input[type=text],
#account-settings-form input[type=password] {
    width:300px;
    display:block;
}