/* SkinRx CSS Style Sheet */

body {
margin: 0;
padding: 0;
font-family: "trebuchet ms", verdana, sans-serif;
background-color: #001b2a;
}

h1 {
font-size: 20px;
color: #ead59c;
margin: 0;
padding: 0;
font-weight: normal;
}


h2 {
font-size: 18px;
color: #fff;
margin: 0 0 2px 0;
padding: 0;
font-weight: normal;
}


#container {
width: 100%;
margin: 0;
padding: 0;
}

.clearboth {clear: both;}

.clearleft {clear: left;}

.clearright {clear: right;}

/* -------- Top Beige Area -------- */

#topbeige {
width: 100%;
height: 18px;
background-color: #ebe0d1;
margin: 0;
padding: 0;
}

#beigebanner {
width: 828px;
height: 18px;
margin: 0 auto;
padding: 0;
background-image: url(images/beige_banner.gif);
background-repeat: no-repeat;
}

/* -------- Top White Area -------- */

#topwhitearea {
width: 100%;
height: 72px;
background-color: #fff;
margin: 0;
padding: 0;
}

#logobanner {
width: 768px;
height: 72px;
background-image: url(images/skinrx_logo_banner.gif);
background-repeat: no-repeat;
margin: 0 auto;
padding: 0 30px 0 30px;
}

/* -------- Top Nav -------- */

#topnavlist {
float: right;
margin: 30px 0 0 0;
padding: 0;
font-size: 14px;
}

ul #topnavlist
{
margin: 0;
padding: 0;
white-space: nowrap;
}

#topnavlist li
{
display: inline;
list-style-type: none;
}

#topnavlist a { padding: 3px 10px; }

#topnavlist a:link, #topnavlist a:visited
{
color: #515151;
text-decoration: none;
}

#topnavlist a:hover
{
color: #fff;
background-color: #669ada;
text-decoration: none;
}

.shiftimg {float: left; margin: 8px 0 0 0;}


/* -------- Mid Blue Banner Area -------- */

#midbluearea {
width: 100%;
height: 214px;
background-color: #a0c0e7;
margin: 0;
padding: 0;
}

#bluebanner {
width: 828px;
height: 214px;
background-image: url(images/blue_banner_img.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}

.bigtxt {
font-size: 1.9em;
color: #fff;
margin: 0;
line-height: 1em;
font-weight: normal;
padding: 50px 0 0 60px;
}

/* Demo and Events Tabs */


.whitebutton {
width: 168px;
height: 29px;
margin: 45px 0 0 60px;
padding: 6px 0 0 0;
background-image: url(images/button_white.jpg);
color: #576d8a;
font-size: 14px;
font-weight: bold;
text-align: center;
}

.whitebutton a:link {color: #576d8a; text-decoration: none;}
.whitebutton a:visited {color: #576d8a; text-decoration: none;}
.whitebutton a:hover {color: #dda703; text-decoration: none;}


/* NO LONGER USING THIS...
.tabdemo {
width: 173px;
height: 41px;
margin: 0 0 0 20px;
background-image: url(images/tab_getademo.gif);
background-repeat: no-repeat;
color: #ce0d00;
font-weight: bold;
float: left;
border: 1px solid #cc0000;

}

.tabevents {
width: 179px;
height: 41px;
margin: 0;
background-image: url(images/tab_events.gif);
background-repeat: no-repeat;
color: #576d8a;
font-weight: bold;
float: left;
border: 1px solid #cc0000;
} */

/* -------- Thinner Mid Blue Area -------- */

#thinbluebanner {
width: 828px;
height: 174px;
background-image: url(images/thin_bluebanner_img.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}

/* -------- Main Page Blue Area -------- */

#mainbluearea {
width: 100%;
background-color: #24456e;
margin: 0;
padding: 0;
}

#mainpage {
width: 828px;
background-image: url(images/main_blue_repeater.gif);
margin: 0 auto;
padding: 0;
}

#pageholder {
width: 800px;
margin: 0 auto;
padding: 0;
}

#whitebluefader {
width: 800px;
height: 17px;
background-image: url(images/white_to_blue_fader.gif);
background-repeat: no-repeat;
}

/* -------- Side Nav -------- */

#sidenavarea {
width: 210px;
float: left;
padding: 0 14px 0 14px;
border-right: 1px solid #5c799c;
}

.sidenavtitle {
font-size: 18px;
color: #ead59c;
margin: 0;
padding: 0 0 0 9px;
}

#sidenavarea ul {
margin: 5px 0 20px 0;
padding: 0;
list-style-type: none;
font-size: 14px;
}

#sidenavarea a {
display: block;
padding: 3px 10px 3px 10px;
width: 190px;
}

#sidenavarea a:link, #navlist a:visited {
color: #e5edf7;
text-decoration: none;
}

#sidenavarea a:hover {
background-color: #507198;
color: #ffeebc;
}

/* -------- Content Area -------- */

#contentbox {
width: 519px;
float: right;
padding: 0 20px 30px 20px;
}

#contentbox p {
font-size: 0.9em;
margin: 0 0 1em 0;
line-height: 1.8em;
color: #fff;
}

.divider {
width: 100%;
height: 1px;
border-top: 1px solid #5c799c;
margin: 20px 0 20px 0;
}

.bulletsreg {
color: #fff;
font-size: 0.9em;
line-height: 1.4em;
}

.bulletsreg li {
padding: 5px 0 5px 0;
}

#contentbox a:link {color: #fff8bd; text-decoration: underline;}
#contentbox a:visited {color: #fff8bd; text-decoration: underline;}
#contentbox a:hover {color: #ffea34; text-decoration: underline;}

#mapholder {
width: 175px;
float:right;
margin: 0 0 20px 20px;
text-align: center;
font-size: 11px;
color: #fff;
}

#contentbox .watchvideo {
font-size: 18px;
color: #95dbde;
}

#contentbox .watchvideo a:link {color: #95dbde; text-decoration: underline;}
#contentbox .watchvideo a:visited {color: #95dbde; text-decoration: underline;}
#contentbox .watchvideo a:hover {color: #fff8bd; text-decoration: underline;}

#contentbox .question {
font-size: 18px;
color: #6fbdf6;
}

#contentbox .question a:link {color: #8dcfff; text-decoration: underline;}
#contentbox .question a:visited {color: #8dcfff; text-decoration: underline;}
#contentbox .question a:hover {color: #fff8bd; text-decoration: underline;}

#contentbox .demo {
font-size: 18px;
color: #fff;
}

#contentbox .demo a:link {color: #fff; text-decoration: underline;}
#contentbox .demo a:visited {color: #fff; text-decoration: underline;}
#contentbox .demo a:hover {color: #fff8bd; text-decoration: underline;}

/* NO LONGER USING THIS...
#promptbox {
width: 395px;
background-color: #24456e;
border: 1px dashed #a1c1e8;
margin: 0;
padding: 15px;
}*/

.shiftbutton {position: relative; top: 8px; right: 2px;}

.shiftdemo {position: relative; top: 10px; right: 4px;}

.normallist {
margin: 0 0 10px 0;
padding: 0 0 0 30px;
color: #fff;
font-size: 0.9em;
}

.normallist li {
margin: 0;
padding: 0 0 0.6em 0;
line-height: 1.4em;
}

.border {
border: 1px solid #bbcce6;
}

.imgholder {
margin: 0 0 5px 0;
font-size: 0.70em;
color: #d9e2ed;
}

#contentbox .right {
float: right;
text-align: center;
margin: 20px 0 15px 15px;
font-size: 0.7em;
color: #d9e2ed;
}


/* Right Side Thumbs Holder */

#rightsideholder {
width: 67px;
margin: 0 0 0 15px;
padding: 0 0 0 20px;
float: right;
border-left: 1px solid #5c799c;
}

.thumbholder {
width: 90px;
margin: 0 0 10px 0;
font-size: 0.7em;
color: #d9e2ed;
text-align: center;
}

/* -------- Thumbnail Viewer for Gallery -------- */

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
border: 1px solid #d8deeb;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font-weight: bold;
font-size: 10px;
font-family: "trebuchet ms", arial, sans-serif;
line-height: 1.1em;
color: #afafaf;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #313131;
color: #fff;
font-size: 12px;
font-family: "trebuchet ms", arial, sans-serif;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid #000;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}


/* -------- Events Listing Page -------- */

#contentbox .eventname {
font-size: 1.0em;
font-weight: bold;
float: left;
margin: 0;
}

#contentbox .type {
font-size: 0.7em;
margin: 0;
background-color: #7ba2cf;
border: 1px solid #d2e0f0;
margin: 0 0 0 10px;
padding: 0 4px 0 4px;
float: left;
}

#contentbox .desc {
font-size: 0.75em;
margin: 0 0 10px 0;
padding: 0;
}

#contentbox .date {
float: left;
margin: 0 20px 2px 0;
}

#contentbox .time {
float: left;
margin: 0 0 2px 0;
}

#eventimg {
width: 90px;
margin: 0 0 20px 20px;
float: right;
}

#contentbox .location {
font-size: 12px;
margin: 0 0 5px 0;
padding: 0;
line-height: 16px;
}

#contentbox .resourcelist {
margin: 10px 0 15px 0;
line-height: 2.0em;
color: #acbfd6;
font-size: 0.75em;
}

#contentbox .shifticon {
position: relative; top: 3px;
padding: 0 5px 0 0;
}

#contentbox .register {
width: 7em;
font-size: 0.8em;
background-color: #ead59c;
border: 1px solid #fefaef;
margin: 0;
padding: 1px 6px 1px 6px;
text-align: center;
}

#contentbox .register a:link {color: #10325b; text-decoration: none;}
#contentbox .register a:visited {color: #10325b; text-decoration: none;}
#contentbox .register a:hover {color: #0058c0; text-decoration: none;}

#contentbox .registertxt {
font-size: 0.7em;
margin: 0;
color: #acbfd6;
line-height: 14px;
}

.note{
color: #acbfd6;
}

/* -------- Home Page Layout -------- */

#eventsholder {
width: 153px;
border: 2px solid #f6f3e8;
margin: 0 0 10px 20px;
padding: 15px 12px 15px 15px;
float: right;
background-color: #f6ebcd;
}

#eventsholder .eventstitle {
font-size: 15px;
color: #24456e;
font-weight: bold;
margin: 0 0 10px 0;
}

#eventslist {
margin: 0;
padding: 0;
list-style: none;
}

#eventslist li {
padding: 0 0 10px 18px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .1em;
font-size: 12px;
color: #446388;
line-height: 14px;
}

#eventslist a:link {color: #cb7700; text-decoration: none;}
#eventslist a:visited {color: #cb7700; text-decoration: none;}
#eventslist a:hover {color: #346fbd; text-decoration: none;}

.dividersm {
width: 310px;
height: 1px;
border-top: 1px solid #5c799c;
margin: 20px 0 20px 0;
}

#contentbox .title {
color: #f6ebcd;
font-weight: bold;
margin: 0;
}

#contentbox .eventtxt {
font-size: 12px;
color: #000;
margin: 0;
line-height: 14px;
}


/* -------- Footer Dark Blue Area -------- */

#footerarea {
width: 100%;
background-color: #001b2a;
margin: 0 0 15px 0;
padding: 0;
}

#footer {
width: 748px;
height: 38px;
background-image: url(images/footer_backrnd.gif);
background-repeat: no-repeat;
margin: 0 auto;
padding: 18px 40px 0 40px;
}

.copyright {
font-size: 0.7em;
color: #728e9e;
margin: 0;
float: left;
}

.footertxt {
font-size: 0.7em;
color: #728e9e;
margin: 0;
float: right;
}

.footertxt a:link {color: #b0ab71; text-decoration: none;}
.footertxt a:visited {color: #b0ab71; text-decoration: none;}
.footertxt a:hover {color: #ebe16d; text-decoration: none;}