/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    background: url("../img/bg.png") repeat scroll 0 0 #EFEFEF;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

a{
    text-decoration: none;
}

#widgets {
zoom:1;
}
.widget-wrapper {
    background-color: #F9F9F9;
    border: 1px solid #FF7A21;
    border-radius: 6px 6px 0px 0px;
    margin: 0 0 20px;
}
.widget-title {
    display: block;
    line-height: 23px;
    margin: 0;
    text-align: center;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom-color: #FF7A21;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #FF6F00;
}
.widget-ul-wrapper{
    padding: 10px 10px;
}
.widget-ul-wrapper .clearfix img{
    position: relative; float:left;padding:0;margin-right: 15px;
}

.widget-ul-wrapper .clearfix p{
position: relative; margin: 0;padding: 0;
}


#content{
    background-color: #fff;
    padding:10px;
    border-radius: 6px 6px 6px 6px;
}

.page-title{
    font-weight: 700;
    color: #31acea;
    display: inline-block;
    margin-bottom: 0px;
    padding:0;
    margin: 0px;
    font-size: 1.2em;
}

.page-container{
    margin: 0;
    padding:5px;
    border: 2px solid #B3D4FC;
    border-radius: 6px 6px 6px 6px;
    margin-top:20px;
    position: relative;
}
.calendar-timetable{
    color:#333333 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top:6px  !important;
    padding-bottom:6px  !important;
    float:left; 
    
}


p.page-content{
    margin-top:10px;
}

p.page-content-note{
font-size: .8em;    
}

.bold{
    font-weight: 700;
}

.underline{
    text-decoration: underline;
}



.sub-heading{
    color: #000;
    text-decoration: underline;
    font-weight: 700;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 14px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
 margin: 0 auto;
 width:97%;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
    border-bottom: 5px solid #666666;
    padding-top: 5px;
}

.footer-container,
.main aside {
    border-top: 5px solid #666666;
}




  

.title {
    display: block;
    width:50px;
    height:44px;
    background-image: url('../img/sprite4-50X514.png');
    background-position: -0px -432px;
    text-indent: -9999px;
    background-repeat:no-repeat;
    margin:0;
    margin-left: 5px;
    margin-top: 5px;
    
}
.title-text{
    font-family: sans-serif;
    font-size: .7em;
    margin: 0;
    margin-top:22px;
    float:left;
    color:#31acea;
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
    
}

    nav ul li {
    display: block;
    position: relative;
    

    }


nav a {
    display: block;
    margin-bottom: 0px;
    padding: 15px 0;
    padding-left:15px;

    text-align: left;
    text-decoration: none;
    font-weight: normal;

    background: #fff;
    border-top-width: 1px;
    border-top-color: #666; 
    border-top-style: solid;
    border-left-width: 1px;
    border-left-color: #666; 
    border-left-style: solid;
    border-right-width: 1px;
    border-right-color: #666; 
    border-right-style: solid;
    background-color: #31acea;

    /*
    border-width: 1px;
    border-color: #666; 
    border-style: solid;*/

}

nav li:first-child a{
    border-radius: 6px 6px 0px 0px;
}
nav li:last-child a{
    border-radius: 0px 0px 6px 6px;
    border-bottom-width: 1px;
    border-bottom-color: #666; 
    border-bottom-style: solid;

}


nav a:hover,
nav a:visited {
    color: 000;
}

nav a:hover {
    text-decoration: none;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 0;
}

.main article h1 {
    font-size: 2em;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.footer-container footer {
    padding: 20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */




.header-version-web-text{
    background-color: yellow;
}

#stage{
    position: relative;
}

#orientation{
    width:5px;
    height:5px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Smartphones (landscape) ----------- */
@media only screen  and (orientation: landscape) {

    
    body{
     font-size:1.2em;   
    }
    
    #orientation{
    background-color: blue;
}

    .img-kids{
        background-image: url('../img/kids-200X133-trans-quality-60.jpg');
        background-repeat: no-repeat;
        width:200px;
        height:133px;
    }
    
    .img-secondary-school{
        background-image: url('../img/secondaryschool_200X133-trans-60-quality.jpg');
        background-repeat: no-repeat;
        width:200px;
        height:133px;
        
    }
        .img-conversation-group{
        background-image: url('../img/conversation-group-200X132-trans-quality-60.jpg');
        background-repeat: no-repeat;
        width:200px;
        height:132px;
        
    }
    .img-telephone{
        background-image: url('../img/telephone-quality-60.jpg');
        background-repeat: no-repeat;
        width:200px;
        height:198px;
        
    }
    .img-cambridge{
        background-image: url('../img/cambridge-trans-quality-60.jpg');
        background-repeat: no-repeat;
        width:200px;
        height:220px;
    }
    


    


}


/* Smartphones (portrait) ----------- */
@media only screen  and (orientation: portrait) {
#orientation{
    background-color: purple;
}

    #stage img {
    width:100%;
    height:auto;
    }
    
    .img-kids{
        background-image: url('../img/kids-100X67.jpg');
        background-repeat: no-repeat;
        width:100px;
        height:67px;
    }
    
    .img-secondary-school{
        background-image: url('../img/secondaryschool-100X72.jpg');
        background-repeat: no-repeat;
        width:100px;
        height:72px;
        
    }
    
    .img-conversation-group{
        background-image: url('../img/conversation-group-100X66.jpg');
        background-repeat: no-repeat;
        width:100px;
        height:66px;
        
    }
    .img-telephone{
        background-image: url('../img/telephone-100X99.jpg');
        background-repeat: no-repeat;
        width:100px;
        height:99px;
        
    }
    .img-cambridge{
        background-image: url('../img/cambridge-100X111.jpg');
        background-repeat: no-repeat;
        width:100px;
        height:111px;
    }
    

    
}

/* Smartphones (portrait) ----------- */
@media only screen  and (orientation: portrait) and (min-width: 400px) {
#orientation{
    background-color: purple;
}

    #stage img {
    }
}





/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}



ol.carousel_itemList, ul.carousel_itemList {
    list-style: none outside none;
    margin: 0 !important;
    padding: 0 !important;
    margin-left:2px  !important;
}
#menu-button .carousel_itemList li.active {
    background-color: #EB7515;
}
#menu-button .carousel_itemList li {
    background-color: #505050;
    border: 0 none;
    float: left;
    height: 7px;
    margin: 0 2px;
    padding: 0;
    position: relative;
    width: 9px;
}
/*
#menu-button{
position: absolute; 
top:0; 
right:0;
padding:2px;
margin-right: 5%;    
margin-top: 5px;    
border: 1px solid #000;
border-radius: 6px 6px 6px 6px;
width:45px;
height:35px;
text-align: center;
}
*/

.menu-button{
    background-image: url('../img/nav-menu-sprite.png');
    display: block;
    margin-top: 5px;
}

.menu-button-abrir{
        width:45px;
        height:41px;
        float:right;
        background-position: 0px 0px;
}

.menu-button-cerrar{
        width:45px;
        height:41px;
        float:right;
        background-position: 0px -51px;
}


#menu ul a{
    display: block;
}


.img-holder{
    display: inline-block;
    width:44px;
    height: 44px;
    position: absolute;
    top:3px;
    left:8px;
    background-image: url('../img/sprite4-50X514.png');
}

.img-arrow-holder{
    display: inline-block;
    width:22px;
    height: 22px;
    position: absolute;
    top:19px;
    right:10px;
    background-image: url('../img/sprite4-50X514.png');
}

.tick{
    display: inline-block;
    width:10px;
    height: 10px;
    position: relative;
    top:6px;
    left:2px;
    background-image: url('../img/sprite4-50X514.png');
}

.home-img{
    background-position: -0px -0px;
}
.classes-img{
    background-position: -0px -54px;
}
.prices-img{
    background-position: -0px -270px;
}
.timetable-img{
    background-position: -0px -378px;
}
.contact-img{
    background-position: -0px -108px;
}
.faq-img{
    background-position: -0px -216px;
}
.error-img{
    background-position: -0px -162px;
}
.success-img{
    background-position: -0px -324px;
}
.arrow-img{
    background-position: 0px -492px;
}
.menu-text{
    font-size: .95em;
}

/*
div.footer-container footer.wrapper ul{
    margin: 0 auto;
    list-style: none outside none;
    margin: 0 !important;
    padding: 0 !important;
    margin-left:2px  !important;
}

div.footer-container footer.wrapper ul li{
    float:left;
    width:33%;
}
*/


.group-container{
    border:#000 solid 1px;
    padding:10px;
}

.group-wrapper{
position: relative;
margin-bottom: 10px;
}

div.group-container div:last-child{
    margin-bottom: 0px;
}



.group-time,.group-class{
    float: left;
} 
.group-time{
    width:20%;
}
.group-class{
    height:100px;
    width: 80%;
}

.group-class-header,.group-class-footer {
    position: absolute;
    text-align: center;
    width:85%;
}
.group-class-header{
    top:10px;
    font-weight: 700;
    color:#fff;
}

.group-class-footer{
    bottom:10px;
    font-size: .9em;
    color:yellow;
}

.ui-grid-solo{
margin-bottom: 5px !important;    
}


.leyenda-text{
font-size: .9em;display: inline-block;padding:0;margin:0;
}
.basic{
    padding: 10px;color:#fff;
}

.available{
        background-color: #fff !important;
}
.confirmed{
        background-color: #0B610B !important;
}

.full{
        background-color: #FE2E2E !important;
}
.recuperation{
        background-color: #0000A0 !important;
}
.pending{
        background-color: #FF6600 !important;
}
#leyenda{
    margin-top: 30px;position:relative;
}

.close-calendar-btn{
    float:right;
    display: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
}

#calendar-groups-container{
    display: none;
    margin-top: 10px;
    
}

.calendar-groups-wrapper{
    border: #666666 solid 1px;
    padding:10px;
    border-radius: 6px 6px 0px 0px;
}

.calendar-groups-title{
    line-height: 2; 
    font-weight: 700;
}

#contact-frm{
    padding:10px; border: #666666 solid 1px;margin-bottom: 10px;
    border-radius: 6px 6px 0px 0px;
}

.contact-validation-error {
    color: red;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 3px;
}

#contact-frm fieldset{
 border-bottom: #999999 solid 1px   
}
#contact-frm fieldset:last-child{
border-bottom: #fff solid 1px
}
#menu{
    padding-top: 10px;
    padding-bottom: 10px;
}
#groups{
    margin-top: 10px;
}
.group-holder-ajax{
    margin-top: 10px;
}

.email-sprite{
    background-image: url('../img/success-error-sprite.png');
    display: block;
    width:34px;
    height:34px;
    margin-right: 10px;
    float:left;
    border: 0 !important;

}

.email-success{
        background-position: 0px 0px;
}

.email-error{
        background-position: 0px -44px;
}
.popup-error-desc{
    color: #FE2E2E;
    font-weight: 700;
}

.no-class-today{
text-align: center;
background-color: 
red;border-radius: 6px 6px 6px 6px;
padding:5px;margin-bottom: 10px;    
color:#fff;font-weight: 700;
display:none;

}

.tab-option{
    margin-top: 5px;
}

.tab-option-container{
    height:45px; text-align: center;background-color: #a5a5a5;border-radius: 6px 6px 6px 6px;
}

.tab-option-title{
position: relative; height:45px; margin: 0 .8em;text-align: center;
}
.group-day{
    color:#fff;font-weight: 700; display: inline-block;line-height:45px;font-size: 1em;
}

.tab-option-nav{
    background-image: url('../img/groups-nav-sprite.png');
    width:37px;
    height: 37px;
}

.tab-option-nav-prev{
    background-position: 0px 0px;
    position: absolute;left:0;top:4px;
}

.tab-option-nav-next{
    background-position: 0px -47px;
    position: absolute;right:0;top:4px;
}
.a-plus-minus{
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top:4px  !important;
    padding-bottom:4px  !important;
}
#a-plus{
    margin-right: 10px !important;
}