/*-----Grout Grunt Style Sheet updated 12-19-11-----
Colors: Blue #3399cc
*/



/*-----CSS Reset-----*/

html, body, h1, h2, h3, p, ul, ol, li img { margin: 0; padding: 0; }
img { border: 0; }
ol, ul { list-style: none; }

body {background: #6896CF;font: 62.5% arial, helvetica, verdana, sans-serif;text-align: center;margin: 0 auto;}

#wrapper {position: relative;text-align: left;width: 991px;margin: 0 auto;background: #fff url(images/imgGroutgrunt.jpg) no-repeat right bottom;}
#wrapper2 {position: relative;text-align: left;width: 991px;margin: 0 auto;background-color: #fff;}

.header {width: 991px;height: 145px;}

h1 {font-size: 2.4em; margin: 20px 0 10px 0;}
h2 {font-size: 1.3em;font-weight: bold;}
p {font-size: 1.2em;padding: 0 30px 0 30px;margin-bottom: 10px;text-align: justify;}
a {color: #fff;}
span {font-weight: bold;}
.italic {font-style: italic;}
.black {color: #000;}
.boldred {font-weight: bold; color: red;}
.contact a {color: blue;}
ul li{font-size: 12px;list-style: disc inside;padding-bottom: 3px;}
#Content {min-height: 580px; margin: 0; padding: 0;}
.orangeBox2 {float: left; width: 195px; min-height: 600px; text-align: center; background-color: #F99F1B; margin: 0 34px 0 36px;}
.orangeBox2 img {padding: 10px 0 25px 0;}


/*------- Navigation --------*/
#mainNav {position: absolute;top: 125px;width: 989px;margin: -3px 0;}
#mainNav p {text-align: left;color: #fff;font-size:1.4em;}
#mainNav a {color:#fff;text-decoration: none;padding: 0 11px;}
#mainNav a:hover {text-decoration: underline;}

/*------- Home Page --------*/
#homeContent {position: relative;width: 991px; height: 705px; margin: 0 auto; background: #fff url(images/imgHomeBkgd.gif) repeat-y;}
.orangeBox {float: left; width: 195px; text-align: center; background-color: #F99F1B; margin: 0 34px 0 36px;}
.orangeBox img {padding: 10px 0 4px 0;}
.columnLeft {position: absolute; top: 10px; left: 40px;}
#buttonLeft {position: absolute; top: 590px; left: 40px;}
.columnRight {position: absolute; top: 10px; right: 36px;}
#buttonRight {position: absolute; top: 590px; right: 34px;}
#videohome {position: absolute;top: 570px;left: 272px;}

.center {position: absolute; left: 231px; width: 531px; height: 705px; background: #4a85cb url(images/imgGroutgruntHome.jpg) no-repeat center top;}
* html .center {margin-top: -3px;}
.center p {font-size: 1.37em; color: #fff; padding: 0 25px 0 130px; margin-bottom: 10px; text-align: left; line-height: 130%;}
.center h1 {color: #fff; font-size: 2.25em; font-weight: bold; margin: 11px 0 10px 20px;}
.center h2 {font-size: 1.85em;font-style: italic; margin: 465px 0px 0px 30px; letter-spacing:2px}
.center h3 {font-size: 2.3em; color: #fff; font-weight: normal; margin: 13px 0px 0px 70px;}
.center a {text-decoration: none;}
.center a:hover {color: #666 ! important;}
#arrow {position: absolute; bottom: 8px; right: 90px;}
#info {position: absolute; left: 251px; top: 355px; width: 195px;}
#info p {font-size: 1.37em; color:#000; padding: 0 0px 10px 0px; margin: 0 0 0 0px; text-align: left; line-height: 130%;}

/*------- About Us Page --------*/
#videoabout {position: absolute;top: 635px;right: 360px;}
#orderabout {margin: 20px 0 20px 0;}
#designed {position: absolute;top: 655px;right: 30px;}
#designed2 {margin: -15px 0 0 670px;} 

/*------- IE Hacks --------*/
* html #orderabout {margin: 30px 0 53px 0;}
* html #designed2 {margin: 318px 0 0 420px;} 
* html .orangeBox, * html .orangeBox2 {margin: 0 28px 0 19px;}


/*------- Contact Us Page --------*/
#ordercontact {margin: 260px 0 50px 10px;}
#rotationPic {padding-bottom:410px;}


/*------- Models Page --------*/
#modelsContent {position: relative; height: 705px; margin: 0 auto; padding: 0px 60px 20px 60px;}
#modelsContent p {margin: 0; padding: 0; font-size: 1.5em;}
#modelsContent li {padding: 0 0 8px 12px; text-indent: -12px; font-size: 1.5em;}
#modelsContent h2 {font-size: 1.6em; padding: 0 0 8px 0;}
#modelsContent .order {margin: 15px 0 0px 0;}
#grgrII {float: left; width: 350px; margin: 275px 0 0 0px;}
#grgrIIPhoto {position: absolute; top: 65px; left: 50px;}
#grgr {float: right; width: 340px; margin: 275px 0 0 0;}
#grgrPhoto {position: absolute; top: 50px; right: 50px;}
#videoModels {position: absolute;top: 570px;left: 350px;}

/*------- Masonry Use Page --------*/
#grgrIIPhotoMasonry {position: absolute; top: 280px; right: 0px;}
#grgrPhotoMasonry {position: absolute; top: 500px; right:200px;}
#designedby {position: absolute; top: 670px; right:40px;}

/*------- Distributors Page --------*/
.distributors h1 {color: #000;margin: 20px 50px;clear: left;}
.distributors h2 {color: #000;margin: 20px 0 0 50px;}
.distributors p {color: #000;margin-left: 20px;}
.distributors a {color: #000;}

#state_list {margin: 0 0 20px 50px;height: 375px;}
#state_list h3 {margin: 40px 0 20px;color: #ff6600;}
#state_list ul {float: left;margin: 0 40px 0 0;list-style-type: none;}
#state_list ul li {padding-bottom: 0.5em;background-color: transparent;}
#state_list ul a {color: #000;}
#state_list ul.last {margin-right: 0;}

.movie {position: relative;text-align: center;height: 550px;}
.audiop {text-align: center;}

/*------- Versatility page --------*/
.versatility h1 {padding: 0 100px 0 50px;}
.versatility .indent {padding: 0 100px 0 50px; margin-bottom: 10px;}
.versatility img {margin-bottom: 5px;}
.versatility .order {position: absolute; top: 470px; right: 60px;}
.versatility ul {margin: 10px 0 30px 67px;}
.versatility ul li {margin-bottom: 5px; list-style: disc; font-size: 1.4em;}
.versatility ul li ul {margin: 7px 0 3px 50px;}
.versatility ul li ul li {list-style: circle;font-size: 1em;}

/*------- Footer --------*/
#footer {width:991px;background-color: #000;}
#footer p{font-size: 1.1em;color: #fff;margin-top: 0px;text-align: center; padding: 6px 0 6px 0; line-height: 170%;}
#footer a {color: #fff;}
