@charset "utf-8";
/* CSS Document */

@media only screen and (min-width : 800px) and (max-width : 1024px), only screen and (min-device-width : 800px) and (max-device-width: 1024px) and (orientation : portrait) {


    #siteWrapper {
        margin: 15px 0;
    }

    #siteInner {
        background-size: 90% auto;
        width: 780px !important;
    }

    .inner {
        padding: 0 !important;
        width: 780px;
    }

    #headerInner {
        padding: 0;
        width: 780px;
    }

    #header #nav {
        margin-top: 35px;
        width: 780px;
    }
    #header #nav ul li a {
        padding: 0 16px;
    }

    #contentInner iframe {
        width: 100%;
    }

    .twoColumn .leftLargePane {
        width: 520px !important;
    }
    .twoColumn .leftLargePane img {
        max-width: 520px !important;
    }

    .twoColumn .rightSmallPane {
        width: 240px !important;
    }
    .twoColumn .rightSmallPane img {
        max-width: 240px !important;
    }

    .twoColumn .leftSmallPane {
        width: 240px !important;
    }
    .twoColumn .leftSmallPane img {
        max-width: 240px !important;
    }

    .twoColumn .rightLargePane {
        width: 520px !important;
    }
    .twoColumn .rightLargePane img {
        max-width: 520px !important;
    }

    .twoColumn .leftHalfPane {
        width: 380px !important;
    }
    .twoColumn .leftHalfPane img {
        max-width: 380px !important;
    }

    .twoColumn .rightHalfPane {
        width: 380px !important;
    }
    .twoColumn .rightHalfPane img {
        max-width: 380px !important;
    }

    #content .leftPane {
        width: 250px;
    }
    #content .leftPane img {
        max-width: 250px;
    }

    #content .centerPane {
        width: 250px;
    }
    #content .centerPane img {
        max-width: 250px;
    }
    #content .centerPane .C_Container.callout .cancel-appointment,
    #content .centerPane .C_Container.callout .add-confirmation {
        background-size: contain;
        height: 60px;
        width: 250px;
    }

    #content .rightPane {
        width: 250px;
    }
    #content .rightPane img {
        max-width: 250px;
    }

    #footerInner {
        background-size: 100% auto;
        padding-top: 30px !important;
    }

}

@media only screen and (min-width : 651px) and (max-width : 799px), only screen and (min-device-width : 641px) and (max-device-width: 799px) {

    #siteWrapper {
        margin: 15px 0;
        min-width: 320px;    
    }

    #siteInner {
        background-size: 90% auto;
        width: 640px !important;
    }


    .inner {
        padding: 0 !important;
        width: 640px;
    }

    #headerInner {
        padding: 0;
        width: 640px;
    }

    #header #nav {
        margin-top: 35px;
        width: 640px;
    }
    
    #header #nav ul li a {
        font-size: 18px;
        padding: 0 10px;
    }

    #contentInner iframe {
        width: 100%;
    }

    .twoColumn .leftLargePane {
        margin-right: 10px !important;
        width: 420px !important;
    }
    .twoColumn .leftLargePane img {
        max-width: 420px !important;
    }

    .twoColumn .rightSmallPane {
        width: 210px !important;
    }
    .twoColumn .rightSmallPane img {
        max-width: 210px !important;
    }

    .twoColumn .leftSmallPane {
        margin-right: 10px !important;
        width: 210px !important;
    }
    .twoColumn .leftSmallPane img {
        max-width: 210px !important;
    }

    .twoColumn .rightLargePane {
        width: 420px !important;
    }
    .twoColumn .rightLargePane img {
        max-width: 420px !important;
    }

    .twoColumn .leftHalfPane {
        width: 310px !important;
    }
    .twoColumn .leftHalfPane img {
        max-width: 310px !important;
    }

    .twoColumn .rightHalfPane {
        width: 310px !important;
    }
    .twoColumn .rightHalfPane img {
        max-width: 310px !important;
    }

    #content .leftPane {
        margin-right: 10px;
        width: 420px;
    }
    #content .leftPane img {
        max-width: 420px;
    }

    #content .centerPane {
        margin-right: 0;
        width: 210px;
    }
    #content .centerPane img {
        max-width: 210px;
    }
    #content .centerPane .C_Container.callout .cancel-appointment,
    #content .centerPane .C_Container.callout .add-confirmation {
        background-size: contain;
        height: 50px;
        width: 210px;
    }

    #content .rightPane {
        width: 210px;
    }
    #content .rightPane img {
        max-width: 210px;
    }

    #footerInner {
        background-size: 100% auto;
        padding-top: 30px !important;
    }

    #footerInner div {
        float: none !important;
        margin-bottom: 10px;
        text-align: center !important;
        width: 100%;
    }

    #footer #footerMenu ul li {
        display: inline-block;
        float: none;
        margin: 0 5px !important;
    }

    #footer #footerSecondaryMenu a {
        margin: 0 10px !important;
    }

}


@media only screen and (max-width : 650px), only screen and (max-device-width: 650px) {


    .mobileHide {
        display: none;
    }

    .mobileShow {
        display: block !important;
    }

    .mobileFull {
        float: left !important;
        padding: 0 3% !important;
        margin: 0 0 1em !important;
        width: auto !important;
    }

    .inner {
        margin: 0;
        padding: 0;
        width: auto !important;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 1.5em 0 !important;
    }

    #siteWrapper {
        margin: 0;
        min-width: 320px;    
    }

    #siteInner {
        background-position: 50% 100px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #siteInner p, #siteInner table, label.confirmation-message {
        font-size: 1.5em !important;
        line-height: 1.15em;
        margin-bottom: 1em;
    }

    #siteInner table {
        width: 100% !important;
    }

    #header {
        background-color: #0F316E;
        padding: 10px;
    }

    #mobileLogo {
        background: url(/Portals/0/Images/ame-stl-logo-footer.png) no-repeat;
        background-size: 165px 27px;
        display: block;
        float: left;
        height: 27px;
        width: 165px;
    }

    #mobileHeaderLinks {
        float: right;
    }
    #mobileHeaderLinks a {
        display: block;
        float: left;
        margin-left: 30px;
        text-indent: -9999px;
    }

    #mobileHeaderLinks .schedulingBtn {
        background: url(images/mobileCalendarBtn.png) no-repeat;
        background-size: 30px 32px;
        height: 32px;
        width: 30px;
    }
    #mobileHeaderLinks .menuBtn {
        background: url(images/mobileMenuBtn.png) no-repeat;
        background-size: 33px 31px;
        height: 31px;
        width: 33px;
    }

    #contentInner {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    #contentInner .mobileTopPane {}

    #contentInner .mobileTopPane .C_Container.callout {
        margin-top: 1.25em;
        padding: 0;
    }

    #contentInner .mobileTopPane .C_Container.callout .Normal,
    #contentInner .mobileTopPane .C_Container.callout p {
        margin: 0;
    }

    #contentInner .C_Container.callout .cancel-appointment,
    #contentInner .C_Container.callout .add-confirmation {
        background: none;
        height: auto;
        width: 100%;

    }

    #contentInner .C_Container.callout a.btn-cancel-appointment,
    #contentInner .C_Container.callout a.btn-add-confirmation {
        border: 0;
        height: auto;
        margin: 0;
        padding: 0;
        filter: alpha(opacity=100);
        opacity: 100;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
    }

    #contentInner .C_Container.callout img {
        display: block;
        width: 100%;
    }
    #contentInner .C_Container.callout img.mobileHide {
        display: none;
    }

    #contentInner .C_Container.callout a.btn span {
        display: none;
    }

    #contentInner iframe {
        width: 100%;
    }

    .fc-header {
        margin: 0 !important;
    }

    .fc-header-title h2 {
        margin: 0 !important;
    }

    #colorLegend #genevaOffice, #colorLegend #oHareOffice {
        display: inline-block;
        margin: 0 5px !important;
    }

    #colorLegend #genevaOffice div, 
    #colorLegend #oHareOffice div {
        border: solid 1px #000;
        float: left;
        height: 20px;
        width: 20px;
    }

    #colorLegend p {
        float: left;
        font-size: 16px !important;
        height: 22px !important;
        line-height: 22px !important;
        margin: 0 0 0 10px;
    }

    .fc-event-vert .fc-event-time {        
        float: left;
    }
    .fc-event-time, .fc-event-title {
        font-size: 2em;
        line-height: 36px;
    }
    .fc-agenda-slots td div {
        height: 40px;
    }

    .modal {
        left: 3% !important;
        margin: 0 !important;
        width: 94% !important;
    }

    .modal-header h3 {
        margin: 0.35em 0 !important;
    }

    .modal-body {
        max-height: 220px;
        overflow-y: auto;
    }

    .modal-body input[type="text"] {
        width: 90%;
    }

    .form-horizontal .control-label {
        width: 30% !important;
    }
    .form-horizontal .controls {
        margin-left: 35% !important;
    }

    .btn  {
        
        padding: 4px 10px;
    }
    .modal-footer .btn + .btn {
        margin-left: 0;
    }

    .btn-cancel-appointment, .btn-add-confirmation {
        margin-bottom: 15px;
    }

    #footerInner {
        background-image: none;
    }

#footer .leftPane {
float: none;
margin-bottom: 20px;
}
    #footerAddresses {        
        margin: 0;
        padding: 3%;
    }
    #footerAddresses p {
        color: #95261d;
        font-size: 1em !important;
        line-height: 1.25em;
        margin: 0;
        padding: 0;
    }
    #footerAddresses .geneva {
        float: left;
        text-align: left;
        width: 47%;
    }
    #footerAddresses .oHare {
        float: right;
        text-align: right;
        width: 47%;
    }


#footer .centerPane {
float: none;
}
#footer .phone h2 {
font-size: 21.5px; 
}

#footer #footerSecondaryMenu {
    text-align: center;
float: none;
}
    #copyright {        
        padding: 1% 3%;
        text-align: center !important;
        width: 94%;
    }
    #copyright span {
        color: #FFF;
    }

}