/*-------------------------------------------------------------------------------------------*/
/* 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) {
    #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) {
    #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 #fieldset-step2 { 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) {
    #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 #fieldset-step2 { 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; }
}