/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (min-width: 900px) {
    body { background: url(../images/background/bowling.jpg) no-repeat center 0 #000; background-size: 100% auto; }
    #wrapper-outer { padding: 180px 0 50px 0; }
    #wrapper { float: none; width: 650px; margin: 0 auto; }
    #header { -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
    #content, #completed-bottom, #booking-type { -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; }
    #box-shadow { float: left; width: 100%; box-shadow: 0px 0px 10px #222; -moz-border-radius: 10px; border-radius: 10px; }
    #disclaimer { border: none; }
    #help { border: none; padding-bottom: 0; }
        
    .btn-wrap { float: left; width: 50%; padding: 10px 25%; }
    
    #large-group { background: url(../images/background/large-groups-bg.jpg) no-repeat center 0 #040203; background-size: 100% auto; }
    #birthday-party { background: url(../images/background/birthday-balloons.jpg) no-repeat center 0 #14100d; background-size: 100% auto; }
    #birthday-party #box-shadow { box-shadow: 0 0 10px #222; }
    #birthday-party #wrapper-outer { padding-top: 120px; }
    #birthday-party #disclaimer p { color: #4c94b1; }
    
    #help h3, #help p { color: #fff; }
}

@media screen and (max-width: 650px) {
    
    body { font-size: 16px; }
    p, li { font-size: 13px; line-height: 1.45em; color: #666; margin: 0 0 1.45em 0; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 16px; }
    #disclaimer p { font-size: 13px; }
    .selectwrap select, fieldset input, fieldset textarea { font-size: 16px!important; }
    #booking-type ul li { font-size: 20px; }
    
    #header { padding: 20px 7%; }
    #birthday-party #header { width: 80%; padding: 10px 10%; }
    #content { padding: 25px 7%; }
    #disclaimer, #help { padding: 20px 15%; }
    #completed-top, #completed-bottom { padding: 25px 7%; }
    
    #progress-bar { padding: 12px 7%; }
    #progress-bar ul li { text-align: center; width: 33.3%!important; }
    #progress-bar ul li .name { display: none; }
    #progress-bar ul li .num { float: none!important; }
    #progress-bar ul li .num img { float: none; margin: 0; line-height: 0; display: inline-block; vertical-align: middle;}

    #progress-bar ul li:first-child { text-align: left; }
    #progress-bar ul li:last-child { text-align: right!important; background: url(../images/progress-bar-divider.gif) repeat-x 0 center; }
    #progress-bar ul li.active:last-child { text-align: right!important; background: url(../images/progress-bar-divider-active.gif) repeat-x 0 center; }

    #mid-section .thumb { height: 92px; width: 92px; margin-left: -20px; }
    #mid-section #booking-details { width: 130px; }
    
    #completed-bottom p { font-size: 16px; }
}


@media screen and (max-width: 520px) {
    #mid-section #centre-details { width: 220px; }
    #mid-section #booking-details { width: 100%; border-top: solid 1px #ccc; padding: 8px 0 0 0; margin-top: 15px; }
    #mid-section #booking-details p { float: left; padding-right: 15px; }
    #mid-section #booking-details p strong { display: none; }
    #mid-section .thumb { margin-left: 0px; }
 
    #booking-type { width: 86%; padding: 25px 7%; }
}

@media screen and (max-width: 385px) {
    #mid-section #centre-details { width: 180px; }
}

@media screen and (max-width: 340px) {
    #mid-section #centre-details { width: 100%; }
    #mid-section .thumb { display: none; }
}