/*pgStyleRwd.css, Responsive Web Design*/
/*colour mixer:greys, #ffffff-#000000; reds, #bb0000-#000000*/
/*HdceRed:#540000*/
/*HdceWhite:#e6e6e6*/
/*font-family: Kalam, cursive;/*google font, header*/
/*font-family: Raleway, sans-serif;/*google font, menu & content*/
@font-face{
    font-family: "Kalam";
    src: url("./wFonts/Kalam-Regular.ttf");
}
@font-face{
    font-family: "Raleway";
    src: url("./wFonts/Raleway-Regular.ttf");
}
*{
    /*css universal selector selects all html elements on the page*/
    box-sizing: border-box;/*padding and border are included in width and height of the elements*/
}
body{
    /*body element defaults, display: block, margin: 8px*/
    background-color: #191919;/*set default, 191919*/
    color: #e6e6e6;/*e6e6e6*/
    font-family: Raleway;/*google font, menu & content*/
    font-size: 1.0em ;/*system default, 1.0em*/
    line-height: normal;/*set default*/
    margin: 0em;
    -webkit-text-size-adjust: 100%;/*iphone, stop font size change portrait to landscape*/
}
#idContainer{
    background-color: #540000;/*540000*/
    border: 0.2em solid;/*0.2em solid*/
    color: #404040;/*404040*/
    margin-right: auto;/*space outside the element*/
    margin-left: auto;
    max-width: 60em;/*60em*/
    overflow: auto;
}
#idHeader{
    background-color: #540000;/*540000*/
    background-image: url('./wImages/161222.1215SketchQual20.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #e6e6e6;/*e6e6e6*/
    font-family: Kalam;/*google font, header*/
    font-size: 1.0em ;/*system default, 1.0em*/
    height: auto;/*sets height of div*/
    line-height: 1.2;/*1.2*/
    padding-top: 0em;/*space inside the element*/
    padding-right: 1em;
    padding-bottom: 0em;
    padding-left: 1em;
    text-align: right;
}
#idNavBar{
    background-color: transparent;/*540000*/
    text-align: center;/*positions the NavBar*/
    width: auto;
}
#idNavBar ul{
    background-color: #540000;/*540000*/
    list-style: none;/*removes bullets*/
    margin: 0em;/*space outside the element, override defaults*/
    padding: 0em;/*space inside the element, override defaults*/
    vertical-align: bottom;/*top/bottom, removes line underneath ul elements*/
}
#idNavBar li{
    border-top: 0em solid #770000;/*670000*/
    border-right: 0.1em solid #770000;/*0.2em*/
    border-bottom: 0em solid #770000;
    border-left: 0.1em solid #770000;
    display: inline-block;/*puts all the ul elements side by side*/
    margin-left: 0em;/*hide the space between inline-block elements*/
}
/*#idNavBar li:last-child{
    border-right: none;
}*/
#idNavBar li a{
    color: #e6e6e6;/*e6e6e6*/
    display: block;
    padding-top: 0.5em;/*space inside the element*/
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    text-align: center;
    text-decoration: none;/*removes underline in a link*/
}
#idNavBar li a:hover{
    background-color: #770000;/*670000*/
}
#idContent{
    background-color: #333333;/*333333*/
    color: #e6e6e6;/*e6e6e6*/
    /*height: auto;*/
    margin-top: 0em;/*space outside the element*/
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    padding-top: 1em;/*space inside the element*/
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    width: auto;
}
#idTextBar{
    background-color: #333333;/*content colour #333333*/
    color: #0d0d0d;/*0d0d0d*/
    padding-top: 0em;/*space inside the element*/
    padding-right: 1em;
    padding-bottom: 0em;
    padding-left: 1em;
    text-align: right;/*right align the TextBar*/
    width: auto;
}
.clHrDivider{
    background-color: #333333;/*#333333*/
    color: #404040;/*#404040*/
    border: 0.3em solid;
}
.clInPageLink:link{
    color: #e6e6e6;/*e6e6e6*/
    text-decoration: underline;
}
.clInPageLink:visited{
    color: #e6e6e6;/*e6e6e6*/
    text-decoration: underline;
}
.clCol10{width: 10%;}/*create class for each column*/
.clCol20{width: 20%;}
.clCol30{width: 30%;}
.clCol40{width: 40%;}
.clCol50{width: 50%;}
.clCol60{width: 60%;}
.clCol70{width: 70%;}
.clCol80{width: 80%;}
.clCol90{width: 90%;}
.clCol100{width: 100%;}
.clRow::after{/*resets flow of the page*/
    clear: both;/*stops elements from floating*/
    content: "";/*generates null content*/
    display: table;/*creates table that is never used*/
}
[class*="clCol"]{/*set properties for all clCol* classes*/ 
    float: left;
    margin: 0em;/*space outside the element*/
    padding: 0em;/*space inside the element*/
    /*font-size: 1em;*/
    /*width: 100%;*/
    /*border: 0.2em solid red;*/
}

/*@media only screen and (max-width: 55em){
    /*mobile phone 768px*/
    /*tablet 1024px*/
    /*laptop 1280px*/
    /*widescreen infinite*/
    /*[class*="clCol"]{/*replaces previously declared value*/
    /*    width: auto;
    }
    #idContainer{
        width: auto;/*replaces previously declared value*/
    /*}
}*/