/*** GENERAL STYLES ***/

body {background: #343434 url(../images/design/bkg.gif) center top; text-align: center; margin: 0; padding: 0;}
body, th, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: trebuchet, "trebuchet ms", arial, helvetica, sans-serif; font-size: 15px; color: #fff;}
select, input, textarea {color: #666;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 22px;}
form, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

img, table, fieldset {border: 0;}
ul, ul li {list-style: none; margin: 0; padding: 0;}
p {margin: 0 0 1.5em 0;}
a {color: #ddd;}
a:hover {color: #fff;}

.hide {display: none;}
.show {display: block;}
.alert {color: #c00;}
.small {font-size: 11px;}

.floatleft {float: left;}
.floatright {float: right;}
.imgleft {float: left; margin: 0 30px 20px 0;}
.imgright {float: right; margin: 0 0 20px 30px;}
.imgborder {border: 5px solid #fff;}
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}
.nowrap {white-space: nowrap;}

.spacer {float: none; clear: both; height: 1px; overflow: hidden;}
.hr {float: none; clear: both; height: 1px; overflow: hidden; background: #555; margin: 2em 0;}
.clear {float: none; clear: both;}

.half {width: 50%;}
.third {width: 33%;}
.twothird {width: 60%;}
.quarter {width: 25%;}
.threequarter {width: 70%;}

.ir {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
a .ir {cursor: pointer;}

.container {position: relative; width: 990px; margin: 0 auto; text-align: left;}


/*** TOP STYLES ***/

#top {height: 80px; background: url(../images/design/top.gif) center top;}
#logo {position: absolute; left: 0; top: 0; width: 400px; height: 80px; text-transform: uppercase; letter-spacing: 28px; font-size: 11px; text-align: center; text-decoration: none; color: #999;}
#logo strong {display: block; font-family: georgia, serif; padding-top: 15px; font-size: 29px; line-height: 1.5em; letter-spacing: 0; font-weight: normal; color: #fff; margin-bottom: -12px;}
#logo .ir {background: url(../images/design/logo.gif) no-repeat;}

#loginform {position: absolute; right: 0; top: 0; width: 388px; background: url(../images/design/loginform.gif) left top no-repeat; padding-top: 34px;}
#loginform div {float: left; width: 155px; height: 30px; background: url(../images/design/loginfield.png) left top no-repeat;}
#loginform div input {border: 0; background: transparent; width: 135px; margin-left: 7px; color: #888;}
#loginbttn {color: #333;}


/*** NAV STYLES ***/

#nav {height: 30px; line-height: 26px; background: #000;}
#nav ul {padding: 2px 0; font-size: 13px;}
#nav li {float: left; padding-right: 4px; margin-right: 2px;}
#nav a {display: block; padding: 0 8px 0 12px; text-transform: uppercase; text-decoration: none; color: #ccc;}
#nav li:hover {background: #666 url(../images/design/nav.gif) right -26px;}
#nav li:hover a {background: url(../images/design/nav.gif) left -26px;}
#nav li.on {background: #c66 url(../images/design/nav.gif) right top;}
#nav li.on a {background: url(../images/design/nav.gif) left top; color: #fff;}


/*** MAIN AREA STYLES ***/

#main {padding: 50px 0; overflow: hidden;}
#main .container {width: 890px;}

.videodiv {float: left; background: #fff; padding: 10px; margin: -30px 0 -30px -30px; max-width: 640px;}
.videotext {float: right; width: 230px; padding: 40px 30px 0 0; margin: -30px -30px -30px 0;}

#main h1 {font-size: 23px; line-height: 30px; font-weight: normal; margin-bottom: 20px;}
#main h2 {font-size: 18px; margin-bottom: 20px; font-weight: normal;}
#main h3 {margin-bottom: 5px; color: #aaa;}
#main ul {margin-bottom: 2em;}
#main ul li {padding-left: 20px; background: url(../images/design/bullet.gif) 10px 10px no-repeat;}

p.button {float: left; height: 26px; line-height: 26px; font-size: 13px; padding-right: 4px; background: url(../images/design/button.gif) right -26px;}
p.button a {display: block; padding: 0 8px 0 12px; text-transform: uppercase; text-decoration: none; color: #ccc; background: url(../images/design/button.gif) left -26px; white-space: nowrap;}
p.button:hover {background: url(../images/design/button.gif) right top;}
p.button:hover a {background: url(../images/design/button.gif) left top; color: #fff;}

table {border-collapse: collapse; margin-bottom: 1.5em;}
table td, table th {border: 1px solid #666; padding: 10px 15px; background: #2a2a2a; font-size: 13px;}
table th {font-weight: normal; background: #3d3d3d; text-align: left;}
table thead td, table thead th {font-weight: bold; background: #555;}


/*** HOME STYLES ***/

#homeitems {margin: 30px -20px 0 -10px; overflow: hidden;}
#main ul#homeitems li {float: left; text-align: center; line-height: 37px; margin: 0 10px 10px 0; padding: 0; background: 0;}
#homeitems a {display: block; width: 210px; height: 155px; padding: 5px; text-decoration: none;}
#homeitems img {display: block; width: 200px; height: 113px; border: 5px solid #fff;}
#homeitems span {font-size: 15px;}
#homeitems li.on a {background: #666;}
#homeitems li a:hover {background: #c66;}


/*** TABS STYLES ***/

#tabs {height: 25px; line-height: 25px;}
#tabs ul {padding: 0 20px; font-size: 14px; overflow: hidden;}
#tabs li {float: left; padding-right: 4px; margin-right: 10px; background: #666 url(../images/design/tabs.gif) right -26px;}
#tabs a {display: block; padding: 0 8px 0 12px; text-transform: uppercase; text-decoration: none; color: #ccc; background: url(../images/design/tabs.gif) left -26px;}
#tabs li.on, #tabs li:hover {background: #c66 url(../images/design/tabs.gif) right top;}
#tabs li.on a, #tabs li:hover a {background: url(../images/design/tabs.gif) left top; color: #fff;}

#tabs #pricingtabs {margin-top: 30px; border-bottom: 1px solid #777;}


/*** FORM STYLES ***/

#main form {position: relative; background: #c66; padding: 30px 40px;}
#main form .corner1, #main form .corner2, #main form .corner3, #main form .corner4 {position: absolute; width: 6px; height: 6px; overflow: hidden; background: url(../images/design/button.gif); padding: 0 !important;}
#main form .corner1 {left: 0; top: 0; background-position: left top;}
#main form .corner2 {right: 0; top: 0; background-position: right top;}
#main form .corner3 {left: 0; bottom: 0; background-position: left -20px;}
#main form .corner4 {right: 0; bottom: 0; background-position: right -20px;}

#main form div {clear: left; padding-top: 3px;}
#main form label {position: relative; float: left; width: 100px; padding-right: 20px; text-align: right;}
#main form .note {display: block; padding-left: 200px; margin-bottom: 5px; font-size: 11px;}
#main form .req {position: absolute; right: 4px; top: 0; color: #000; font-size: 26px; line-height: 30px; font-family: arial, sans-serif;}
#main form .text input, #main form textarea {width: 350px;}
#main form textarea {height: 100px;}
#main form .checkbox input {vertical-align: middle; width: auto !important;}
#main form .image img, #main form .button input {margin: 5px 0 0 120px; cursor: pointer; background: #000; color: #fff; border: 0; font-size: 13px; text-transform: uppercase;}

#main #mailinglistform {float: right; margin: 0 0 20px 50px;}
#main #mailinglistform .text input, #main #mailinglistform textarea {width: 250px;}

#main #contactform {float: left; margin: 0 20px 20px 0;}
#main #contactform .text input, #main #contactform textarea {width: 250px;}


/*** SCROLL AREA STYLES ***/

#scroll {background: #000; border-bottom: 1px solid #343434;}
#scroll .container {padding: 10px 0; overflow: hidden;}

#scrollprev, #scrollnext {position: absolute; top: 0; text-align: center; width: 40px; height: 170px; line-height: 170px; color: #000; background: #000; font-size: 50px; text-decoration: none; overflow: hidden; z-index: 100;}
#scrollprev .ir, #scrollnext .ir {background: #000 url(../images/design/scrollarrows.gif) no-repeat;}
#scrollprev {left: 0;}
#scrollnext {right: 0;}
#scrollprev .ir {background-position: left center;}
#scrollnext .ir {background-position: right center;}
#scrollprev.gray .ir, #scrollnext.gray .ir {background-image: url(../images/design/scrollarrows-gray.gif);}

#scrollarea {margin: 0 40px; width: 910px; overflow: hidden;}
#scrollwidth {width: 10000px;}

#scrollitems {position: relative; float: left;}
#scrollitems li {float: left; text-align: center; line-height: 27px; margin-right: 10px;}
#scrollitems a {display: block; width: 200px; height: 140px; padding: 10px 10px 0; text-decoration: none;}
#scrollitems img {display: block; width: 200px; height: 113px;}
#scrollitems span {font-size: 12px;}
#scrollitems li.on a {background: #666;}
#scrollitems li a:hover {background: #c66;}


/*** FOOTER STYLES ***/

#footer {background: url(../images/design/footer.gif) center top repeat-x; font-size: 13px; line-height: 30px; padding: 20px 0;}
#copyright {padding: 0 20px; color: #999;}
#social {float: right; padding: 0 20px;}
#social li {float: left; padding-left: 3px;}