@charset "UTF-8";
/* CSS Document */


/* Information: ---------------------------------------- */
/* This is the style sheet for the Evolution of DRTV     */
/* website published by R2C Group.                       */
/* Web slicing and coding was done by Respond2 of        */
/* the R2C Group. Www.r2cgroup.com | 503-222-0025.       */
/* ----------------------------------------------------- */


/*
Color Pallette
941717 - Rouge
666666 - Grey
AAAAAA - Footer Grey
*/


body{
background-color: #fff;
font-size: 13px;
}

* { margin: 0; padding: 0 }

p { text-align: left; margin: 15px 0 }

p, ul { font-size: 13px; line-height: 1.4em } 

p a, li a { color: #39c; text-decoration: none }

p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }

p#cross-links { text-align: center }

p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }

a:focus { outline:none }

img { border: 0 }

.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 20px 0;
position: relative;
width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden; 
border: 0px solid #000; /* this is the border. should have the same value for the links */
margin: auto;
width: 570px; /* Also specified in  .stripViewer .panelContainer .panel  below */
height: 420px;
clear: both;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width: 570px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding: 0px;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
margin: auto;
}

.stripNav ul { /* The auto-generated set of links */
list-style: none;
}

.stripNav ul li {
float: left;
margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

.stripNav a { /* The nav links */
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #fff;
text-decoration: none;
display: block;
padding: 0 15px;
}

.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }

.stripNav li a:hover {
background: #333;
}

.stripNav li a.current {
background: #000;
color: #fff;
}

.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}

.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}


/* HIDE NAVIGATION ITEMS (TABS AND ARROWS) */
.stripNavL {
left: 0;
display: none;
}
.stripNavR {
right: 0;
display: none;
}
#stripNav0 {
display: none;
}





/* BEGIN CUSTOM STYLES -------------------------------------*/
/* ---------------------------------------------------------*/

#page_wrapper {
background-image: url(images/BKGD_main.jpg);
width: 970px;
height: 670px;
margin: 0 auto;
position: relative;
}


div.slider-wrap {
position: absolute;
bottom: 60px;
left: 38px;
margin: 0px;
padding: 0px;
width: 570px;
}
h1.the_evolution_of_drtv {
background-image: url(images/TTL_evolution_of_drtv.gif);
position: absolute;
top: 60px;
left: 55px;
font-size: 1px;
text-indent: -9999px;
width: 531px;
height: 155px;
z-index: 1001;
}





/* SLIDER BOX STYLES ---------------------------------------*/
/* ---------------------------------------------------------*/

a {
color: #941717;
}
a:hover {
color: #666;
}

h2.species_title {
color: #941717;
font-family: Georgia, Times New Roman, Times, serif;
font-weight: normal;
font-size: 18px;
margin-bottom: 5px;
line-height: 18px;
}
div.infobox {
background-color: #fff;
border: 1px dashed #666;
padding: 15px;
text-align: left;
font-family: "Times New Roman", Times, serif;
line-height: 1.5em;
}
div.infobox strong {
font-family: Helvetica, Arial, sans-serif;
}
#wholebox_number_1, #wholebox_number_2, #wholebox_number_3, #wholebox_number_4, #wholebox_number_5, #wholebox_number_6  {
min-height: 420px;
height: auto !important;
height: 420px;
position: relative;
}
#copyblock {
margin-right: 60px;
}
#wholebox_number_1 {
background-image: url(images/BKGD_slider_1.gif);
background-position: bottom;
}
#panel_number_1 {
background-image: url(images/BKGD_1.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 350px;
position: absolute;
top: 75px;
left: 75px;
}
#panel_number_2 {
background-image: url(images/BKGD_2.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 460px;
position: absolute;
top: 85px;
left: 20px;
}
#wholebox_number_2 {
background-image: url(images/BKGD_slider_2.gif);
background-position: bottom;
}
#panel_number_2 #copyblock {
margin-right: 90px;
}
#panel_number_3 {
background-image: url(images/BKGD_3.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 400px;
position: absolute;
top: 100px;
right: 10px;
}
#wholebox_number_3 {
background-image: url(images/BKGD_slider_3.gif);
background-position: bottom;
}
#panel_number_3 #copyblock {
margin-right: 80px;
}
#panel_number_4 {
background-image: url(images/BKGD_4.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 400px;
position: absolute;
top: 15px;
left: 50px;
}
#panel_number_4 #copyblock {
margin-right: 80px;
}
#wholebox_number_4 {
background-image: url(images/BKGD_slider_4.gif);
background-position: bottom;
}
#panel_number_5 {
background-image: url(images/BKGD_5.gif);
background-position: bottom right;
background-repeat: no-repeat;
width: 500px;
position: absolute;
top: 35px;
left: 20px;
}
#wholebox_number_5 {
background-image: url(images/BKGD_slider_5.gif);
background-position: bottom;
}
#panel_number_5 #copyblock {
margin-right: 80px;
}
#panel_number_6 {
background-position: bottom right;
background-repeat: no-repeat;
width: 450px;
position: absolute;
top: 35px;
left: 40px;
}
#wholebox_number_6 {
background-image: url(images/BKGD_slider_6.gif);
background-position: bottom;
}
#panel_number_6.infobox {
overflow: auto;
height: 230px;
}





/* SLIDER NAVIGATION STYLES --------------------------------*/
/* ---------------------------------------------------------*/
#primates {
background-image: url(images/TTL_click_these_men.gif);
background-position: bottom left;
background-repeat: no-repeat;
width: 300px;
position: absolute;
bottom: 0px;
left: 200px;
min-height: 173px;
height: auto !important;
height: 173px;
}
#primates img {
margin: 0px;
padding: 0px;
width: 45px;
}
#primates a {
margin: 0px;
padding: 0px;
}







/* FORM BOX WRAPPER STYLES ---------------------------------*/
/* ---------------------------------------------------------*/
.required {
color: #941717;
}
form#ebook_form {
margin-top: 0px;
}
#form_box_wrapper {
width: 250px;
position: absolute;
top: 90px;
right: 60px;
}
h2.its_time_to_evolve {
background-image: url(images/TTL_its_time_to_evolve.gif);
font-size: 1px;
text-indent: -9999px;
width: 255px;
height: 22px;
z-index: 1001;
}
h2.starburst {
background-image: url(images/GFK_starburst.gif);
position: absolute;
top: 120px;
right: 0px;
font-size: 1px;
text-indent: -9999px;
width: 106px;
height: 108px;
z-index: 1000;
}
#preform_content {
width: 200px;
margin: 8px 0px 20px 0px;
}
input.field {
width: 100%;
background: #fff;
border: 1px solid #ccc;
height: 22px;
padding: 3px 0px 0px 4px;
margin-bottom: 10px;
font-size: 16px;
font-family: Georgia;
font-weight: normal;
color: #666;
}
label {
font-weight: bold;
}
div.shortbox {
width: 118px;
float: right;
}
div.shortbox_left {
width: 118px;
float: left;
}
input.submit_button {
width: 261px;
height: 31px;
border: none;
background: none;
margin-top: 15px;
}
table#checkbox tr td {
vertical-align: top;
}
table#checkbox tr td.td_left {
padding-right: 8px;
}









/* DOWNLOAD BOX STYLES -------------------------------------*/
/* ---------------------------------------------------------*/
#download_box a {
color: #000;
}
#download_box a:hover {
color: #666;
}

#download_box {
position: absolute;
top: 95px;
right: 50px;
width: 250px;
}
b.baloon_text {
color: #fff;
}
h2.thank_you {
background-image: url(images/TTL_thank_you.gif);
background-repeat: no-repeat;
font-size: 1px;
text-indent: -9999px;
width: 255px;
height: 22px;
margin-bottom: 4px;
}
h3.black_title {
font-family: Georgia, Times New Roman, serif;
font-weight: normal;
font-size: 22px;
}
#download_graphics {
text-align: center;
}
img#GFK_e-book {
margin: 20px 0px 10px 0px;
}






/* CONTACT BOX STYLES --------------------------------------*/
/* ---------------------------------------------------------*/
#r2cgroup_contact {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
width: 275px;
position: absolute;
bottom: 70px;
right: 20px;
padding-right: 20px;
color: #666;
}
#r2cgroup_contact a {
color: #49a4a4;
}
#r2cgroup_contact h3 {
font-size: 16px;
margin: 0px;
padding: 0px;
}
#r2cgroup_contact a:hover {
color: #000;
}
#contact_box {
border: 1px dashed #666;
background-color: #fff;
padding: 8px;
}
#tv {
position: absolute;
right: 0px;
top: 18px;
}





/* FOOTER STYLES -------------------------------------------*/
/* ---------------------------------------------------------*/
#footer {
font-size: 11px;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: #aaa;
}
#footer a {
color: #aaa;
}
#footer a:hover {
color: #941717;
}