/* 
    Document   : layout
    Created on : Jun 12, 2013, 5:49:54 PM
    Author     : Ping
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

body {
    border: 0;
    padding: 0;
    margin: 0;
    color: #231f20;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

@font-face {
    font-family: "Dear Joe 5";
    src: url("webfontkit-20130612-033817/dj5ctrial-webfont.eot");
    src: local("☺"),
        url("webfontkit-20130612-033817/dj5ctrial-webfont.woff") format("woff"),
        url("webfontkit-20130612-033817/dj5ctrial-webfont.ttf") format("truetype"),
        url("webfontkit-20130612-033817/dj5ctrial-webfont.svg#filename") format("svg");
}

img, ul, ol {
    border: 0;
    padding: 0;
    margin: 0;
}

a {
    color: #231f20;
    font-family: Verdana;
    display: block;
    text-decoration: none;
}

.wrap {
    width: 980px;
    margin: 0 auto;
    border-top: none;
    border-bottom: none;
}

/*<<<<<<<<<<<header>>>>>>>>>>>*/

.header {
    width: 100%;
    height: 485px;
    background: url(../img/header.jpg) top center repeat-x;
    text-align: right;
}

.logo {
    float: left;
    margin-top: 23px;
}

.header ul {display: inline-block;}

.header ul li {display: inline-block;}

.header ul li ul {
    display: none;
    margin-top: 1px;
    position: absolute;
    overflow: auto;
    background: url(../img/layout/submenu.png) bottom left repeat;
    padding: 7px;
    padding-top: 11px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(css/PIE.htc);
    z-index: 50;
}

.header ul li:hover ul {display: block;}

.header ul li ul li {
    position: relative;
    display: block;
    margin: 0;
    background: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(css/PIE.htc);
}

.header ul li ul li a {
    position: relative;
    background: #ffffff;
    color: #231f20;
    padding: 7px 10px !important;
    text-align: left;
    margin-top: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(css/PIE.htc);
    z-index: 9999;
}

.header ul li ul li a:hover, .header ul li ul li a.active {
    background: #f3700d;
    color: #ffffff;
}

.menu1 {
    position: relative;
    background: #5ec526;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    behavior: url(css/PIE.htc);
    margin-top: 28px;
    padding-right: 90px;
    padding-left: 3px;
    margin-right: 63px;
    z-index: 52 !important;
}

.menu1 li:hover a, .menu1 li a.active {background: url(../img/layout/direction_up_bright.png) bottom center no-repeat;}

.menu1 li a span {
    color: #ffffff;
    display: inline-block;
    vertical-align: 40%;
    padding: 7px 12px;
    font-weight: normal;
    margin-bottom: 0;
}

.menu1 li a img {
    border: 1px #ffffff solid;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    behavior: url(css/PIE.htc);
    margin: 4px 4px 1px 0;
}

.fb-like {
    position: absolute !important;
    margin-top: -21px;
    right: 3px;
}

.fb-like span iframe {background: transparent !important;}

.menu2 {
    margin-top: 33px;
    margin-right: 33px;
}

@-moz-document url-prefix() {
    .menu2 {margin-top: 30px;}
}

.menu2 li {
    color: #333333;
    position: relative;
    margin-right: 41px;
}

.menu2 li:hover {
    color: #28af36;
    background: url(../img/layout/menu.jpg) bottom left repeat-x;
}

.menu2 li:hover a {
    color: #28af36;
}

.menu2 li a img {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 51;
    padding: 5px 7px;
}

.menu2 li:hover a img, .menu2 li a:hover img {
    background: url(../img/layout/submenu_head.png) center 26px no-repeat;
    background-position: center 25px\9;
    display: block;
}

@-moz-document url-prefix() {
    .menu2 li:hover a img, .menu2 li a:hover img {background-position: center 25px;}
}

 .menu2 li a.active img {display: block;}

.menu2 li a {
    padding-bottom: 3px;
}

.menu2 li a:hover, .menu2 li a.active {
    color: #28af36;
    background: url(../img/layout/menu.jpg) bottom left repeat-x;
}

.menu2 li ul {
    margin-top: 31px !important;
    margin-top: 30px\9 !important;
    width: 100%;
}

@-moz-document url-prefix() {
    .menu2 li ul {margin-top: 30px !important;}
}

.menu2 li ul li {background-image: none !important;}

.banner {
    width: 1116px;
    height: 435px;
    margin-top: 17px;
    margin-top: 18px\9 !important;
    margin-left: -136px;
}

@-moz-document url-prefix() {
    .banner {margin-top: 18px !important;}
}

#franchise_business_submenu {margin-left: -7px;}
#manufacturing_submenu {margin-left: -59px; width: 211px;}
#network_submenu {margin-left: -56px; width: 161px;}

/*<<<<<<<<<<<content>>>>>>>>>>>*/

.sidemenu {
    background: url(../img/sidemenu/general.png);
    width: 382px;
    height: 413px;
    float: left;
    margin-left: -96px;
    margin-top: -116px;
}

.sidemenu ul li {list-style: none;}

.sidemenu ul li a {
    color: #ffffff;
    padding: 3px;
    padding-left: 10px;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px #c5eb7c dotted;
    background: url(../img/layout/direction_right_bright.png) left 9px no-repeat;
}

.sidemenu ul li a.removeborder {border-bottom: 0;}

.sidemenu ul li a:hover, .sidemenu ul li a.active {
    color: #333333;
    background: url(../img/layout/direction_right_dark.png) left 9px no-repeat;
}

.content {
    padding-top: 50px;
    margin-left: 315px;
    margin-right: 15px;
    padding-bottom: 50px;
}

.content p {
    margin-top: 0;
    text-align: justify;
}

.content p b {color: #28af36;}

label.topic {
    display: block;
    font-size: 38px;
    font-family: "Dear Joe 5", Verdana;
}

label.title {
    display: block;
    font-family: Arial Rounded MT Bold, Verdana;
    font-size: 20px;
    color: #f3700d;
    margin-bottom: 8px;
}

table {
    table-layout: fixed;
    vertical-align: middle;
    text-align: justify;
    border-spacing: 0;
}

h2.acc_trigger {
    margin: 0;
    padding: 0;
    background: url(../img/layout/direction_up_dark.png) right 15px no-repeat;
}

h2.acc_trigger.active {background: url(../img/layout/direction_down_dark.png) right 15px no-repeat;}

h2.acc_trigger a {
    display: block;
    color: #231f20;
    font-size: 12px;
    font-family: Arial;
    padding-top: 8px;
    border-bottom: 1px #999999 solid;
}

.acc_container {padding: 12px 0 60px 0;}

.acc_container .block img {
    margin-top: 3px;
    margin-right: 15px;
    float: left;
}

.acc_container .block table tr td.td1 {width: 70px;}
.acc_container .block table tr td a {
    color: #231f20;
    text-decoration: underline;
}

.acc_container .block table tr td a:hover {text-decoration: none;}

/*<<<<<<<<<<<footer>>>>>>>>>>>*/

.footer {
    min-width: 980px;
    width: 100%;
    min-height: 316px;
    background: url(../img/footer.jpg) bottom center repeat-x;
}

.footermenu {
    margin: 2px 0;
    padding-top: 37px;
    width: 100%;
    text-align: center;
}

@-moz-document url-prefix() {
    .footermenu {padding-bottom: 40px;}
}

.footermenu li {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.footermenu li b {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-family: Verdana;
    padding: 0 25px 12px 0;
}

.footermenu li ul li {display: block;}

.footermenu li ul li a {
    color: #ffffff;
    max-width: 146px;
    padding: 3px 25px 3px 10px;
    background: url(../img/layout/direction_right_bright.png) left 9px no-repeat;
}

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

.copyright_declaration {
    margin-top: 70px;
    font-size: 13px;
    font-family: Calibri;
    color: #28af36;
}

.copyright_declaration a {
    text-decoration: underline;
    font-size: 13px;
    font-family: Calibri;
    display: inline-block;
    color: #28af36;
}

#iPhoneMenu {
    display: none;
    font-weight: bold;
    padding: 6px 20px;
    background: #5ec526;
    color: #ffffff;
    position: fixed;
    top: 1px;
    left: 1px;
    z-index: 49;
}

@media only screen and (max-width : 768px) {
    .wrap {width: 768px;}
    .menu1 {padding-right: 0; padding-left: 20px; display: block; margin-right: 10px;}
    .menu1 li {border: 0 !important;}
    .menu1 li a span {padding: 7px 15px;}
    .menu2 {margin-right: 0;}
    .menu2 li {margin-right: 15px;}
    #youtube, #twitter, #facebook {position: absolute; top: -28px;}
    .fb-like {top: -3px; right: 0px;}
    #youtube {right: 126px;}
    #twitter {right: 102px;}
    #facebook {right: 78px;}
    .banner {width: 100%; margin-left: 0; margin-top: 20px; background-position: -136px !important;}
    .sidemenu {width: 286px; background-position: right !important; margin-left: 0;}
    .footer {border-top: 1px solid #d8d8d8; height: 454px; min-width: 768px;}
    .footermenu {background: #28af36; margin-top: 1px; padding-top: 7px;}
    .footermenu li {width: 200px; padding-top: 30px;}
    .footermenu li ul li {padding: 0;}
    .copyright_declaration {margin-top: 100px; margin-left: 10px; width: 500px;}

    .footer {height: 462px\9;}
    @-moz-document url-prefix() {
        .footermenu {padding-bottom: 0;}
        .footer {height: 478px;}
    }
    
    .acc_container .block img {width: 207px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .menu1 li a span {padding-top: 0; padding-bottom: 0;}
    .menu2 {margin-top: 32px;}
    .banner {margin-top: 17px;}
    .menu2 li ul {margin-top: 28px !important;}
    .menu2 li:hover a img, .menu2 li a:hover img {background-position: center 24px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #menu_divider {padding-left: 10px !important;}
    .fb-like {right: 4px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .menu1 li a span {padding-top: 7px;}
    .menu2 {margin-top: 28px;}
    #youtube {right: 127px;}
    #twitter {right: 107px;}
    #facebook  {right: 85px;}
    .footer {height: 478px;}
}

@media only screen and (max-width : 568px) {
    #iPhoneMenu {display: block;}
    .menu1 li a span {display: none;}
    .menu1 {position: fixed; right: 0; top: 0; width: 100%; height: 1px;}
    .menu2 {display: none !important;}
    .wrap {width: 100%;}
    .header {text-align: center; height: auto !important; background: none !important;}
    .logo {display: block; float: none; margin: 50px auto; margin-bottom: 25px;}
    .content {width: 100% !important; margin-left: 0; margin-right: 0;}
    .sidemenu {display: none;}
    .menu1 {padding: 0; margin-right: 0;}
    .footer {min-width: 0;}
    .footermenu {padding-bottom: 40px;}
    .footermenu li {width: 190px;}
    #fb-root {position: fixed; background: #c5eb7c; left: 0; right: 0; top: 0; height: 29px; opacity: 0.9; z-index: 49;}
    .fb-like {right: 2px;}
    .banner {height: 351px; background-size: cover; background-position: center top !important;}
    label.topic {margin-left: 10px;}
    p {margin-left: 10px !important; margin-right: 10px;}
    .copyright_declaration {margin: 30px 0; padding-bottom: 50px; text-align: center;}
    label.title {margin-left: 10px;}
    table {margin-left: 10px; margin-right: 10px;}
    .acc_trigger, .acc_container {margin: 0 10px !important;}
    .acc_container .block img {width: 49%;}
    .acc_container .block table {margin-left: 0;}
    #youtube {right: 127px;}
    #twitter {right: 107px;}
    #facebook  {right: 85px;}
    #img1L, #img2L, #img3L, #img4L {display: none !important;}
}