/* ======================================================================== \
|   FORMA - The E-Learning Suite                                            |
|                                                                           |
|   Copyright (c) 2013 (Forma)                                              |
|   http://www.formalms.org                                                 |
|   License  http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt           |
|                                                                           |
|   from docebo 4.0.5 CE 2008-2012 (c) docebo                               |
|   License http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt            |
\ ======================================================================== */

html,body{height:100%;}
body{font:13px/1.231 arial,sans-serif;color:#333333;background:#fff;*font-size:small;*font:x-small;}
.header,.content,.footer,.webcontent, .external_page{position:relative;width:900px;margin:0 auto;padding:0;}
.webcontent-catalogue {position:relative;width:80%;margin:0 auto;padding:0;}
.header{height:70px; padding:5px 0;}
.header .cat_link{text-decoration:none;color:#1f497d;} /*#C84000 */
.header .catalogue{position:absolute;bottom:10px;right:215px;font-size:90%;letter-spacing:1px;}
.header .select-language{position:absolute;bottom:10px;right:15px;font-size:90%;letter-spacing:1px;}
.header #main_title{position:absolute;bottom:10px;left:0px;width:221px;height:53px;background:url(../images/company_logo.png) no-repeat 0 100%;overflow:hidden;}
.header #main_title a{display:block;width:221px;height:53px;padding:0 300px 0;}
.content{width:898px;height:372px;background:url(../images/login/image.jpg) no-repeat 0 0;border:1px solid #1f497d;} /*#C84000 */
.content h2 {position:relative;color:#fff;font-size:180%;font-weight:normal;margin:0;padding:0 14px;}
.content .login-box, .content .login-box-social{float:right;width:31%;height:342px;background:url(../images/login/bg_login.png) repeat 0 0;padding:15px 0; margin:0 20px;}
.content #login_confirm{margin:20px 28px;padding:0;}
.content #login_confirm p,.content #login_confirm div {}
.content #login_confirm label {font-size:90%;font-weight:bold;margin:0 10px 4px 0;}
.content #login_confirm input.textfield {font-size:100%;font-weight:normal;margin:4px 0;padding:2px;width:218px;border:1px solid #1f497d;} /*#C84000 */
.content #login_confirm input#login{background:#929B00;border:0px none;color:#ffffff;font-size:100%;font-weight:bold;padding:3px 18px;margin:6px 0;}
.content #social_login{float:right;zoom:1;margin-right:10px;}
.content #social_login span{ font-weight: bold; }
.content #social_login a{ margin: 0 4px;}
.content #social_login img{ height: 22px; }
.content #service_msg{font-size:90%;position:relative;width:100%;}
.content .logout{display:block;padding:3px 18px;background:url(../images/login/bg_login.png) repeat 0 0;}
.content .login_failed{display:block;color:#ffffff;background:#EE1111;padding:3px 18px;-khtml-opacity:.80; -moz-opacity:.80; -ms-filter:"alpha(opacity=80)"; filter:alpha(opacity=80); opacity:.80; }
.content .homecatalogue{position:absolute;top:15px;left:25px;font-size:90%;letter-spacing:1px;padding:5px;background-color:1f497d;} /*#C84000 */
.content .homecatalogue a{text-decoration:none;color:#ffffff}
.content .homecatalogue a:hover{text-decoration:underline;}

.footer{background:#1f497d;height:21px;font-size:90%;}
.footer-catalogue{background:#1f497d;height:21px;font-size:90%; width:100%}

.footer #link{margin-top:3px;padding:3px 16px 4px;}
.footer-catalogue #link{margin-top:3px;padding:3px 16px 4px;}

.footer a{text-decoration:none;color:#fff;}
.footer-catalogue a{text-decoration:none;color:#fff;}

.footer a:hover{text-decoration:underline;}
.footer-catalogue a:hover{text-decoration:underline;}

.footer #link a.first{font-weight:bold;padding:0 6px 0 0;margin:0 3px 0 0;border-right:1px solid #ffffff;}
.footer-catalogue #link a.first{font-weight:bold;padding:0 6px 0 0;margin:0 3px 0 0;border-right:1px solid #ffffff;} 

.footer .copyright{position:absolute;bottom:-6px;right:16px;color:#fff;}
.footer-catalogue {bottom:-6px;right:16px;color:#fff;} 

.footer .ownedby{color:#fff;}


.webcontent .box {margin:10px 5px;}
.webcontent h3 {margin:0 0 10px;padding:0;font-size:140%;color:#1f497d;} /*#C84000 */
.webcontent p {margin:0 0 6px;}
/* XXX:register class ======================================*/
.reg_note{font-weight:bold;margin:1em 0 0;padding:0.20em;}
.reg_form{padding:0.40em;}
.reg_title_privacy{margin:24px auto 4px;padding:0.20em;width:70%;color:#ffffff;;font-weight:bold;}
.privacy_box{margin:0 auto;padding:0.40em;width:90%;max-height:150px;overflow:auto;background:#ffffff;border:1px solid #1f497d;} /*#C84000 */
.reg_form_button{text-align:right;margin:0 auto;padding:0.40em;}
.reg_button{cursor:pointer;font-weight:bold;}
ul.reg_instruction{margin:0.20em 0.20em 1em;padding:4px 12px 4px 24px;}
ul.reg_instruction li{list-style-type:square;margin:2px;}
.reg_err_data{margin:0.40em;padding:0.40em;color:#ff0000;font-weight:bold;border:1px solid #ff0000;}
.reg_success{margin:0.40em;padding:0.40em;;border:1px solid #ffffff;}
.lostpwd_box{margin:1em;padding:0.60em 0.60em 0 0.60em;}
.lostpwd_logo{margin:0 0.40em;padding:0;}
.lostpwd_box span{font-weight:bold;}
.form_right{margin:0.60em 0 0 0;padding:0.40em;text-align:right;color:#ffffff;font-weight:bold;background:#1f497d;} /*#C84000 */
.form_right .textfield{margin:0 14px; width:auto; padding:0; border:1px solid #4180ac;}
/* external page management ======================================*/
.external_page{background:#1f497d;} /*#C84000 */
.external_page ul#main_menu{position:relative;left:0px;padding: 10px 7px;font-size:0.8em;}
.external_page ul#main_menu li{display:inline;margin:0 0 0 10px;border-right:1px solid #fff;}
.external_page ul#main_menu li.last{border:0px none;}
.external_page ul#main_menu li a{margin:0 10px 0 0;color:#fff;font-weight:normal;text-decoration:none;}
.external_page ul#main_menu li a.odd{color:#003466;}

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

    * {
        box-sizing: border-box;
    }

    body {
        width: 100%;
        min-width: 100%;
    }

    .header {
        width: 100%;
        height: auto;
        padding: 10px 15px;
        
    }

    .header .left_logo {
        max-width: 70%;
    }

    .content {
        width: 100%;
        height: auto;
        background: none;
        
    }

    .content h2 {
        padding: 0px;
        top: 20px;
        color: #000;
    }

    .content .homecatalogue {
        left: 17px;
    }

    .content #login_confirm {
        margin: 40px 0px;
    }

    .content .login-box, .content .login-box-social {
        width: 100%;
        height: auto;
        background-color: #ffffff;
        float: none;
        margin: 0px;
        padding: 30px 15px;
    }

    .content #login_confirm p {
        margin: 0;
    }

    .content #login_confirm label {
        margin-bottom: 0;
    }

    .content #login_confirm input.textfield {
        width: 100%;
        height: 30px;
    }

    .content #login_confirm input#login {
        width: 100%;
        height: 30px;
    }

    .header, .content, .footer, .webcontent, .external_page {
        width: 100%;
    }

    .login-line {
        margin-bottom: 20px;
    }

    .footer {
        height: auto;
        padding: 10px 0px 10px 0px;
        line-height: 20px;
    }

    .footer #link {
        padding: 3px 15px 4px;
        margin-top: 0px;
    }

    .footer #link {
        padding: 0px 15px 0px 15px;
    }

    .footer .copyright {
        position: relative;
        bottom: auto;
        right: auto;
        padding: 0px 15px 0px 15px;
    }

    div#language_setup_c {

    }

    .webcontent .box {
        margin: 0px;
    }

    .lostpwd_box {
        padding: 0px;
        margin: 0px 0px 30px 0px;
    }

    .header, .content, .footer, .webcontent, .external_page{
        position: relative;
        width: 100%;
        margin: 10px auto;
    }

    .external_page ul#main_menu {
        padding: 10px 5px;
    }


    .form_right .textfield {
        height: 25px;
    }

    .reg_form_button {
        text-align: center;
    }

    #reg_button-button {
        width: 115px;
        height: 30px;
        margin: auto;
        font-size: 100%;
    }
}

@media only screen and (max-width : 768px) {
    .header {
        margin: 10px auto 40px;
    }

    .header .select-language {
        position: absolute;
        bottom: -20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    div#language_setup_c {
        left: 0 !important;
        width: 100% !important;
    }

    div#language_setup {
        width: 100% !important;
    }

    p label[for="new_lang"] { display:none; }
}