/* Table of Contents
 * 
 * >General
 * >Header
 * >Footer
 * >Banner
 * >Content
 *
 * >Playground: Test CSS Here
 */

/* Notes:
 * - URL for images folder: '../img/'
 */







/* >General */

html {font-size: 62.5%}
body {
    background: /*url('./img/light_bg.png') #e7e8ea*/ #fafaff /*#dde4ee*/;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    color: #353a45;
}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 2rem 0;}
a {/*text-decoration: none; */color: inherit;}
abbr[title] {border-bottom: 0;}
abbr:hover {color: #778;}
hr {border: 0; margin: 0;}
label {cursor: pointer;}



/* Header & Footer styles */

body > header,
body > footer {
    background: /*url('./img/darkgrey_bg.png')*/ /*#353a45*/ #27292b;
    color: #e7e8ea /*#fafaff*/ /*#dde4ee*/;
    text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.15);
}



/* Nav bar styles */
/* Note: unless explicitly styled, nav elements display as a floated menu bar */

nav {display: block; float: left; margin: 0; padding: 0;}
nav > ul {margin: 0; padding: 0;}
nav > ul > li {display: block; float: left;}



/* Table styles */

table {width: 98%; margin: 0 1%;}
tbody th, tbody td, tfoot td {padding-bottom: 1.8rem;}
tbody th {padding-right: 1.2rem; text-align: right; vertical-align: top;}
tbody td {width: 100%;}
td input[type="text"], td textarea {width: 99%; padding: 0.4rem 0.5%; border: 0;}
td input[type="submit"] {background: #7aa4ee; padding: 0.8rem 2.4rem; border: 0; font-weight: bold;}
td input[type="submit"]:hover,
td input[type="submit"]:focus,
td input[type="submit"][disabled] {background: #999; color: #445;}



/* General Class styles */

.clear {margin: 0 !important; float: none !important; clear: both !important;}
li.clear {list-style: none !important; width: 0 !important; height: 0 !important;}
.content-wrapper {max-width: 102.4rem; margin: 0 auto; position: relative;}
.control {display: none;}
.shaded {background:rgba(67, 67, 84, 0.4)}
/* message styles */
.message {position: relative; z-index: 999; margin: 0; padding: 1rem 0.5rem; color: #000;}
.message.error {background: red;}
.message.status {background: green;}
.page-navigation {text-align: center;}
/* span-like adjacent elements (generated from a data array normally) */
.and-value:nth-last-child(n+3):after,
.or-value:nth-last-of-type(n+3):after {content: ",";}
.and-value:nth-last-of-type(2):after {content: " AND";}
.or-value:nth-last-of-type(2):after {content: " OR";}



/* END >General */







/* >Header */

body > header {position: relative; z-index: 100; box-shadow: #353a45 0 -1rem 1rem 1rem;}
body > header > .content-wrapper {/*height: 13rem;*/}



/* Header title (logo+business name) styles */

#title {
    display: block;
    float: left;
    padding: 0.8rem 0;
    font-family: 'Times New Roman', serif;
    text-align: center;
    text-shadow: 0 0.0rem 0.2rem rgba(255, 255, 255, 0.25);
}
#title > a {display: inline-block; text-decoration: none;}
#logo {height: 3.8rem; vertical-align: top;}
#business-name {display: inline; margin: 0; padding: 0; font-size: 2.5rem;}
#business-name > .first-line {
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 0.8rem;
    font-size: 3.8rem;
    font-weight: bold;
}
#business-name > .second-line {clear: left; display: block; font-weight: normal;}



/* Main menu styles */

/*nav*/#main-menu {display: block; /*float: right;*/ position: absolute; right: 0; bottom: 0;}
#main-menu a {text-decoration: none;}
#main-menu > ul {/*padding: 4.8rem 0 2.8rem;*/}
#browse-sitemap {display: none;}
#main-menu > ul > li {margin: 0 0.4rem;}
#main-menu > ul > li > a {display: block; margin: 0; padding: 1.2rem 1.8rem; font-size: 2rem;}
#main-menu > ul > li:hover,
#main-menu > ul > li:focus {background: #999; color: #445;}
#main-menu > ul > .selected > a,
#main-menu > ul > .selected:hover,
#main-menu > ul > .selected:focus {background: #7aa4ee; color: #445; font-weight: bold;}

/* Submenu style */
#main-menu .sub-menu {
    display: block;
    position: absolute;
    right: 0;
    width: 100%;
    padding: 0;
    background: #999;
    color: #445;
    box-shadow: #000 -0.2rem 0.2rem 0.2rem -0.2rem;
}
#main-menu .selected .sub-menu {background: #7aa4ee; font-weight: normal;}
#main-menu .sub-menu > li {
    display: block;
    margin: 0.4rem 0;
    background: rgba(255, 255, 255, 0.3);
}
#main-menu .sub-menu > li:hover,
#main-menu .sub-menu > li:focus {background: rgba(0, 0, 0, 0.3); color: #e7e8ea;}
#main-menu .sub-menu > li > a {
    display: block;
    padding: 0.8rem 2rem;
}
#main-menu .sub-menu {display: none;}
#main-menu li:hover > .sub-menu {display: block;}



/* Secondary Menu styles (Uncomment once you start working on it) */

#secondary-menu {height: 4.7rem; position: relative; z-index: 90; box-shadow: #353a45 0 -1rem 1rem 1rem;}



/* END >Header */







/* >Footer */

body > footer {text-align: center;}
body > footer > .content-wrapper {padding: 1.6rem 0;}



/* Sitemap Style */

#sitemap {float: none; display: inline-block; text-align: left;}
#sitemap a {text-decoration: underline;}
#sitemap a:hover {text-decoration: none;}
/*#sitemap > ul {padding: 0;}*/
#sitemap > ul > li:nth-child(n+2) {
    height: 10rem;
    padding: 0 1rem;
    border-right: 0.2rem groove;
}
#sitemap h2 {margin: 0; font-size: 1.6rem; font-weight: normal; display: none;}
#sitemap > ul > li:nth-last-child(2) {border-right: 0;}
#sitemap > ul > li.clear {border: 0; height: 0;}

#sitemap .sub-menu {padding-left: 2rem; list-style: disc;}



/* Copyright Style */

#copyright {width: 100%; margin: 2rem 0 0; padding: 0; text-align: center;}



/* END >Footer */







/* >Banner */

#banner {background: url('./img/dimpled_bg.png') #e7e8ea; padding: 3rem 0;}
#banner .content-wrapper {box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.8rem;}



/* Banner image style */
#banner img {width: 100%; float: left;}
#banner img.shaded {background: #78a /*rgba(67, 84, 118, 0.7)*/;}



/* text-box style */
#banner #banner-text {position: absolute;}
#banner #banner-text.hover-bottom {bottom: 5%;}
#banner #banner-text.hover-top {top: 5%;}



/* Slogan style */
#banner .slogan {
    margin: 0;
    padding: 2.4rem;
    background: /*rgba(192, 208, 240, 0.4)*/ /*rgba(67, 67, 84, 0.4)*/ rgba(127, 159, 235, 0.75);
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 3.6rem;
    text-align: center;
}



/* END >Banner */






/* >Content */

#content-body {padding: 2.4rem 0;/* background: #e7e8ea;*/}
#content-body img {max-width: 100%;}

/* Column Styles */

#content-body .column {
    clear: both;
    width: 90%;
    margin: 0 3%;
    padding: 2.4rem 2%;
    
/*    background: #ddf;*/
}

#content-body .shaded {background:rgba(67, 67, 84, 0.4)}

#content-body .left,
#content-body .right {
    width: 45%;
    margin: 0 1.5%;
    padding-left: 1%;
    padding-right: 1%;
}

#content-body .left {clear: left; float: left;}
#content-body .right {clear: right; float: right;}

#content-body .main {width: 55%;}
#content-body .side {width: 35%;}

/* content font and link styles */
#content-body a {text-decoration: underline;}
#content-body a:hover {text-decoration: none; color: #778;}

#content-body ul li {line-height: 2.8rem;}



/* END >Content */







/* >Playground: Test CSS Here */