/*------------------------------------------------------------------------------
RESET
------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        /*font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;*/
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

/*------------------------------------------------------------------------------
HIGHSITE HTML PREFERENCES
------------------------------------------------------------------------------*/
* {
   font-family: "UniversLTW01-47LightCn",sans-serif;
   font-style: normal;
}

h1, h2, h3, h4, h5, h6, li, dt, dd, p {
   font-weight: normal;
   text-align: center;
   font-weight: 100;
   letter-spacing: -.05em;
   color: #555;
}
h5, h6, p, td, li { 
  letter-spacing: 0;
}
h1 {
   font-size: 48px;
   margin-top: 30px;
   margin-bottom: 20px;
   text-align: center;
}
h1.score {
   display: none;
}
h1 + p {
   margin: 20px auto;
   line-height: 24px;
   width: 700px;
   text-align: center;
   position: relative;
   font-weight: 300;
}
h2 {
   color: #fff;
   font-size: 52px;
   margin-top: 25px;
}
h3 { /* question mark */
   font-size: 96px;
}
h4 { 
   font-size: 48px;
   margin: 40px 0 0 0;
}
h5 { 
   font-size: 36px;
   margin: 0px 0 20px 0;
   text-align: left;
}
h6 { 
   font-size: 24px;
   margin: 20px 0 12px 0;
   text-align: left;
   color: #555;
   font-weight: 300;
}
h6 + div p {
   font-size: 18px;
   margin: 0px 0 12px 0;
   text-align: left;
   line-height: 26px;
   color: #555; 
   font-weight: 300;
}
p,td,li {
   font-weight: 300;
}
dt, dd, dd li {
   color: #555;
   letter-spacing: 0;
   font-size: 18px;
   line-height: 26px;
   text-align: left;
   margin-bottom: 10px;
   font-weight: 300;
}
dt { 
   font-size: 24px;
}
dd {
   margin-left: 40px;
}
dd li {
   margin: 10px 0 0 20px;
   list-style: disc;
}

dl {
   margin-bottom: 20px;
   margin-left: 40px;
}
dl + p {
text-align: left;
}
p a {
   margin: 0 0 10px 80px;
}
.learn_more h5 {
   margin: 30px 0 20px 0;
   color: #db0000;
}

.learn_more h5:nth-of-type(2) {
   color: #ffcc00;
}
.learn_more h5:nth-of-type(3) {
   color: #78a120;
}
.learn_more h5:nth-of-type(4) {
   color: #2e4aa4;
}
.learn_more h5:nth-of-type(5) {
   color: #db00da;
}
.learn_more h5:nth-of-type(6) {
   color: #009cff;
}
.learn_more h5:nth-of-type(7) {
   color: #55247e;
}
.learn_more h5:nth-of-type(8) {
   color: #ff7f0b;
}
h1.comments, h1.finish {
   margin: 10px 0 0 0;
}
h1.comments {
   display: none;
}

/*------------------------------------------------------------------------------
SITE-WIDE HTML
------------------------------------------------------------------------------*/
body {
   margin: 0;
   background: #ffffff url(../images/nav_background.jpg) repeat-x top;
}

a { text-decoration: none; }
a:link { color: #db0000; }
a:visited { color: #ffcc00; }
a:hover { color: #ffcc00; }
a:active { color: #ffcc00; }

/*------------------------------------------------------------------------------
SITE-WIDE DIVS
------------------------------------------------------------------------------*/

/* the version below doesn't require an hr, but no absolutes outside the margin */
.container {
   position: relative;
   margin: 0 auto;
   width: 1000px;
   overflow: auto;
   padding: 0 0 40px 0;
}

/*-------------------------------------------------------------------------------
HOME PAGE
--------------------------------------------------------------------------------*/
.rowofsquares {
   float: left;
   margin: 30px 0 20px 0;
   width: 1000px;
}
.row1a, .row1b, .row1c, .row1d,
.row2a, .row2b, .row2c, .row2d {
   width: 235px;
   height: 235px;
   float: left;
   margin: 17px 0 0 17px;   
   position: relative;
   background-color: #ccc;
}

.row1a, .row2a {
   margin-left: 0px;
}
.ques1a, .ques1b, .ques1c, .ques1d,
.ques2a, .ques2b, .ques2c, .ques2d {
   float: left;
   width: 1000px;
   /* background: beige; */
   margin: 20px 0 20px 0;
   display: none;
   position: relative;
}
p.close {
   font-weight: normal;
   text-align: center;
   font-weight: 100;
   font-size: 36px;
   color: #ddd;   
   position: absolute;
   top: 0;
   width: 40px;
   right: 0;
   cursor: pointer;
}
.content p {
   color: #fff;
   font-size: 48px;
   position: relative;
   top: 106px;
   left: 101px;
   display: none;
}
#contact {
   position: relative;
   margin: 10px auto;
   width: 300px;
}
img.logo {
   margin: 0 auto;
   width: 350px;
   cursor: pointer;
}
.row1a {
   background-color: #db0000;
}
.row1b {
   background-color: #ffcc00;
}
.row1c {
   background-color: #78a120;
}
.row1d {
   background-color: #2e4aa4;
}
.row2a {
   background-color: #db00da;
}
.row2b {
   background-color: #009cff;
}
.row2c {
   background-color: #55247e;
}
.row2d {
   background-color: #ff7f0b;
}
.ques1a h5 {
   color: #db0000;
}
.ques1b h5 {
   color: #ffcc00;
}
.ques1c h5 {
   color: #78a120;
}
.ques1d h5 {
   color: #2e4aa4;
}
.ques2a h5 {
   color: #db00da;
}
.ques2b h5 {
   color: #009cff;
}
.ques2c h5 {
   color: #55247e;
}
.ques2d h5 {
   color: #ff7f0b;
}
.content, .bkgdimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 235px;
    height: 235px;
    /* cursor: pointer; */
}

.bkgdimg {
   opacity: 0.4;
   filter: alpha(opacity = 40); /* For IE */
   background-repeat: no-repeat;
}

.row1a .bkgdimg {
   background-image: url(../images/strategic.png); 
   background-size: 100%;
   background-position: 50% 150%;
}
.row1b .bkgdimg {
   background-image: url(../images/fresh.png); 
   background-size: 90%;
   background-position: 50% 170%;
   opacity: 0.6;
   filter: alpha(opacity = 60); /* For IE */
}
.row1c .bkgdimg {
   background-image: url(../images/interactive.png); 
   background-size: 100%;
   background-position: 50% 150%;
}
.row1d .bkgdimg {
   background-image: url(../images/visible.png); 
   background-size: 90%;
   background-position: 50% 160%;
}
.row2a .bkgdimg {
   background-image: url(../images/intuitive.png); 
   background-size: 80%;
   background-position: 50% 140%;
}
.row2b .bkgdimg {
   background-image: url(../images/uptodate.png); 
   background-size: 80%;
   background-position: 190% 100%;
}
.row2c .bkgdimg {
   background-image: url(../images/mobile.png); 
   background-size: 70%;
   background-position: 50% 100%;
}
.row2d .bkgdimg {
   background-image: url(../images/sociable.png); 
   background-size: 70%;
   background-position: 90% 100%;
}
footer {
   color: #999;
   font-weight: 100;
   font-size: 12px;
   position: relative;
   margin: 0 auto;
   width: 353px;
   text-align: center;
   padding: 0 0 50px 0;
   cursor: pointer;
}
nav {
   margin: 0;
   text-align: center;
   padding: 7px 0 5px 0;
   height: 16px;
}
nav ul {
   height: 16px;
}
nav li {
   display: inline;
   padding: 0 40px 0 0;
   line-height: 16px;
   color: #fff;
   font-weight: 200;
}
nav li a, nav li a:visited, nav li a:link {
   color: #fff;
   text-transform: lowercase;
   letter-spacing: .1em;
}
nav li a:hover {
   color: #aaa;
}
p.wrap {
   text-align: left;
}
.container #audit {
   display: none;
}
h4+p {
   text-align: center;
   margin: 10px 0 0 0;
}
#audit {
   width: 650px;
   height: 750px;
   padding: 0 50px 50px 50px;
}
#audit h4 {
   color: #ffcc00;
}
#audit p {
   margin-top: 12px;
   line-height: 24px;
   text-align: left;
}
#audit div p {
   color: #db0000;
}
#audit div li {
   margin: 0 5px 0 30px;
   list-style: disc;
   line-height: 21px;
   text-align: left;
}
#audit div {
   float: left;
   width: 300px;
   margin: 10px 0 0 0;
}
#audit div + div {
   float: left;
   margin: 10px 0 0 20px;
   width: 300px;
}

/*----------------------- test page ------------------------- */
h6 + div {
   display: none;
}
span.box, span.chkbox {
   float: left;
   width: 36px;
   height: 30px;
   margin: -4px 0 0 0;
   background: url('../images/checkbox.png') no-repeat 0px 4px;
}
span.chkbox {
   background: url('../images/checked.png') no-repeat 0px 4px;
}

input[type=checkbox] {
   position: fixed;
   top: -9999px; 
   left: -9999px; 
}  
input[disabled=disabled].audit {
   opacity: .3; 
}