/* @override 
	http://localhost:8888/css/style.css
	http://192.168.234.1:8888/css/style.css
*/

/********************************/
/* CSS by justin talbott (.com) */
/********************************/

/* eric mayer 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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
li { display: inline; list-style: outside; }
blockquote, q { quotes: none; }
:focus { outline:0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/* general classes & element restore */
.center { margin: 0 auto; }
.text-center { text-align: center; }
.left { float: left; display:inline; }
.right { float: right; display:inline; }
.image-left { float:left; display:inline; margin: 0 1em .4em 0; }
.image-right { float:right; display:inline; margin: .8em 0 .4em 1em; }
.clear { clear:both; }
.row { clear:both; padding:.3em 0; }
.hide { display: none; }
.smaller, small { font-size:0.7em; }
.larger { font-size:1.4em; }
.error { border: 1px solid #f00; color: #f00; }
.textbox { padding: .3em; }
.underline { text-decoration: underline; }
input:focus, textarea:focus { background:#f1f1f1; }
a { cursor: pointer; text-decoration: none; }
em { font-style: italic; }
strong { font-weight: bold; }
img { -ms-interpolation-mode:bicubic; }


/* font family */
body { font-family: Helvetica, Arial, Verdana, sans-serif; }
p, li, dd, dt, .white-button { font-family: Helvetica, Arial, Verdana, sans-serif; line-height:1.125em; /* 18px */; }
h1, h2, h3, h4, h5, h6 { font-family: HelveticaNeue-Light, HelveticaNeue, "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-weight:normal; }

/* colors */
p { color: #333; }
h1, a { color: #4a81d5; }
h2 { color: #56559e; }
a:hover { color: #2960b3; }

/* font styles */
p { padding: .6em 0; /* 18px */line-height: 1.33em; font-size:0.875em; /* 14px */ } 
li { font-size: 0.875em; /* 22px */ line-height: 1.33em;/* 36px */ }
h1 { font-size: 2em; padding: .3em 0; margin: .1em 0; }
h2 { font-size: 1.6em; padding: .3em 0; margin-top: .1em; }
dl { padding: .4em 0; }

/* reusable */
.white-button { display: block; padding: 10px 25px; margin-top: 15px; float: right; background: #fff; border: 1px solid #b8b7db; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; font-size: .875em; }
.white-button:hover { border-color: #9695b9; }
.video { display: block; float: left; margin-top: 4px; width: 22px; height: 14px; background: url(/imgs/video-icon.gif) no-repeat 0 0; }
.white-button .video { margin-top: 1px;}
#footer { font-size: .9em; border-top: 1px dotted #bbb; text-align: center; padding-bottom: 30px; margin-top: 30px; }
.sform { padding: .3em; width: 93%; }

/* home page */
body { background: url(/imgs/bg.gif) #fff repeat-x 85px 0; }
#home .wrap { width: 887px; margin:0 auto; position:relative; }

#header { width: 100%; height: 85px; border-bottom: 1px solid #fff; background: url(/imgs/header.gif) repeat-x 0 0; }
#header #logo { display: block; float: left; width: 164px; height: 85px; background: url(/imgs/logo.gif) no-repeat 0 0; }
#header .login { float: right; text-align: right; position: absolute; right: 0; top: 30px; }

#home-top { margin: 15px 0; position: relative;}
#home-top p { width: 600px; }

#content { position: relative; padding-top: 15px; }
#content #walkthrough { width: 233px; position: absolute; top:15px; left: 0; z-index: 2; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
#content #walkthrough li a { padding: 7px 10px; display: block; background: url(/imgs/grad.gif) repeat-x 0 0; border: 1px solid #b8b7db; border-top: 0; color: #333; }
#content #walkthrough li.top a { border-top: 1px solid #b8b7db; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
#content #walkthrough li.bottom a { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;}
#content #walkthrough li a.current { font-weight: bold; border-right: 1px solid #d6e3f4; background: #d6e3f4; color: #111; }
#content #walkthrough li a:hover { border-bottom-color: #9695b9; }

#content #main { width: 613px; float: right; padding: 20px; border: 1px solid #b8b7db; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; background: #d6e3f4; }
/*#content #main .video-wrap embed,
#content #main .video-wrap object { padding: 3px; background: #fff; border: 1px solid #56559e; float: right; }
#content .video-wrap { float: right; display: block; margin: 0 0 1em 2em; width: 358px; }
*/
.video-wrap-object { padding: 3px; background: #fff; border: 1px solid #56559e; float: right; margin: 0 0 .4em 1em; }
#content #main a.right { margin-left: 30px; }
#content #panel-holder { background: #d6e3f4; }

#message { margin: 15px 0; padding-left: 232px; position: relative; width: 655px; }
#message strong { font-size: 1.2em; line-height: 1.4em; }
#message li { display: list-item; margin-left: 20px; }

#signup { margin: 15px 0; padding-left: 100px; position: relative; }
#signup strong { font-size: 1.2em; line-height: 1.4em; }
#signup li { display: list-item; margin-left: 20px; }

/* buttons */
#signup-button { background: url(/imgs/signup-button.gif) no-repeat 0 0; overflow: hidden; width: 246px; height: 47px; display: block; position: absolute; right: 0; top: 55px; }
#signup-button:hover { background-position: -47px left; }
#signup-button:active { background-position: -94px left; }

#letsgo-button { background: url(/imgs/letsgo-button.gif) no-repeat 0 0; overflow: hidden; width: 246px; height: 47px; display: block; position: absolute; right: 100px; top: 10px; }
#letsgo-button:hover { background-position: -47px left; }
#letsgo-button:active { background-position: -94px left; }

/* login / register page */
#login { background: #d6e3f4; border: 1px solid #b8b7db; position: absolute; top: 10px; left: 0; width: 175px; font-size: .9em; padding: 12px; }
#login p { padding: .3em 0 0 0; }

#register { font-size: .85em; width: 550px; }
#register h1 { padding-left: 50px; }
#register dt { float: left; width: 190px; text-align: right; }
#register h1 { margin-bottom: 10px; }
#register dt label { display: block; padding-top: 5px; font-size: 1.2em; }
#register dd { margin-left: 200px; position: relative; }
#register dd.captcha, #register .terms { font-size: .8em; }
#register dd.captcha img { margin-bottom: 8px; }
#register dd.captcha input { margin-top: 8px; }


/***** expert broadcast *****/
#expert .wrap { width: 960px; margin:0 auto; position:relative; }
#expert #header { margin-bottom: 35px; }
#expert #header .login a { color: #55a; font-size: .9em; font-weight: bold; }
#left-col { width: 245px; float: left; }
#main-col { width: 670px; float: right; }

/************ expert broadcase *****************/

/* left column */
#video-toggles { padding: 0 2px; }
#video-toggles li { background: url(/imgs/expert/gray-gradient.jpg) repeat-x 0 0; width: 75px; height: 24px; padding: 6px 0 0 4px; display: block; float: left; border-top: 1px solid #a8a7d4; border-left: 1px solid #a8a7d4; }
#video-toggles li.inactive { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
#video-toggles li.private { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-right: 1px solid #a8a7d4; }
#video-toggles label { font-size: 12px; padding-top: 2px; }
#video-toggles.active .active { background: url(/imgs/expert/green-gradient.jpg) repeat-x 0 0; font-weight: bold; color: #fff; }
#video-toggles.inactive .inactive { background: url(/imgs/expert/red-gradient.jpg) repeat-x 0 0; font-weight: bold; color: #fff; }
#video-toggles.private .private { background: url(/imgs/expert/yellow-gradient.jpg) repeat-x 0 0; font-weight: bold; }

#webcam { background: #eee; padding: 4px; display: inline; float: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin-bottom: 20px; }
* html #webcam { padding-bottom: 0; }
#webcam-wrap .active { background: #31a029; }
#webcam-wrap .inactive { background: #c33; }
#webcam-wrap .private { background: #cc1; }


#clientwebcam-wrap {   }
#clientwebcam { background: #eee; padding: 4px; display: inline; float: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin-bottom: 20px; }
* html #clientwebcam { padding-bottom: 0; }

#contact-list .light { color: #888; font-size: .8em; }
#contacts { border: 1px solid #a8a7d4; margin: 8px 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
#contacts a, #contacts li.role { display: block; position: relative; background: url(/imgs/expert/gray-gradient.jpg) repeat-x 0 0; height: 16px; padding: 7px; border-top: 1px solid #a8a7d4; }
#contacts li.role { background: url(/imgs/expert/purple-gradient.jpg) repeat-x 0 0; color: #fff; font-weight: bold; border-top: 0; }
#contacts a { color: #333; }
#contacts img { position: absolute; top: 5px; left: 6px; }
#contacts a span { padding-left: 30px; font-size: .9em; }
#contacts a:hover { background: #fff; border-color: #9695b9; }

/* main column */
#chatbox-tabs li a { background: url(/imgs/expert/gray-gradient.jpg) repeat-x 0 0; height: 24px; padding: 6px 13px 0 13px; display: block; float: left; border-top: 1px solid #a8a7d4; border-left: 1px solid #a8a7d4; color: #333; font-size: .9em; }
#chatbox-tabs li.last a { border-right: 1px solid #a8a7d4; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
#chatbox-tabs li.first a { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
#chatbox-tabs li a.current { background: url(/imgs/expert/purple-gradient.jpg) repeat-x 0 0; color: #fff; font-weight: bold; border-color: #646390; }
#chatbox-tabs li a:hover { background: #fff;  border-color: #9695b9; }
#chatbox-tabs li a.current:hover { color: #333; }

#chatbox-area-wrap { display: block; width: 100%; position: relative; }
#chatbox-area { background: #d6e3f4; border: 1px solid #a8a7d4; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; padding: 8px; position: relative; margin-bottom: 50px; }
#chatbox-tabs { height: 31px; }
#chatbox { height: 350px; width: 644px; display: block; background: #fff; padding: 4px; overflow-y: scroll; position: relative; }
#chatbox dt { position: absolute; left: 8px; margin-top: 5px; border-right: 1px dotted #ccc; width: 100px; font-size: .8em; padding: 4px 10px 4px 30px; }
#chatbox dt img { position: absolute; top: 2px; left: 0; }
#chatbox dd { display: block; border-bottom: 1px dotted #ccc; padding: 10px 0 10px 166px; font-size: .8em; }

#chatbox-controls { padding: 8px 0 25px 0; }
#chatbox-respond { position: relative; width: 100%; }
#chatbox-respond input { padding: 4px; font-size: 1.3em; width: 570px; }
#chatbox-respond #send-text { border: 1px solid #a8a7d4; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #fff; position: absolute; right: 4px; top: 6px; display: block; padding: 5px 12px 7px 12px; font-size: .875em; color: #003; }

/* ajaxed pages */
#ajax-sub-menu { z-index: 2; position: absolute; top:0; left: 0; float: left; }
* html #ajax-sub-menu { left: -9px; top: 1px; }
#ajax-sub-menu a { color: #fff; display: block; float: left; padding: 5px 12px 3px 12px; font-size: .8em; background:#6e6eae; border-right: 1px solid #8f8fcf; }
#ajax-sub-menu a:hover, #ajax-sub-menu .current a { background: #4c4c9c; border-bottom: 1px solid #4c4c9c; }

#ajax-load { width: 100%; display: none; }
#ajax-load .left, #ajax-load .right { position: relative; }
#ajax-load form, #ajax-load #widget-code { margin: 35px 70px 22px 70px; }
#ajax-load #widget-code form { margin: 10px 0;}
#ajax-load h2, #ajax-load h4 { margin-bottom: 6px; }
#ajax-load dl { margin: 10px 0; }
#ajax-load dt { float: left; position: relative; width: 140px; padding: 3px 0; }
#ajax-load dt label { font-size: .8em; display: block; padding-top: 3px; }
#ajax-load dd { margin-left: 152px; padding: 3px 0; }
#ajax-load dd input, #ajax-load .formbox input { padding: .3em; width: 318px; }
#ajax-load dd textarea, #ajax-load .formbox textarea { padding: .3em; width: 321px; height: 150px; }
#ajax-load dd .helper { display: block; padding-top: 3px; font-size: .7em;}

#ajax-load .embed-code, #ajax-load .activity-header { border: 1px solid #a8a7d4; padding: 3px 10px 5px 10px; background: #fff; margin: 10px 0; }

#support { margin: 22px; }

/* dealing with tables */
#ajax-load #report, #ajax-load form#transaction { margin: 35px 22px 22px 22px; }
#ajax-load #visitor-report { margin: 35px 22px 22px 22px; }
#ajax-load #visitor-report form { margin: 0; }
#report table td, form#transaction table td, #visitor-report table td { padding: 8px; font-size: .8em; border-left: 1px solid #a8a7d4; border-right: 1px solid #a8a7d4; } 
#report table, form#transaction table { border: 1px solid #aaa; width: 608px; }
#visitor-report .table-left { float: left; font-size: .85em; margin-top: 20px; position: relative; }
#visitor-report .table-left table { border: 1px solid #aaa; width: 100px; }
#visitor-report .table-right { float: right; font-size: .85em; margin-top: 20px; position: relative	; }
#visitor-report .table-right table { border: 1px solid #aaa; width: 330px; }

/* NEW *****/
a.help { top: 8px; right: 8px; position: absolute; font-size: .85em; background: url(/imgs/question-mark.png) no-repeat 0 0; padding-left: 20px; }
a.help:hover { text-decoration: underline; }
#overlay-wrap { position: absolute; z-index: 9998; width: 100%; height: 100%; top: 0; left:0; display: block; }
#overlay { position: absolute; z-index: 9998; width: 100%; height: 100%; background: #fff; opacity: .8; filter:alpha(opacity=80); -moz-opacity: 0.8; }
* html #overlay-wrap { height: 800px;  }

#help-content { width: 700px; height: 400px; z-index: 9999; top: 50%; left: 50%; margin: -250px 0 0 -350px; position: absolute; background: #fff; padding:20px; border: 1px solid #a8a7d4; text-align: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; overflow-y: scroll; }
.current-help { padding: 10px 15px; border: 1px solid #ddd; background: url(/imgs/bg.gif) repeat-x 0 0; margin: 10px 0;  -moz-border-radius: 4px; -webkit-border-radius: 4px; }

#help-content ul { padding: .6em 0; }
#help-content li { list-style: disc inside none; display: list-item; padding: .2em; }
#help-content strong { font-size: 1.2em; }

/* END *****/