/* @override http://wrinkle.test.citinternet.com/site_wb.css */

/* CSS Document */

html {
margin: 0; 
padding: 0;  
}

body {
margin: 15px 0 0; 
padding: 0; 
background: #FFFFFF;
text-align: center;
font-family: Verdana, Helvetica, Arial, Sans Serif;
font-size: 1em; 
background: url(img/bg_test.jpg); 
}

/* clears space at bottom */
div.clearone {
clear:  both;
}

/* Main Structure, wrap the whole layout*/

div#container{
width:800px;
text-align: center;
margin: 0 auto;
}

p{
margin:0 10px 10px
}

/* @group Navbar Area */

div#headercontainer{

width: 800px;
margin: 0 auto;
height: 108px;
background: url(img/banner_800.gif) no-repeat;
position: relative;
padding: 0;
z-index: 20;
}

/* @group Navbar li */

#navbar li {
margin: 0; 
padding: 0; 
list-style: none;
position: absolute; 
top: 0;
display: block;
}

/* These set up the underlying button areas */

#ldog {left:  -10px; width: 170px;
height: 244px;
}
#logohome {

width: 440px;
height: 50px;
left: 150px;
z-index: 14;
text-align: left;
}
#navarea {
left: 145px; 
width: 496px;
height: 100px;
position: relative;
background: url(img/wb_logo.gif) no-repeat 20px 14px;
text-align: left;
}
#rdog { width: 208px;
height: 301px;
left: 650px;
}
#sideanimal { 
width: 190px;
height: 190px;
left: 665px;
z-index: -9;
}


/* @end */

/* @group Buttons */



#navrow {
width: 496px; 
height: 30px;
margin: 0 auto;
padding:  0;
background: url(img/nav_sprites.gif);
position: absolute;
top: 60px;
}


#navbuttons li {
margin: 0; 
padding: 0; 
list-style: none;
position: absolute; 
top: 0;
}

#navbuttons li, #navbuttons a{
height: 30px; 
display: block;
}

/* These set up the underlying button areas */

#button1, #button1sel {left:  0px; width: 28px;}
#button2, #button2sel {left:  28px; width: 136px;}
#button3, #button3sel {left:  164px; width: 54px;}
#button4, #button4sel {left:  218px; width: 110px;}
#button5, #button5sel {left:  328px; width: 70px;}
#button6, #button6sel {left:  398px; width: 98px;}


/* These cover global and page-specific button behaviors */

#button1 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat 0px 0px;}
#button1sel a:link {background: url(img/nav_sprites.gif) no-repeat 0px 0px;}
#button1sel a:hover {background: url(img/nav_sprites_roll.gif) no-repeat 0px 0px;}
#button1sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat 0px 0px;}

#button2 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -28px 0px;}
#button2sel a:link {background: url(img/img/nav_sprites.gif) no-repeat -28px 0px;}
#button2sel a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -28px 0px;}
#button2sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat -28px 0px;}

#button3 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -164px 0px;}
#button3sel a:link {background: url(img/nav_sprites.gif) no-repeat -164px 0px;}
#button3sel a:hover {background: url(img/img/nav_sprites_roll.gif) no-repeat -164px 0px;}
#button3sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat -164px 0px;}

#button4 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -218px 0px;}
#button4sel a:link {background: url(img/nav_sprites.gif) no-repeat -218px 0px;}
#button4sel a:hover {background: url(img/img/nav_sprites_roll.gif) no-repeat -218px 0px;}
#button4sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat -218px 0px;}

#button5 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -328px 0px;}
#button5sel a:link {background: url(img/nav_sprites.gif) no-repeat -328px 0px;}
#button5sel a:hover {background: url(img/img/nav_sprites_roll.gif) no-repeat -328px 0px;}
#button5sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat -328px 0px;}


#button6 a:hover {background: url(img/nav_sprites_roll.gif) no-repeat -398px 0px;}
#button6sel a:link {background: url(img/nav_sprites.gif) no-repeat -398px 0px;}
#button6sel a:hover {background: url(img/img/nav_sprites_roll.gif) no-repeat -398px 0px;}
#button6sel a:visited {background: url(img/nav_sprites_roll.gif) no-repeat -398px 0px;}

/* @end */



/* @end */

/* @group Subnav */

#ldog_s {left:  30px; width: 90px;
height: 130px;
}
#logohome_s {
width: 440px;
height: 50px;
left: 150px;
z-index: 14;
text-align: left;
}
#navarea_s {
left: 145px; 
width: 496px;
height: 100px;
position: relative;
background: url(img/wb_logo.gif) no-repeat 20px 14px;
text-align: left;
}
#rdog_s { width: 120px;
height: 120px;
left: 680px;
}


/* @end */

/* @group content divs */

div#content p{
line-height:1.4;
}
/* Right Content divs */

/* top of the column with bg */

div#rconttop {
width: 660px;
height: 15px;
background: url(img/rconttop_bg2.gif) 0 100%;
padding: 0;
float: right;
}

/* Right Content Column */
div#rcontent{
float: right;
width: 650px;
text-align: left;
font-size: 1em;
line-height: 1.7em; 
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
background: url(img/rcontbg.gif) 0 0;
}

/* everything below the top strip */

div#rcontmid {
width: 660px; 
margin: 0 auto;
float: right;
}

/* content including rotating images */

div#rcontcontainer, #rcontcontainer_s {
width: 470px; 
margin: 0 auto 0 30px;
text-align: left;
}

#rcontcontainer_s {
width: 600px;
margin-left: 30px;
}

.floatimageright {
float: right;
margin-left: 30px;
margin-right: 5px;
}

div#midtext {
text-align: left;
line-height: 1.4em;
font-size: 1.1em;
margin-bottom: 20px;
}

div#fadeshow {
width: 446px;
height: 149px;
background: url(img/fadeshow_clear_bg.gif) no-repeat 0;
padding-left: 31px;
margin-top: 10px;
margin-bottom: 10px;
}

div#fadeshow_pic {
float: left;
width: 128px;
height:  149px;
margin: 0 auto;

}

/* bottom piece */

div#rcontbot {
width: 660px;
float: left; 
margin: 0 auto;
height: 31px;

}

/* @end */

/* bottom promos */

/* @group Promos */

div.bottompromos {
width: 610px;
margin: 10px auto 0 30px;
}

.promos{
margin: 0; 
padding: 0; 
top: 0;
display: block;
width: 610px;
position: relative;
list-style-type: none;
}

/* These set up the underlying button areas */

.promopic {
width: 200px; 
margin: 0 auto;
float: left;

}

.promotext, .abouttext {
width: 180px; 
float: left;
line-height: 1.25em; 
color: #223a17; 
list-style-type: none;
font-size: .9em;
text-align: justify;
margin-right: 15px;
margin-left: 5px;
margin-top: 5px;
}

.abouttext {
line-height: 1.25em; 
color: #006210; 
font-size: 1em;
text-align: center;
font-weight: bold;
}

/* @end */



/* @group testimonials */

div.testimonialpics {
width: 610px;
margin: 10px auto 0 30px;
}

.testipromos{
margin: 0; 
top: 0;
display: block;
width: 610px;
position: relative;
list-style-type: none;
padding: 30px 0 0;
}

/* These set up the underlying button areas */

.testipic {
width: 250px; 
margin: 0 auto;
float: left;
padding-left: 40px;
text-align: right;
padding-right: 10px;
}

.testipiclabel {
width: 175px; 
float: left;
line-height: 1.25em; 
color: #814100; 
list-style-type: none;
font-size: .9em;
text-align: center;
margin-top: 5px;
margin-left: 80px;
margin-right: 50px;
padding-bottom: 50px;
}


/* @end */

/* float image in text */
.contentpic {
float: right;
margin-left: 20px;
margin-right: 10px;
margin-top: 0px

}

div#lcontent, #lcontent_s{
width: 140px;
float: left;
margin: 150px auto 0;
padding-left: 0;
}

#lcontent_s{
margin: 30px auto 0;
}


/* @group lnav */

div#lnavtop {
width: 140px;
height: 9px;
float: left;
margin: 0 auto;
background: url(img/lnav_bg_top.gif) no-repeat 0 100%;
}

div#lnavmid {
width: 140px;
float: left;
margin: 0 auto;
background: url(img/lnav_bg_mid.gif) repeat-y;
}


.lnav {
padding: 0px;

text-align: left;
font-size: .7em;
line-height: 1.4em;
list-style-type: none;
margin-left: 0;
}

/* These set up the underlying button areas */

.lnavitem {
padding-left: 10px;
margin-left: 0;
font-size: 1.1em;
line-height: 1.5em;
font-weight: bold;
list-style-type: disc;
list-style-position: inside;
}

div#lnavbot {
width: 140px;
height: 9px;
float: left;
margin: 0 auto;
background: url(img/lnav_bg_bot.gif) no-repeat;
}

/* @end */

div.centerbox {
margin: 0 auto;
text-align: center;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}

div.emailcontact, div.contactdownloads{
float: left;
width: 250px; 
padding: .4em;
margin-left: 27px;
text-align: center;
font-size: .85em;
line-height: 1.3em;
color: black;
background: #DEDEDE;
}

div.contactdownloads{
line-height: 2.3em;
}

/* @group bottom dogs */

div#botdogsdiv {
width: 800px;
height: 250px;
position: relative;
bottom: 80px;
margin-top: 50px;
}

#botdogs li {
margin: 0; 
padding: 0; 
list-style: none;
display: block;
position: absolute;
}

/* These set up the underlying button areas */

#botldog {
width: 170px;
height: 232px;
z-index: 2;
left: 0px;
top: -10px;
}
#botldog2{
height: 142px;
z-index: 1;
width: 143px;
left: 180px;
top: 80px;
}
#botldog3{ 
width: 98px;
height: 188px;
z-index: 0;
left: 315px;
top: 40px;
}
#botrdog { 
width: 278px;
height: 297px;
left: 580px;
top: -60px;
}



/* @end */

/* clears space at bottom */
div.clearonebot {
clear:  both;
background: url(img/rcontbotbg.gif) no-repeat 148px 0;
height: 60px;
width: 800px;
position: relative;
text-align: left;
}

div#botnav{
width: 630px;
font-size: .8em;
padding-top: 240px;
text-align: center;
float: right;
}


div#footer{
color: #5e734a;
width: 500px;
font-style: italic;
font-size: .75em;
clear: both;
padding: 5px 10px 5px 235px;
}


/* Styles */


.bold, .boldhead {
font-size: 1.0em; 
color: black; 
font-weight: bold 
}

.boldhead {
font-size: 1.25em; 
}

.boldclose {
font-size: 1.0em;
line-height: 1em; 
color: black; 
font-weight: bold 
}

.boldsubhead {
font-size: 1.1em;
color: gray; 
font-weight: bold;
font-variant: small-caps;
}

.p center{
text-align: center;
}

.orange {color: orange }

a:link {color: #1c4971; text-decoration: underline; }
a:visited {color: #852590; text-decoration: underline; }
a:hover {color: #3EB6CC; text-decoration: underline; }
a:active {color: #FFBA00; }

a.greenlink:link {color: #333300; text-decoration: underline; }
a.greenlink:visited {color: #333300; text-decoration: underline; }
a.greenlink:hover {color: #3EB6CC; text-decoration: underline; }
a.greenlink:active {color: #FFBA00; }

a.nav:link {color: #FFFFFF; text-decoration: underline; }
a.nav:visited {color: #E2EDE2; text-decoration: underline; }
a.nav:hover {color: #FF9900; text-decoration: underline; }
a.nav:active {color: yellow; }

a.navsel:link {color: #FF9900; text-decoration: underline; }
a.navsel:visited {color: #FF9900; text-decoration: underline; }
a.navsel:hover {color: #8FE925; text-decoration: underline; }
a.navsel:active {color: #F8C410; }

a.botnav:link {color: #000000; text-decoration: underline; }
a.botnav:visited {color: #852590; text-decoration: underline; }
a.botnav:hover {color: #3EB6CC; text-decoration: underline; }
a.botnav:active {color: #3EB6CC; }

a.header:link {color: #FFFFFF; text-decoration: underline; }
a.header:visited {color: #FFFFFF; text-decoration: underline; }
a.header:hover {color: #FF9900; text-decoration: underline; }
a.header:active {color: #009999; }

a.headerdark:link {color: #000000; text-decoration: underline; }
a.headerdark:visited {color: #000000; text-decoration: underline; }
a.headerdark:hover {color: #FF9900; text-decoration: underline; }
a.headerdark:active {color: #009999; }

.mediumbold {
font-size: .75em; 
color: black; 
font-weight: bold }

.medium {
font-size: .75em; 
color: black; 
}

.contenthead {
color: #303c27; 
font-weight: bold;
font-size: 1.5em;
}

.contentsubhead {
font-size: 1.1em;
color: gray; 
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}

.conbold {
color: #333300;
font-weight: bold;
}

.italic {
font-style: italic;
}

.smallbold {
font-size: 1em; 
color: black; 
font-weight: bold }