/*************************************************

CASEYS GRILL BAR
MAY 2008
BY 76design


***************************************************
    GENERIC
    */


HTML {
    font: 62.5%/160% Verdana, Arial, Helvetica, sans-serif;
    background:#c41130 url('../images/html-bkg.gif') repeat-x;
    color: #000;
    }

BODY {
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

.clearleft { /* used on templates/homepage.php */
    clear:left;
    height:1px;
}
/***************************************************
    WRAPPER
     */
#wrapper {
    width:773px;
    margin: 0px auto;
    text-align:left;
    overflow:hidden;
    background:#FFF;
    position:relative;
    }

/***************************************************
    HEADER
    */
#header {
    background: url('../images/html-bkg.gif') repeat-x;
    }

#header H1 {
    display:none;
    }

#header H2 {
    color:#FFF;
    padding:26px 0 0 0;
    margin:0;
    border:none;
    font-size:280%;
    }

#header IMG {
    float:left;
    margin:0 15px 0 0;
    }

#header H3 {
    color:#f7931d;
    margin:0;
    border:none;
    font-size:190%;}

#language {
    position:absolute;
    top:0;
    right:0;
    color:#FFF;
    background:#60101e;
    padding:10px 15px;
    font-weight:bold;
    text-decoration:none;
    }


/***************************************************
    MAIN MENU
    */

#topmenu {
    clear:both;
    background:url(../images/nav-bkg.gif) repeat-x;
    margin:0;
    padding:0 0 2px 0; /* alignment cheat */
    }

#topmenu LI  {
    list-style:none;
    float:left;
    margin:0 0 0 3px;
    }

#topmenu A {
    display:block;
    padding:0 0 0 8px;
    font-size:110%;
    font-weight:bold;
    color:#FFF;
    height:33px;
    line-height:33px;
    text-decoration:none;
    }

#topmenu A STRONG {
    display:block;
    line-height:33px;
    padding:0 6px 0 0;
    }
#topmenu A:hover{background:url(../images/nav-overstates.gif) top left no-repeat;}
#topmenu A:hover STRONG {background:url(../images/nav-overstates.gif) top right no-repeat;}


#topmenu .selected{background:url(../images/nav-overstates.gif) bottom left no-repeat;}
#topmenu .selected STRONG {background:url(../images/nav-overstates.gif) bottom right no-repeat;}

/***************************************************
    SIDEBAR
     */
#sidebar {
    width:220px;
    margin:0 25px;
    height:330px;
    float:right;
    padding:45px 0;
    font-size:120%;
    }

#sidebar UL,
#sidebar UL LI {
    list-style:none;
    padding:0;
    margin:0;
    }

#sidebar UL LI {
    margin:8px 0;
    }

#sidebar UL LI A {
    text-decoration:none;
    color:#000;
    }

#sidebar .text {
    width:100%;
    }

/***************************************************
    CONTENT

     */



.default #content {
    /*width:483px;*/
    padding:25px 15px;
    }

#content {
    font-size:120%;
    line-height:160%;
    padding:15px;
    }

#content UL LI {
    background:url(../images/bullet.gif) 0px 6px no-repeat;
    padding:0 0 0 20px;
    list-style:none;
    margin:15px 0;
    }
#advertisement UL LI{
    list-style:none;
    padding:0;
    margin:0;
    background:none;
    text-align:center;
    }
#advertisement UL {
    list-style:none;
    padding:0;
    margin:0;
    background:none;
    text-align:center;
    }
#advertisement {
    padding:0;
    margin:0;
    background:none;
    text-align:center;
    }


#content OL LI UL LI{
    list-style:none;
    }

#advertisement {
    text-align:center;
    float:left;
    width: 237px;
    height:316px;
    margin:0 15px 0px 0;
    overflow:hidden; /*otherwise grid will break */
    }

/***************************************************
    HOMEPAGE � FEATURE
     */

p.msg {
    background:#FFFFBB none repeat scroll 0%;
    color:#000000;
    font-size:115%;
    margin:10px auto;
    padding:5px;
    text-align:center;
    width:200px;
}
p.error {
    color:red;
}
#footer #newsletter {
    margin:0 0 20px 0;
}

#newsletter_title {
    color:orange;
    font-size:14px;
}
#feature {
    background:/*#000 url(../images/featureb-en.jpg) no-repeat */;
    width:458px;
    float:left;
    height:286px;
    }
.fr #feature {/*background:#000 url(../images/featureb-fr.jpg) no-repeat; */}
#feature H1  {
    font-size:500%;
    text-transform:uppercase;
    line-height:80%;
    font-weight:bold;
    color:#FFF;
    }

/***************************************************
    HOMEPAGE � ACTION BOX (the boxes on the homepage with actions - join team, book event, etc)
     */
.action-box {
    float:left;
    width:237px;
    height:140px;
    margin:15px 15px 0 0;
    }

.action-box H5 {
    color:#FFF;
    font-size:140%;
    margin:50px 15px 0 15px;
    }

.action-box A {
    color:#FFF;
    text-decoration:none;
    }
.action-box P A:hover {
    color:#FFF;
    text-decoration:underline;
    }

.action-box P {
    margin:15px;
    background:#000;
    display:block;
    line-height:110%;
    color:#FFF;
    padding:5px;
    }

#join-our-team {	background:url(../images/action-join-our-team.gif) no-repeat;}
#book-your-event{	background:url(../images/action-book-event.gif) no-repeat;}
#location {	background:url(../images/action-location.gif) no-repeat;}

.last {
    margin-right:0 !important;
    }

.link-picture{
    float:left;
    font-size:90%;
    line-height:110%;
    margin:0 30px 100px 0;
    text-decoration:none;
    width:100px;
    text-align:center;
    }
.link-picture IMG {
    display:block;

    }
/***************************************************
    CONTACT PAGE � MAP
     */
#map {
    width:350px;
    height:250px;
    margin:0 0 20px 20px;
    float:right;
    border-left:solid 20px #FFF;
    }
/***************************************************
    MENU � FULL VIEW (aka "single")
     */

.single A.return-to-menu {
    margin:0 0 10px 0;
    font-weight:bold;
    text-align:left;
    border-bottom:solid 1px #c00;
    padding:0 0 20px 0;
    text-decoration:none;
    }

.single A {
    text-align:center;
    display:block;
    }

#upload {
    border-bottom:solid 1px #000;
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    }
/***************************************************
    CALENDAR
    */


.calendar #content .feature.events {
    float: right;
    height: auto;
    position: relative;
}

.calendar #content .header {
    width: 480px;
    _width: 460px;
    margin: 9px 0;
    text-align: center;
    padding: 5px;
}

.calendar #content .header A {
    text-transform: uppercase;
    font-size: 90%;
    display: block;
    margin: 1em 0 0;
    text-decoration:none;
}

.calendar #content .header .forward {
    float: right;
    padding: 0 20px 0 0;
    background: url("../images/arrow_right.gif") no-repeat right;
}

.calendar #content .header .back {
    float: left;
    padding: 0 0 0 20px;
    background: url("../images/arrow_left.gif") no-repeat left;
}

.calendar #content TABLE.calendar {
    width: 480px;
    _width: 460px;
    border: none;
    border-spacing: 8px;
    margin: 0 12px;
}

.calendar #content TABLE.calendar THEAD TH {
    text-transform: uppercase;
    text-align: center;
    color: #666;
    border-bottom:solid 3px #D91F40;
}

.calendar #content TABLE.calendar TBODY TD {
    height: 60px;
    width: 60px;
    _width: 45px; /* IE hack (all other browser ignor this "unknown" property */
    vertical-align: top;
    background: #ffecef;
    border: solid 1px #e0b6bd;
    overflow: hidden;
}

.calendar #content TABLE.calendar TBODY TD:hover {
    background: #ffdee4;
}

.calendar #content TABLE.calendar TBODY TD EM {
    font-style: normal;
    float: left;
    display: block;
    padding: 0 3px 3px 2px;
    margin: 0 0 4px 0;
    width: 48px;
}

.calendar #content TABLE.calendar TBODY TD.firstmonth EM {
    color: #880c21;
}

.calendar #content TABLE.calendar TBODY TD .event {
    clear: left;
    display: block;
    overflow: hidden;
    width: 42px;
    margin: 4px;
    padding: 2px;
    white-space: nowrap;
    font-size: 90%;
    line-height: 100%;
    background: red;
    text-decoration: none;
}

.calendar #content TABLE.calendar TBODY TD .event:hover {
    padding: 1px;
    border: solid 1px #ffb;
}

.calendar #content TABLE.calendar TBODY TD .event.type1 { /* promo */
    background: #f7931d;
    color: #FFF;
}

.calendar #content TABLE.calendar TBODY TD .event.type2 { /* special event */
    background: #720b1d;
    color: #FFF;
}

.calendar #content TABLE.calendar TBODY TD .event.type3 { /* music */
    background: #db1d1d;
    color: #fff;
}

.calendar #content TABLE.calendar TBODY TD .event.type5,
.calendar #content TABLE.calendar TBODY TD .event.type6 {
    background: #dbba1d;
    color: #fff;
}


.calendar #content .feature.events UL LI.type1 { /* promo */
    border-left: solid 10px #f7931d;
    _border-width: 15px;
}

.calendar #content .feature.events UL LI.type2 { /* special event */
    border-left: solid 10px #720b1d;
    _border-width: 15px;
}

.calendar #content .feature.events UL LI.type3 { /* music */
    border-left: solid 10px #db1d1d;
    _border-width: 15px;
}

.calendar #content .feature.events UL LI.type5,
.calendar #content .feature.events UL LI.type6 {
    border-left: solid 10px #dbba1d;
    _border-width: 15px;
}




.calendar #content #listing {
    margin:0 10px 0 0;
    padding:0;
    }


/***************************************************
    CONTENT > FEATURE > EVENTS
*/

#content .feature.events h3{
border-bottom:solid 1px #000; padding:0 0 15px 0;margin:17px 0 15px 0;font-size:1.8em;margin-bottom:0.75em;line-height:1em;}


#content .feature.events {
    width:240px;
}
#content .feature.events UL {
    text-align: left;
    list-style: none;
}

#content .feature.events UL LI {
    background: #fafafa;
    margin: 0 0 4px;
    overflow: hidden;
    width:100%;
    padding:0;
    font: normal 1em "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;

}



#content .feature.events UL LI A {
    text-decoration: none;
    color:#666;
    display: block;
    padding: 4px;
    width: 100%;
    overflow: hidden;
}

#content .feature.events UL LI A:hover {background: #FAFFCF;}
#content .feature.events UL LI.even A:hover { background: #FAFFCF; }

#content .feature.events UL LI .date {
    float: left;
    font: bold 2em/0.7em arial,helvetica,sans-serif;
    text-align: center;
    padding: 3px 10px 0 3px;
    width: 30px;
    color:#000;
    }

#content .feature.events UL LI .date EM {
    display: block;
    font-size: 50%;
    font-style: normal;
}

#content .feature.events UL LI STRONG {
    font: bold 1em/1em georgia,"times new roman",serif;
    display: block;
    margin: 3px 0 0;
    color: #b61424;
}

#content .feature.events UL LI A:hover STRONG {
    text-decoration: underline;
}

#content .feature.events UL LI.promo STRONG { }
#content .feature.events UL LI.music STRONG { color: #ff4045; }

#event-detail.detail {
    text-align: left;
    padding: 5px 5px 10px;
    margin: 0 5px;
    background: #fff;


}

#event-detail.detail .close {
    float: left;
    font-size: 90%;
    margin: 0 5px 7px;
    background:#D91F40;
    color:#FFF;
    padding:0 3px;
}

#event-detail.detail H4 {
    color: #c62b2f;
    font-size: 145%;
    clear: left;
    text-align: center;
    padding: 0 10px 5px;
    border-bottom: solid 2px #D91F40;
    margin: 25px 0 10px;
}

#event-detail.detail P {
    font: normal 90% verdana,arial,helvetica;
    margin: 3px 5px;
}

#event-detail.detail P EM {
    font-style: normal;
    color: #c41130;
}

#event-detail.detail .desc {
    margin: 15px 0;
}

.homepage #event-detail.detail .desc {
    overflow: auto;
    height: 80px;
}

#event-detail.detail .att A {
    display: block;
    margin: 3px 0;
}

#event-detail.detail .att A.mp3 {
    padding: 0 0 0 20px;
    background: url("../images/calendar/att_music.gif") no-repeat left;
}

#event-detail.detail .att A.jpg {
    padding: 0 0 0 20px;
    background: url("../images/calendar/att_photo.gif") no-repeat left;
}

#event-listing-busy {
    background: url("../images/ajax_indicator.gif") no-repeat center center;
    width: 100%;
    height: 30px;
}
#event-listing-busy {
    background: url("../images/ajax_indicator.gif") no-repeat center center;
    width: 100%;
    height: 30px;
}


/***************************************************
    FOOTER
     */

#footer {
    clear:both;
    width:773px;
    margin:20px auto;
    }


#footer UL {
    margin:0 auto 20px auto;
    width:773px;
    }

#footer UL LI {
    list-style:none;
    display:inline;
    margin:0 15px 0 0;

    }

#footer UL LI  A {
    color:#FFF;
    text-decoration:none;
    }

#footer UL LI  A:hover {
    text-decoration:underline;
    }