merg_responsive.css

@charset "utf-8";
/* CSS Document */
html {
    height: 101%;
    font-size: 14px;
}

body {
    background-color:#ffffff;
    font-family: 'Roboto', sans-serif;
    /*font: 100%/1.2 Tahoma, Geneva, sans-serif;*/
    margin: 0;
    padding: 0;
    color: #000000;
}

h1 {
    font-size:2rem;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

a img {
    border: none;
}

a:link {
    color:#6449c8;
    text-decoration: none;
}
a:visited {
    color: #6449c8;
    text-decoration: none;
}
a:hover, a:active, a:focus {
    text-decoration: underline;
    color:#37379b;
}

.overall {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
    max-width:1200px;
    padding:0;
    color : #000000;
    background:#FFFFFF;
}

.header {
    width : 100%;
    height : 115px;
    margin : 0;
    padding : 0;
    background-color:#ffffff;
    font-family: 'Roboto Condensed', sans-serif;
}

.header h1 {
    font-size:2rem;
    font-weight:bold;
    margin:0.5rem 0 0 0;
    padding:0px 0.5rem 0.5rem 0;
    color: #0B376E;
    float:right;
}

.header h2 {
    font-size:1.4rem;
    font-weight:bold;
    margin:0;
    padding:0px 0.5rem 0.5rem 0;
    color: #0B376E;
    float:right;
    clear:right;
}

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index:1000;
    font-family: 'Roboto Condensed', sans-serif;
}
#nav {
    background-color: #FFFFFF ;
    border-bottom: 1px solid #AAAAAA;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom:10px;
    position: relative;
    width: 100%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 1%;
    position: absolute;
    top: 34px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color:#0000CC;
    display: block;
    font-size: 1.2em;
    line-height: 36px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 5px 0.5%;
    vertical-align: top;
    width: 22%;
}
#nav ul.subs > li a {
    color: #000066;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #FF0000;
    text-decoration:underline;
}
#nav ul.subs > li > a {
    font-size: 1.2em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

.mainblock {
    margin:0;
    padding:0;
    width:100%;
    font-size:1rem;
}

.mainblock img {
    font-style:italic;
    color:#000099;
}

.mainblock li {
    margin-left: 36px;
}

.mainblock ul {
    margin: 12px 12px 12px 18px;
}

.dualblockwrapper {
    width: 100%;
    border:none;
    float:left;
    clear:both;
}

.bottomblock {
    width: 100%;
    margin:0;
    padding: 0;
    height:40px;
    background-color:#e6f3ff;
    background-color:#ffffff;
    clear:both;
    border-top:3px solid #003399;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.bottomblock p {
    font-size:1.2rem;
    color:#000000;
}

.bottomblock ul {
    list-style: none outside none;
    padding: 0.5rem 0 0 0 ;
    margin: 0;
}

.bottomblock li {
    float: left;
    display: block;
    text-align:center;
    color:#000000;
    font-size:1.2rem;
    margin: 0;
    padding: 0 3px 0 3px;
    line-height:36px;
}

.bottomblock ul a:link, .bottomblock ul a:visited {
    color: #0000CC;
    display: block;
    text-decoration: none;
    padding: 0 15px 0 15px;
    margin:0;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;

}

.bottomblock ul a:hover {
    color:#ffffff;
    background-color:#ff0000;
}

.clearfix {
    clear: both;
}



.halfblock, .wideblock, .quarterblock, .threequarterblock {
    float:left;
    border: 1px solid #e5e5e5;
    padding:1%;
    border-radius: 8px;
    text-align:left;
}

.halfblock {
    width: 45.7%;
    margin:1%;
}

.wideblock {
    width: 96%;
    margin:1%;
}

.quarterblock {
    width: 22%;
    margin:1%;
}

.threequarterblock {
    width: 68%;
    margin:1%;
}

.halfblock p, .wideblock p, .quarterblock p, .threequarterblock p  {
    font-size: 1.2rem;
    margin-top:0.8rem;
}

.halfblock td, .wideblock td, .quarterblock td, .threequarterblock td  {
    font-size: 1.2rem;;
}

.halfblock ul, .wideblock ul, .quarterblock ul, .threequarterblock ul  {
    font-size: 1.2rem;;
}

.halfblock ol, .wideblock ol, .quarterblock ol, .threequarterblock ol  {
    font-size: 1.2rem;;
}

.halfblock h2, .wideblock h2, .quarterblock h2, .threequarterblock h2 {
    font-size: 1.4rem;
    margin-top: 0.6rem;
}

.halfblock h3, .wideblock h3, .quarterblock h3, .threequarterblock h3 {
    font-size: 1.2rem;
    margin-top: 0.6rem;
}

.halfblock img, .wideblock img {
    float:right;
    margin:1%;
}

.sundry_wideblock {
    float:left;
    border: 1px solid #e5e5e5;
    padding:1%;
    border-radius: 8px;
    text-align:left;
    width: 96%;
    margin:1%;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.sundry_wideblock p  {
    font-size: 1.2rem;
    margin-top:0.8rem;
}

.sundry_wideblock ul {
    list-style: none outside none;
    padding: 0.5rem 0 0 0 ;
    margin: 0;
}

.sundry_wideblock li {
    float: left;
    display: block;
    text-align:center;
    color:#000000;
    font-size:1.2rem;
    margin: 0;
    padding: 0 3px 0 3px;
    line-height:36px;
}

.sundry_wideblock ul a:link, .sundry_wideblock ul a:visited {
    color: #0000CC;
    display: block;
    text-decoration: none;
    padding: 0 15px 0 15px;
    margin:0;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;

}

.sundry_wideblock ul a:hover {
    color:#ffffff;
    background-color:#ff0000;
}

.pword {
    display: none;
}


/*
----------------------------------------------------------------------------------
Responsive css here.......
----------------------------------------------------------------------------------
*/

@media all and (max-width : 760px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #main0:target + ul.subs,
    #nav li #main1:target + ul.subs,
    #nav li #main2:target + ul.subs,
    #nav li #main3:target + ul.subs,
    #nav li #main4:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }
    #nav ul.subs > li {
        display: block;
        width: auto;
    }
    .halfblock {
        clear: left;
        width: 100% !important;
    }
}

@media all and (max-width : 720px) {
    .strapLine {
        float:left;
        clear: both;
    }
    .strapLine h1, .strapLine h2 {
        float:left !important;
        padding-left:1%;
    }

}
@media all and (max-width : 800px) {
    .strapLine h1 {
        font-size: 1.6rem;
    }
    .strapLine h2 {
        font-size: 1.2rem;
    }
}


@media all and (max-width : 400px) {
    .halfblock {
        width: 96% !important;
    }
    .wideblock {
        width: 96% !important;
    }
    .threequarterblock, .quarterblock {
        width: 96% !important;
    }
    .highlightbox {
        width: 96% !important;
        float:left;
    }
    .bottomblock li {
        clear: left;
        float: none;
        background-color:#ffffff !important;
    }
}

/*
=============================
Menu hide code
==============================
*/

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    background: #daa520;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide menu radio button*/
input[type=radio]{
    display: none;
}

/*Show menu when invisible radio button is checked*/
input[type=radio]:checked ~ #nav{
    display: block;
}

@media all and (max-width : 486px) {

    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
    #nav {
        display:none;
    }
    .strapLine {
        display: none;
    }
}






/* other uc css */

#ringblock {
    width: 935px;
    margin:0;
    padding: 10px;
    background-color:#aaaaaa;
    float:right;
    clear:right;
}

.floatleft0 {
    float:left;
    padding:0;
    margin:0;
}

.floatleft5 {
    float:left;
    padding:0;
    margin:5px;
}

.rulestable td {
    border-bottom: 1px  dashed #666666;
}

.tcc_ind {
    padding-left:20px;
}
.tcc_ind2 {
    padding-left:40px;
}

.downloadtable {
    margin: 10px 4px 10px 4px;
}

.downloadtable td {
    margin:0;
    padding:0;
    vertical-align:text-top;
    border-bottom:1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.item {
    width: 745px;
    float:left;
    clear:left;
    margin-top:4px;
    border-top: 1px solid #dddddd;
}

.linktable {
    border-top:1px solid #999999;
    margin-top:10px;
}

.linktable td {
    border-bottom:1px solid #999999;
}

.moretext {
    display:none;
}

a:hover .moretext  {
    display:block;
    font-style:normal;
    font-size:12px;
    font-weight:normal;
    position: absolute;
    top: 160px;
    left: 500px;
    width: 200px;
    padding: 10px;
    margin: 4px;
    border:2px solid #666666;
    z-index: 100;
    color:#000000;
    background: #dddddd;
}

.cbus_display {
    color:#ffffff;
    width: 120px;
    background:#006600;
    font-weight:bold;
    padding:6px;
    margin:9px;
    border:5px solid #ffffff;
}

.generalTable {
    margin-left:12px;
}
.generalTable td {
    padding: 6px;
    border-bottom: 1px solid #DDDDDD;
}

.formInputTable input[type="text"], .formInputTable textarea, .formInputTable input[type="password"] {
    background-color: #DAE1F5;
    font-size: 1rem;
}

.formInputTable select {
    background-color: #DAE1F5;
    font-size: 1rem;
    -webkit-appearance: menulist;
}

.formInputTable input[type="submit"], .formInputTable input[type="button"] {
    font-size: 1.2rem;
}

.uggear {
    display:none;
}


/* Not checked yet */
.highlightbox {
    float:right;
    clear:right;
    width:24%;
    margin-top:25px;
    margin-right: 1%;
    padding:0;
    background-color:#dde9f7;
    text-align:center;
    border: 1px solid #666666;
    border-radius:5px;
}

.highlightbox p, td {
    font-size: 14px;
    margin: 4px;
}
.table1, .table2 {
    margin: 1%;
    width: 98%;
}

.table1 td, .table2 td {
    border-bottom: 1px solid #999999;
    font-size: 1.2rem;
    padding:2%;
}

.table2 td {
    border: none;
}

.sundryblock {
    width: 25%;
    min-width:240px;
    float:right;
    margin:0.25%;
    padding:0.5%;
    border: 1px solid #a5a5ff;
    border-radius: 4px;
    font-style:italic;
}

.itemblock {
    width:60%;
    float:left;
    border:1px solid #a5a5ff;
    border-radius: 10px;
    margin: 4px;
}

.pictureblock {
    width:35%;
    float:right;
    border-radius: 10px;
    margin: 6px;
    padding:8px;
    text-align:center;
    background-color: #f1fff5;
}
/* to here */