/** STYLE STEPS
resets to get all browsers to same settings
default selectors (tags)
layout-structure selectors (id selectors) - Always minimise id use on a web page.
design - brand colors, font-sizes, tables etc - classes are a go way to work (in z2z-design folder) and use mediaQuery (steps and object control) CSS3
Add content - objects (usually compound selectors) - try not to qualify our selectors with elements a .cWhatever means we are linked to this - better to have classes and add in line class=cTAC cBRad10 cB10
Add Modules - i.e. Self contained objects such as slideshows, print etc
JIT (Just In Time) external modules (imported html, css and js) via AJAX
*/
/* 
This is CSS2.1 
Note: CSS3 in style-mediaQuery
hsl and hsla colors compatable with IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. ISSUE what to do with IE7 and 8 DEV NOTE: javascript convert or regEdit convert
*/
/* START SPECIAL HYBRID 5 DEFAULTS (max cross-browser and old->new render especially when moving to HTML5 coding, based on html5shiv */
abbr, article, aside, audio, bdi, canvas, data, atalist, details, dialog, figcaption, figure, footer, header, main, mark, meter, nav, output, progress, section, summary, template, time, video { } /* new elements */
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; font-size: 16px; line-height: normal; font-family: sans-serif; }
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark { margin: 0px; padding: 0px; border: 0px solid #333; outline: 0px solid #333; /*font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", SimSun, STSong, sans-serif;*/ font-family: "Segoe UI","Segoe WP",Arial,Sans-Serif; /* NOTE: inherit not supported in ie6,7 */ vertical-align: top; }
/* NOTE: generally, I usually use px and not em's as the measurement in css, however it works well here in terms or proportions for TAG STYLES */
h1, h2, h3, h4, h5, h6, .ch1, .ch2, .ch3, .ch4, .ch5, .ch6 { margin-top: -1px; padding-top: 0.4em; padding-bottom: 0.4em; } /* note ch1-6 add here for convenience */
p { padding-top: .5em; padding-bottom: .5em; color:#000000; font-weight: 300; font-size: 1.2rem; line-height: 1.3em; }
audio, video { border: 0px; vertical-align: top; }
article, aside, details, div, dt, figcaption, figure, footer, form, header, main, map, menu, nav, section { display: block; } /* semantic elements i.e. describe content */
/*ol,ul{margin:12px 0px;} */
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
q, cite { font-style: italic; }
q:before, q:after { content: ""; } /* Remove automatic quotation marks for inline quotations ('q {quotes:none}' not implemented in WebKit) */
table { border-collapse: collapse; border-spacing: 0px; }
input, select { vertical-align: middle; }
sup, sub, cite { line-height: 11px; font-size: 10px; }
sub { vertical-align: bottom; }
div { vertical-align: top; }
/* special note: HTML5 hgroup tag now obsolete 2013 */
/* OBSOLETE TAGS: acronym, applet, basefont, bgsound, big, blink, center, dir, font, frame, frameset, hgroup, isindex, listing, marquee, multicol, nextid, nobr, noframes, noembed, plaintext, rb, spacer, strike, tt,  xmp */
/* END SPECIAL HYBRID 5 DEFAULTS */ 	

/* START TAG SELECTORS */
html { height: 101%; }
body { }
div { display: block; position: relative; margin: 0; padding: 0; text-align: left; }
samp { display: none; }
h1, h2, h3, h4, h5, h6, .ch1, .ch2, .ch3, .ch4, .ch5, .ch6 { margin: 0; padding: 0; font-weight: 600; color: #2A2C31; }
h1, .ch1 { font-size: 24px; font-weight: 500; }
h2, .ch2 { font-size: 22px; font-weight: 500; }
h3, .ch3 { font-size: 20px; font-weight: 500; }
h4, .ch4 { font-size: 18px; }
h5, .ch5 { font-size: 16px; }
h6, .ch6 { font-size: 14px; }
a { text-decoration: none; color: #0453D1; }
a:hover { color: #15602C; }
a:active { color: #A8257B; }
a:visited { color: #DB5EB0; }
blockquote { margin-left: 30px; }
/*ul, ol { margin: 4px 0px 4px 30px; }
li { margin: 15px; }*/
/* .cTblHolder-whatever{}  use this to redesign individual tables and leave default as is */
table { table-layout: auto; /*auto | fixed | inherit (no inherit ie8-)*/ width: 100%; /* Note: width will be size of div holder */ height: auto; margin: 0px auto; border: 1px solid #9f6e34; border-collapse: separate; /* collapse, separate, inherit */ border-spacing: 1px; /* cellspacing="1"  shows background-color*/ font-family: arial; font-size: 13px; background-color: #576a71; color: black; clear: both; }
caption, th, td { vertical-align: top; text-align: center; padding: 5px 0px 5px 0px; margin: 0px; }
caption { height: 50px; line-height: 40px; margin: 0px; padding-bottom: 5px; font-size: 18px; background-color: #fc7f15; color: black; }
thead { }
thead tr { }
th { background-color: #fc7f15; color: black; }
tbody { }
tbody tr { background-color: #eee; }
tbody td { color: black; }
/* START CSS3 */
/* tbody tr:nth-child(2n) {background-color:#EAF3F8;} */ /* this  (and below comment) does not work in old browsers  - so defaults to tbody tr{background-color:#eee;} as above */
/* 
OTHER OPTIONS TO USE 
tbody td:nth-child(2n+1) {background-color:#F0EAEA;}  every 2n td column starting at  column 1
tbody td:first-child {background-color:#ddd; } allows columns to be coloured  - first column only
tbody td:last-child { background-color:#eee; } allows columns to be coloured  - last column only
*/    
/* END CSS3 */                 
tfoot { }
tfoot tr { }
tfoot td { background-color: #313941; color: white; text-align: right; }
/* END TAG SELECTORS */

/* START PAGE STRUCTURE */
.cD-tbl{display:table;width:100%;}
.cD-tr{display:table-row;}
.cD-td{display:table-cell;width:auto;padding:5px 5px 5px 5px;}
.cSlab { clear: both; width: 100%; height: auto; background-color: #fff; padding: 0px; margin: 0px; z-index: 10; }
.cPW { clear: both; width: 960px; height: auto; background-color: transparent; padding: 0px; margin: 0px auto; }
/* Bootstrap Container */
.container{}
.cPW:before, .cPW:after, .cHoldsFloat:before, .cHoldsFloat:after { display: table; clear: both; content: ""; } /* allows height for holding div if contains floats IE6 need hasLayout fired in style-IE6 */

/* Start James Williamson (The Man) Clear Fix */
.cCF:before, .cCF:after { content: ""; display: table; }
.cCF:after { clear: both; }
/* End James Williamson (The Man) Clear Fix */

#dsTopFixed{top:0px;bottom:auto;left:0px;width:100%;height:40px;background:#181A1A;padding:0px;color:white;z-index:1150;}
	#dTopFixed{height:40px;line-height:40px;background:transparent;color:white;}
#dsTopSpacer{height:40px;background-color:red;color:#eee;}
	#dTopSpacer{background-color:transparent;}
#dsHeader{z-index:100;}
	#dHeader{}
#dsSubHeader{z-index:110;background-color:#fc7f15;}
	#dSubHeader{background-color:#fc7f15;}
#dsGlobalNav{background-color:#374448;color:white;}
	#dGlobalNav{background-color:#374448;color:white;}
#dsHero {position:relative;background-color: #B6C1CB; background-repeat: no-repeat; background-position: center; background-image: url("../_images/dHero-op_1920x462.jpg"); z-index:9; }
	#dHero { height: 400px;}
#dsContent{background-color:#fff;z-index:20;}
	#dContent{background:#04F9F5;}
		#dLeft{width:240px;margin:0px;padding:0px 5px 0px 5px;overflow:hidden;background-color:#f2f3f2;}
		#dMain{width:auto;margin:0px;padding:0px 5px 0px 5px;/*overflow:hidden;*/background-color:#fff;}
		#dRight{width:240px;margin:0px;padding:0px 5px 0px 5px;overflow:hidden;background-color:#f2f3f2;}
#dsFooter{z-index:120;}
	#dFooter{}
#dsSubFooter{z-index:110;}
	#dSubFooter{}
#dsBotSpacer{height:50px;background-color:green;color:black;}
	#dBotSpacer{}
#dsBotFixed{display:block;background-color:red;top:auto;bottom:0px;left:0px;width:100%;height:50px;padding:0px;}
	#dBotFixed{color:white;}
/* END PAGE STRUCTURE */
#dSubFooter .cFWL a{font-size:1rem;font-weight:normal;}
/* START Class Styles */
.cPrintOnI, .cPrintOnIB, .cPrintOnB { display: none; }
.cFixed { position: fixed; margin-top: 0px; margin-left: 0px; z-index: 500; }/* used for all fixed elements */
.cNone{display:none!important;}     
.cCursor{cursor:pointer;}     
.cClear{clear:both !important;}
.cScale { max-width: 100%; height: auto; }
.cIB{display:inline-block;}
.cFL{float:left;}
.cFR{float:right;}
.cBoxFL{float:left;margin:0px 10px 2px 0px;}
.cBoxFR{float:right;margin:0px 0px 2px 10px;}
.cBorder{border:0px solid black;}
.cTAL{text-align:left;}
.cTAR{text-align:right;}
.cTAC{text-align:center;}
.cM10{margin:10px;}
.cFS10{font-size:10px;}
.cNote{font-size:12px; color:#9F9C9D;}
.cLH40{height:40px;line-height:40px;}
.cLH40 span{line-height:40px;}
.cBold{font-weight:bold;color:#3F545F;font-size:1.4rem;}
.cTxtL{color:#fff;}
.cTxtL a{text-decoration:none;color:#E7E7E7;}
.cTxtL a:hover{color:#8fe866;} 
.cTxtL h1, .cTxtL h2, .cTxtL h3, .cTxtL h4, .cTxtL h5, .cTxtL h6{color:#FDFDFD;font-weight:400;}
.cTxtL blockquote{background-color:#3e4c51;padding:10px;margin:5px 10px 5px 10px;}
#dMain h2{margin-top:30px;font-size:1.8rem;color:#546D7A;letter-spacing: .2em;font-weight:bold;}
.cTagLine h1{padding:.5em 0;font-size:2.2em;color:#fff;letter-spacing: .2em;line-height:1.3em;}
.cTagLine h1 span{font-size:.7em;color:#fff;/*letter-spacing: .1em;*/}
.cTagLine h1 span.cCenterline{font-size:3.3rem;color:#fff;display:inline-block;float:left;margin-top:20px;text-shadow: 2px 2px #FF0000;font-family:"Palatino Linotype", "Georgia", "Times New Roman";letter-spacing:-2.1rem;}
.cTagLine h1 span.cCenterline .cFS{font-size:5rem;}
.cServicesBox{min-height:340px;width:278px;background:#fff;margin-left:29px;padding:10px;float:left;}
.cServicesBox p.ch2{font-size:1.3em;line-height:3em;margin:10px 0px 15px 0px;color:#546D7A;font-weight:bold;border-bottom:dotted 1px #707070;text-transform: uppercase;}
.cServicesBox p{font-size:1.1rem;line-height:1.3rem;}
.cWidth600 {width: 800px; height: auto; background-color: transparent; padding: 0; margin: 0 auto; /*text-align:center;*/}
.cBG01{background:#E5AE78;}
.cBG02{background:#79573C;}
.cBG03{background:#E09173;}
.cBorder{border-bottom:10px solid #607D8B;}
.cFL { float: left; }
.cFR { float: right; }
.cBoxFL { float: left; margin: 0 10px 2px 0; }
.cBoxFR { float: right; margin: 0 0 2px 10px; }
/* END Class Styles */
/*Margins and Paddings*/
.cMT5 { margin-top: 5px; }
.cMT10 { margin-top: 10px; }
.cMT15 { margin-top: 15px; }
.cMT20 { margin-top: 20px; }
.cMT30 { margin-top: 30px; }
.cMT40 { margin-top: 40px; }
.cMT50 { margin-top: 50px; }
.cMT60 { margin-top: 60px; }
.cMT70 { margin-top: 70px; }
.cMT80 { margin-top: 80px; }
.cMT90 { margin-top: 90px; }
.cMB5 { margin-bottom: 5px; }
.cMB10 { margin-bottom: 10px; }
.cMB20 { margin-bottom: 20px; }
.cMB30 { margin-bottom: 30px; }
.cMB40 { margin-bottom: 40px; }
.cMB50 { margin-bottom: 50px; }
.cMR5 { margin-right: 5px; }
.cMR10 { margin-right: 10px; }
.cMR20 { margin-right: 20px; }
.cMR25 { margin-right: 25px; }
.cMR30 { margin-right: 30px; }
.cMR40 { margin-right: 40px; }
.cMR50 { margin-right: 50px; }
.cMR60 { margin-right: 60px; }
.cMR70 { margin-right: 70px; }
.cMR80 { margin-right: 80px; }
.cMR90 { margin-right: 90px; }
.cML10 { margin-left: 10px; }
.cML18 { margin-left: 18px; }
.cML20 { margin-left: 20px; }
.cML28 { margin-left: 28px; }
.cML30 { margin-left: 30px; }
.cML35 { margin-left: 35px; }
.cML40 { margin-left: 40px; }
.cML50 { margin-left: 50px; }
.cML80 { margin-left: 80px; }
.cML100 { margin-left: 100px; }
.cML130 { margin-left: 130px; }
.cP10 { padding: 10px; }
.cP20 { padding: 20px; }
.cPR30 { padding-right: 30px; }
.cP0 { padding: 0px; }
.cPT10 { padding-top: 10px; }
.cPT20 { padding-top: 20px; }
.cPT30 { padding-top: 30px; }
.cPT40 { padding-top: 40px; }
.cPT50 { padding-top: 50px; }
.cPB0 { padding-bottom: 0px; }
.cPB10 { padding-bottom: 10px; }
.cPB20 { padding-bottom: 20px; }
.cPB30 { padding-bottom: 30px; }
.cPB40 { padding-bottom: 40px; }
.cPB50 { padding-bottom: 50px; }
.cPL10 { padding-left: 10px; }
.cPL20 { padding-left: 20px; }
.cPL30 { padding-left: 30px; }
.cPL40 { padding-left: 40px; }
.cPR10 { padding-right: 10px; }
.cPL20 { padding-left: 20px; }
.cPR20 { padding-right: 20px; }
.cPR30 { padding-right: 30px; }
.cPR40 { padding-right: 40px; }
.cBG3a { background-color: #4A606B; color: #fff; }
.cBG2a { background-color: #404e54; color: #fff; }
.cBG2b { background-color: #374448; color: inherit; }
.cBG2c { background-color: #CFD9CE; color: #463F47; }
.cBT{border-top:1px solid #ccc;}

/*START BOOTSTRAP */
/* https://bootsnipp.com/snippets/Vm7d */
.navbar-right {float: right !important;margin-right:10px;}
.navbar, .navbar-default, .navbar-static-top{border-style:none;min-height:auto;}
.navbar-default .navbar-brand {color:#fff;}
.navbar-brand {height: auto;padding: 15px 15px;font-size: 1.3rem;line-height: 20px;}
.navbar-default .navbar-nav > li {border-left:1px solid #fff;}
.navbar-default .navbar-nav > li:last-child {border-right:1px solid #fff;}
.navbar-default .navbar-nav > li > a {color: #fff;padding:15px 15px;line-height: 20px;font-size:1.2rem;letter-spacing:2px;background-color:#5B7A8A;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #fff; background-color: #A28A82;}
.navbar-default .navbar-nav > li.dropdown:hover > a, 
.navbar-default .navbar-nav > li.dropdown:hover > a:hover,
.navbar-default .navbar-nav > li.dropdown:hover > a:focus {color: #fff; background-color: #A28A82;}
.navbar-default{background-color: #5B7A8A;color: #fff;}
.navbar-default nav > li > a{color:#fff;}
.dropdown-menu {font-size: 1.1rem;text-align: left;list-style: none;}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {text-decoration: none;color: #fff; background-color: #A28A82;}
li.dropdown:hover > .dropdown-menu {display: block;}
.navbar {margin-bottom:0px;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}
/* END BOOTSTRAP */
/* Start Current Page Styles Main Menu
**********************************************************/
#bBody.welcomePage li.welcomeMenu a { cursor: auto; background-color: #A28A82; color: #fff; }
#bBody.commercialPage a#servicesMenu { cursor: pointer; background-color: #A28A82; color: #fff; }
#bBody.commercialPage li.commercialMenu a { cursor: auto; background-color: #A28A82; color: #fff; }
#bBody.residentialPage a#servicesMenu { cursor: pointer; background-color: #A28A82; color: #fff; }
#bBody.residentialPage li.residentialMenu a { cursor: auto; background-color: #A28A82; color: #fff;}
#bBody.repaintPage a#servicesMenu { cursor: pointer; background-color: #A28A82; color: #fff; }
#bBody.repaintPage li.repaintMenu a { cursor: auto; background-color: #A28A82; color: #fff; }
#bBody.aboutPage li.aboutMenu a { cursor: auto; background-color: #A28A82; color: #fff; }
#bBody.contactPage li.contactMenu a { cursor: auto; background-color: #A28A82; color: #fff; }
/* End Current Page Styles Main Menu
**********************************************************/
/* Start Current Page Styles Sub Footer
**********************************************************/
#bBody.welcomePage a.welcomeMenu { cursor: auto; color: #8fe866; }
#bBody.commercialPage a.commercialMenu { cursor: auto; color: #8fe866;}
#bBody.residentialPage a.residentialMenu { cursor: auto; color: #8fe866;}
#bBody.repaintPage a.repaintMenu { cursor: auto; color: #8fe866;}
#bBody.aboutPage a.aboutMenu { cursor: auto; color: #8fe866;}
#bBody.contactPage a.contactMenu { cursor: auto; color: #8fe866; }
/* End Current Page Styles Sub Footer
**********************************************************/