/* --------------------------------------------------------------------------
 * MYFINDA CSS FILE:
 * -------------------------
 * VERS: v0.1
 * -------------------------
 * This file will assist design.css at the same level and specify
 * styling for right hand column modules and particular inpage 
 * fragments/widgets. It sets up common design elements for module styles
 * which can be overridden at the design_*variation*.css level for colours. 
 * 
 * INHERITANCE LEVELS:---------------
 * [Browser]
 *  +(YUI Reset)
 *  +(YUI Fonts)
 *  +(YUI Grids)
 *      +(global_elements.css)
 *          +(modules.css)
 *          +(design.css)
 *              +(design_<appname>.css) - << YOU ARE HERE - Separate application in the site. 
 *              +(design_*site-variation*.css) - future regional branding?
 * 
 -------------------------------------------------------------------------- */

/* =============================================================================
    SMART SPRITES - SPRITE IMAGE DIRECTIVES
                    [Any new smartsprites definitions should be made here]
                    [Sprite image directives inherit from design.css]
   ===========================================================================*/
    /*Sprite names in use: finda_globals-vert, finda_globals-horiz*/
    

/* =============================================================================
    COLOR GLOSSARY
        - LIGHTGREY > BG, KEYLINES, IMG-BORDER: #F3B600
        - CHARCOAL  > BASE TEXT:                #333333
        - MIDGREY   > PAGINATION-OFF, TXTFIELD: #999999
        - BLUE      > STANDARD LINKS:           #0374B1
        - LIGHTBLUE > HIGHLIGHTED LINKS:        #49ACE1
        - PINKYRED  > WEATHER-MAXTEMP:          #FF6666
    ==========================================================================*/


/* =============================================================================
 *   MOVIES PAGES
 * ============================================================================*/

.myFindaSidebarLinks li {
    padding: 0 0 6px 0;
}

p.serverMessage {
    font-weight: bold;
    clear: both;
	border-bottom: 1px solid #E9E9E9;
	padding: 0 0 10px 0;
	margin: 0 0 13px 0;
}


.formSection {
    padding-bottom: 20px;   
}

    .formSection .formSectionHelp {

    }
    
        .formSection .formSectionHelp p {
            margin: 0 0 2px 0;
            font-size: 11px;
        }
        
        .formSection .formSectionHelp .title {
            font-weight: bold;
        }
    
    .formSection .formSectionFields {
        
    }
    
        .formSection .formSectionFields .formElement{
            display: inline;
            float: left;
            font-size: 11px;
            margin: 0 0 8px 0;
        }
        
            .formSection .formSectionFields .formElement p {
                display: block;
                font-weight: bold;
                margin: 0 0 10px 0;
                font-size: 11px;
            }
        
            .formSection .formSectionFields .formElement label {
                display: block;
                font-weight: bold;
                margin: 0 0 2px 0;
            }
            
            .formSection .formSectionFields .formElement label.inline {
                display: inline;
            }
            
            .formSection .formSectionFields .formElement input, 
            .formSection .formSectionFields .formElement select {
                display: inline;
                margin: 0 12px 0 0;
                width: 180px;
                color: black;
            }
            
            .formSection .formSectionFields .formElement select {
                width: 184px;
            }
            
            .formSection .formSectionFields .formElement input[type="checkbox"] {
                width: 16px;
                float: left;
                clear: left;
                display: inline;
                margin: 0 4px 0 0;
            }
            
            .formSection .formSectionFields .formElement textarea {
                display: inline;
                width: 380px;
                max-width: 380px;
                height: 80px;
            }
            
        .formSection .formSectionFields .formElement.checkbox{
            display: block;
        }
                
        .formSection .formSectionFields .formElement.checkbox input{
            width: 16px;
            float: left;
            clear: left;
            display: inline;
            margin: 0 4px 0 0;
        }
                    
            .formSection .formSectionFields .hiddenfields {
                display: none;
            }
            
            .formSection .formSectionFields button[type="submit"] {
                color: #0374b1;
                font-weight: bold;
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: center right;
  background-image: url('../images/finda_globals_sprite-vert.png?7c1b523b1af87cae557c1fc387d60e2a');
  background-position: right -972px;
                
                /* IE6 can haz smart sprites? No. */
                -background-image: url(../images/arrow_doublearrow_right.png);
                -background-position: center right;
                
                padding: 0 15px 0 0;
                font-size: 12px;
            }
            
            .formSection .formSectionFields button#submitButton {
                color: #0374b1;
                font-weight: bold;
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: center right;
  background-image: url('../images/finda_globals_sprite-vert.png?7c1b523b1af87cae557c1fc387d60e2a');
  background-position: right -972px;
                
                /* IE6 can haz smart sprites? No. */
                -background-image: url(../images/arrow_doublearrow_right.png);
                -background-position: center right;
                
                padding: 0 15px 0 0;
                font-size: 12px;
                
                width:auto;
                overflow:visible;
            }    
            
            .formSection .formSectionFields button[type="submit"]:hover{
                color: #49ace1;
            }
            
            .formSection .formSectionFields button#submitButton:hover {
                color: #49ace1;
            }   
            
            .formSection .formSectionFields button[type="submit"].pushRight {
                margin: 0 0 0 285px;
            }
            
            .formSection .formSectionFields button#submitButton.pushRight {
                margin: 0 0 0 285px;
            }
            
            .formSection .formSectionFields button#cancelButton {
                color: #c30000;
                position: absolute;
                left: 240px;
                font-weight: bold;
                background-color: transparent;
                font-size: 12px;
            }
            
            .formSection .formSectionFields button#cancelButton:hover {
                color: #ff0000;
            }
        
        .formSection .formSectionFields .formElement.capcha img{
            margin-bottom: 4px;
            border: 0 none !important;
        }
            
        .formSection .formSectionFields .formElement.capcha input{
            display: block;
        }
        
/*==============================================================================
    Page specific elements
==============================================================================*/

    ul#myFindaNav li {
        line-height: 20px;
        margin: 0 0 10px 0;
    }
    
    ul#myFindaNav li a {
        font-weight: bold;
        margin: 0 0 0 10px;
    }

    .formSection .formSectionFields .formElement#timeSec01 select,
    .formSection .formSectionFields .formElement#timeSec02 select {
        margin: 0 2px 0 0;
        width: 58px;
    }
    
    .formSection .formSectionFields .formElement #when_calendar_container {
        width: 180px;
        margin: 0 15px 0 0;
    }
    
    .formSection .formSectionFields .formElement #when_calendar_0 {
        width: 100%;
    }
    
    .formSection .formSectionFields .formElement #e-venue_street_0,
    .formSection .formSectionFields .formElement #id_e-venue_street_0 {
        width: 55px;
    }
    
    .formSection .formSectionFields .formElement #e-venue_street_1,
    .formSection .formSectionFields .formElement #id_e-venue_street_1 {
        width: 180px;
    }
    
    .formSection .formSectionFields .formElement #e-venue_street_2,
    .formSection .formSectionFields .formElement select[name="e-venue_street"] {
        width: 100px;
    }
    
    .formSection .formSectionFields .formElement #id_e-long_description {
        height: 160px;
    }
    
    .formSection .formSectionFields .formElement #id_e-organiser_url {
        width: 376px;
    }
    
    .ac_results {
        background-color: #fff;
        text-align: left;
        padding: 2px;
        border: 1px solid #e9e9e9;
    }
    
    .ac_results ul li {
        font-size: 11px;
        padding: 2px;
        cursor: pointer;
        border-bottom: 1px dotted #e9e9e9;
    }
    
    .ac_results ul li:hover {
        color: #0374b1;
    }

    /* Events List */
    
    .listEventsList .listEventsEvent {
        padding: 10px 0 10px 0;
        border-bottom: 1px dotted #E9E9E9;
    }
    
    .listEventsList .listEventsEvent:first-child {
        padding: 0 0 10px 0;
    }
    
        .listEventsList .listEventsEvent p {
            margin: 0 0 17px 0;
        }
        
        .listEventsList .listEventsEvent li {
            margin: 0 0 3px 0;
        }
    
        .listEventsList .listEventsEvent li.eventOptions {
            margin: 17px 0 0 0;
        }
        
            .listEventsList .listEventsEvent li.eventOptions a {
                margin: 0 15px 0 0;
                font-weight: bold;
            }
/*==============================================================================
    Misc Elements
==============================================================================*/
.reqFieldsText {
    padding-top: 9px;
    font-size:11px;
}

#when_calendar.errorMsgshow {
	border: 1px solid #c30000 !important;
	background-color: #f6d6d6 !important;
}

a.cancelEventHeaderLink {
    color: #c30000;
    font-size: 12px;
    padding: 0 0 0 16px;
}

a.cancelEventHeaderLink:hover {
    color: #ff0000;
}

/* =============================================================================
	Error page elements
==============================================================================*/
	
.errorMsgshow input, .errorMsgshow select, .errorMsgshow textarea {
	border: 1px solid #c30000 !important;
	background-color: #f6d6d6 !important;
	color: #c30000;
}
.errorMsgshow input[type="hidden"], .errorMsgshow select[type="hidden"], .errorMsgshow textareat[type="hidden"] {
	border: 0 none !important;
}
.errorMsgshow {color: #c30000 !important;}

.errorMsgshow label {
	color: #333;
}
p.errorMsg{
	color: #c30000;
	clear: both;
	/*float: left;*/
	font-weight: bold;
	margin-bottom: 10px;
}
ul.errorMsgList{
	clear: both;
	border-bottom: 1px solid #E9E9E9;
	padding: 0 0 13px 0;
	margin: 0 0 13px 0;
}
ul.errorMsgList li {
    padding: 0;
}
ul.errorMsgList li a{
	text-decoration: none;
	font-size: 11px;
}
ul.errorMsgList li a:hover{
	text-decoration: underline;
}
#signUp .errorMsg input, #signUp .errorMsg select{
	border: 1px solid #c30000;
	background-color: #f6d6d6;
	color: #c30000;
}
.errorMsg #terms ul li label, .errorMsg #terms ul li label a{
	color: #c30000;
}

/* =============================================================================
	Success page elements
==============================================================================*/

.successMsg {
    color: #A7C638;
}