/*-------------------------------------------------------------------------------------------*/
/* Base Grid */
/*-------------------------------------------------------------------------------------------*/

	#container { position: relative; width: 940px; margin: 0 auto; }

/*-------------------------------------------------------------------------------------------*/
/* Tablet (Portrait) - Note: Design for a width of 768px */
/*-------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        body, #sidebar, .step-info { background-image: none !important; }
        #header {
            -webkit-background-size: cover !important;
            -moz-background-size: cover !important;
            -o-background-size: cover !important;
            background-size: cover !important;
        }
        #container { width: 768px; }
        #content-container { margin-right: 10px; }
        .unit { float: none !important; width: auto !important; }
        #header, .step-content { height: auto !important; }
        #lang { float: right !important; }
        #step-nav { float: left !important; }
        #step-nav li { display: none !important; }
        #step-nav li.current { display: inline !important; }
        #security-info p { padding: 10px 10px 0 !important; text-align: left !important; }
        #navbar #security-info { display: block !important; float: right; }
        #navbar #security-info p { padding: 0 !important; text-align: right !important; }     
        .payment-submit, #next-submit { text-align: left !important; padding: 5px 10px 0 !important; }
        #type-a #regular, #type-a #sidebar, #type-a #other-payment-bloc  { display: block !important; }
        #type-a #or { margin: 0 !important; }
        #type-a .bis { padding: 0 !important; }
        #type-b .step-info, #type-c .step-info { display: none; }
        #share-action ul, .fb, .tw { margin: 0 !important; }
        #greetings-comp fieldset { padding: 0 10px !important; }
    }

/*-------------------------------------------------------------------------------------------*/
/*  Mobile (Portrait) - Note: Design for a width of 320px */
/*-------------------------------------------------------------------------------------------*/

    @media only screen and (max-width: 767px) {
        body, #header, #sidebar, .step-info { background-image: none !important; }
        #container { width: 300px; }
        #content-container { margin-right: 10px; }
        .unit, #postmail { float: none !important; width: auto !important; }
        #header, .step-content, .step-info { height: auto !important; }
        #logo h1, #logo a, #logo img { float: none !important; text-align: center; }
        #logo img, .radio-desc img, .thumbs img { height: auto; max-width: 100%; }
        #lang { text-align: center !important; display: block; }
        #step-nav li { display: none !important; }
        #step-nav li.current { display: inline !important; }
        #security-info { display: none !important; }
        .payment-submit, #next-submit { text-align: center !important; }
        #type-a #regular, #type-a #sidebar, #type-a #other-payment-bloc  { display: block !important; }
        #type-a #or { margin: 0 !important; }
        #type-a #step-2 fieldset { padding: 10px !important; }
        #type-a .bis { padding: 0 !important; }
        #type-b .step-info, #type-c .step-info { display: none; }
        #postmail { margin: 10px auto 20px !important; }
        #share-action ul, .fb, .tw {margin: 0 !important; }
        #greetings-comp fieldset { padding: 0 10px !important; }
    }

/*-------------------------------------------------------------------------------------------*/
/* Mobile (Landscape) - Note: Design for a width of 480px */
/*-------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        body, #header, #sidebar, .step-info { background-image: none !important; }
        #container { width: 420px; }
        #content-container { margin-right: 10px; }
        .unit, #postmail { float: none !important; width: auto !important; }
        #header, .step-content, .step-info { height: auto !important; }
        #logo h1, #logo a, #logo img { float: none !important; text-align: center; }
        #logo img, .radio-desc img, .thumbs img { height: auto; max-width: 100%; }
        #lang { text-align: center !important; display: block; }
        #step-nav li { display: none !important; }
        #step-nav li.current { display: inline !important; }
        #security-info { display: none !important; }
        .payment-submit, #next-submit { text-align: left !important; padding: 5px 10px 0 !important; }
        #type-a #regular, #type-a #sidebar, #type-a #other-payment-bloc { display: block !important; }
        #type-a #or { margin: 0 !important; }
        #type-a .bis { padding: 0 !important; }
        #type-a #step-2 fieldset { padding: 10px !important; }
        #type-b .step-info, #type-c .step-info { display: none; }
        #postmail { margin: 10px auto 20px !important; }
        #share-action ul, .fb, .tw {margin : 0 !important; }
        #greetings-comp fieldset { padding: 0 10px !important; }
    }