/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,strong,em,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
img { margin:0;padding:0; }



body { behavior:url(/css/iehover.htc); }

body {
background-color:#ecdcbb;
background-image: url(/images/header_bg.gif);
background-repeat: repeat-x;
}

p,h1,h2,h3,h4,h5,h6 {
font-family:georgia;
}
p {
margin: 1.5em 3em 1.5em 3.5em;
line-height: 1.75em;
color:#512007;
font-size:14px;
}
h1 {
color:#a00000;
font-size:185%;
font-weight:bold;
}
h1#content {
margin: 0 20px 0 20px;
padding: 20px 0 0 0;
}
h1#product{
margin: 0 0 0 8px;
padding: 7px 0 0 0;
}
h2 {
color:#a00000;
font-size:115%;
font-weight:bold;
}
h2#content {
margin: 20px 20px 0 20px;
}
 h2#product {
margin: 0 0 0 8px;
}
h3#content {
color:#a00000;
font-size:95%;
font-weight:bold;
margin: 20px 20px 0 20px;
}
strong {
font-weight:800;
}
em {
font-style:italic;
}
em#overem {
font-weight:800;
font-style:italic;
}
a {
color:#512007;
}
a:hover {
color:#a00000;
}
a:visited {
color:#5e5e5e;
}

/* ----------------- Header CSS ------------------ */

div#header {
height:105px;
width:960px;
}
img#phonenumber {
margin: 0 0 0 211px;
}
img#carticon {
margin:0 0 34px 225px;
}

/* ----------------- Testimonial CSS ------------------ */

blockquote#testimonial {
width:517px;
margin: 20px 0 0 25px;
border:3px double silver;
background-color:#fafafa;
padding:15px;
font-size:13px;
font-color:color:#512007;
}
p#signature {
float:right;
margin: 0 30px 0 0;
font-weight:bold;
font-style:italic;
font-size:14px;
text-align:right;
}
blockquote#question {
width:485px;
margin: 20px 0 0 25px;
border:3px double silver;
background-color:#fafafa;
padding:0 30px 30px 30px;
font-size:16px;
font-color:color:#512007;
}
span#large_intro {
font-size:16px;
font-weight:bold;

}

/* ----------------- Content Div CSS ------------------ */

div#content{
width:804px;
margin: 2px 0 0 168px;
}
#header, #navbg, #navcontent, ul#nav a {
border: 0;
margin: 0;
}

/* ----------------- Idea Gallery CSS ------------------ */

a#ideagal img {
margin:0 5px 0 5px;
padding:0 0 10px 0;
border:0;
}
a#ideagal_left img {
margin:0 5px 0 16px;
padding:0 0 10px 0;
border:0;
}

/* ----------------- Products CSS ------------------ */

div#prodsamp {
margin: 0 0 0 8px;
}

/* ----------------- Navigation CSS ------------------ */

div#navbg {
width:168px;
height:492px;
background-image: url(/images/nav_bg_mid.gif);
background-repeat: repeat-x;
float:left;
margin: 1px 0;
position:relative;
top:1px;
z-index:5;
}
div#navcontent {
width:168px;
height:492px;
background-image: url(/images/nav_bg_right.gif);
background-repeat: no-repeat;
background-position: right;
text-align:right;
margin:0;
position:relative;
}

ul, li {
padding: 0;
margin: 0;
border:0;
list-style:none;
}
ul#nav li a {
text-align: center;
text-indent: -500px;
width:168px;
height:30px;
display:block;
margin:0;
}
ul#nav li {
	display:block;
	height:30px;
}
ul#nav {
position: relative;
top:20px;
}
ul#nav li a:hover {
background-position: center;
}
ul#nav li a:active, #current, #current:hover, #current:active {
background-position: bottom;
}
ul li {
position: relative;
}
li ul {
display:none;
}



ul#nav li:hover ul {
display:block;
position: absolute;
left: 168px;
top: 0;
/*z-index:2;*/
}

ul#nav li:hover ul {
border: 1px solid;
border-left: 0px;
border-color:#7fa6aa;
}
ul#nav li:hover ul li {
/*width:168px;
height:30px;*/
background:#f7eedb;
}
ul#nav li:hover ul li:hover {
background:#f9f5ed;
}

ul#nav li ul li a {
text-indent: 0px;
text-align:right;
text-decoration:none;
/*font-family:georgia;
font-size:80%;*/
/*position:relative;
top:6px;
right:10px;*/
height:24px;
width:158px;
padding:0;
padding-top:6px;
padding-right:10px;
border:0;
margin:0;
}

ul#nav li ul li a:visited {
color:#74929c;
}
ul#nav li ul li a:link {
color:#4c6770;
}

#a_nav_home {
background-image: url(/images/nav_inactive_home.gif);
background-position: top;
}

#a_nav_special {
background-image: url(/images/nav_inactive_special.gif);
}

#a_nav_easyas {
background-image: url(/images/nav_inactive_easy.gif);
}

#a_nav_products {
background-image: url(/images/nav_inactive_products.gif);
}

#a_nav_video {
background-image: url(/images/nav_inactive_video.gif);
}

#a_nav_idea {
background-image: url(/images/nav_inactive_idea.gif);
}

#a_nav_faq {
background-image: url(/images/nav_inactive_faq.gif);
}

#a_nav_about {
background-image: url(/images/nav_inactive_about.gif);
}

#a_nav_legal {
background-image: url(/images/nav_inactive_legal.gif);
}

#a_nav_sitemap {
background-image: url(/images/nav_inactive_sitemap.gif);
}

#a_nav_links {
background-image: url(/images/nav_inactive_links.gif);
}

#a_nav_testimonials {
background-image: url(/images/nav_inactive_testimonials.gif);
}

#a_nav_contact {
background-image: url(/images/nav_inactive_contact.gif);
}


/* ----------------- Video Demo CSS ------------------ */

#vid_obj_demo {
margin:0 0 0 50px;
z-index: 0;
}

#vid_obj_test {
z-index: 1;
}

/* ----------------- SEO Text (text below the footer on the index page) CSS ------------------ */

div#seotextcontainer1 {
background-image: url(/images/content_text_bg_mid.gif);
background-repeat: repeat-y;
width:600px;
margin: 20px 0 0 168px;
display:block;
}
div#seotextcontainer2 {
background-image: url(/images/content_text_bg_top.gif);
background-repeat:no-repeat;
background-position:top;
width:600px;
display:block;
}
div#seotext {
background-image: url(/images/content_text_bg_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
width:600px;
padding-top: 20px;
padding-bottom: 1px; /* For some very weird reason, if I don't have padding defined, the contents' margin is added to the parent margin. Having a 1px padding fixes that. Firefox 2 */
}

/* ----------------- Content Text (text with white background behind it) CSS ------------------ */

div#contenttextcontainer1 {
background-image: url(/images/content_text_bg_mid.gif);
background-repeat: repeat-y;
width:600px;
margin:0 0 0 12px;
display:block;
}
div#contenttextcontainer2 {
background-image: url(/images/content_text_bg_top.gif);
background-repeat:no-repeat;
background-position:top;
width:600px;
display:block;
}
div#contenttext {
background-image: url(/images/content_text_bg_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
width:600px;
padding-top:1px;
padding-bottom: 1px; /* For some very weird reason, if I don't have padding defined, the contents' margin is added to the parent margin. Having a 1px padding fixes that. Firefox 2 */
}

/* ----------------- Legal CSS ------------------ */

span#legal {
color:#512007;
}

span#legal ul {
font-family:georgia;
font-size:12px;
font-weight:normal;
margin:10px 20px;
list-style:disc outside;
}

span#legal li {
font-family:georgia;
margin:10px 20px;
list-style:disc outside;
line-height:1.5em;
}

/* ----------------- Sitemap CSS ------------------ */

span#sitemap ul {
list-style:disc outside;
color:#512007;
margin:0 40px;
}

span#sitemap li {
font-family:georgia;
font-size:14px;
font-weight:bold;
margin:20px 20px;
list-style:disc outside;
line-height:1.5em;
}

/* ----------------- FAQ CSS ------------------ */

p#question {
font-weight:bold;
font-style:italic;
margin: 1.5em;
}
p#answer {
margin:0 50px;
}
.figure {
width:600px;
text-align:center;
}
.def_figure {
width:250px;
text-align:center;
}
.def_figure .title {
font-size:95%;
font-weight:bold;
font-style: normal;
}

.def_figure .title:after {
content: ": "
}

.def_figure .caption {
font-style: italic;
font-size:90%;
}
.captioned{
border-style: double;
border-width: 3	px;
border-color:silver ;
}

p.caption {
text-align:center;
}

.figure .title {
font-size:95%;
font-weight:bold;
font-style: normal;
}

.figure .title:after {
content: ": "
}

.figure .caption {
font-style: italic;
font-size:90%;
}

/* ----------------- Footer CSS ------------------ */

div#footer {
/*background-image: url(/images/footer_bg.gif);
background-repeat: repeat-x;*/
width:100%;
height:110px;
margin: 30px 0;
padding: 0;
background:#2a4249;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left:none;
border-right:none;
}

div#footercontainer {
margin: 0 10px 0 155px;
width:780px;
height:150px;
background-image: url(/images/footer_bg.gif);
background-repeat:no-repeat;
}

div#footercontent {
padding: 15px 0 0 70px;
}

p#footerlinks {
font-family:georgia;
color:#ffffff;
font-size:12px;
margin:1px;
line-height:1.5em;
}
#footerlinks a:link {
color:#ffffff;
}
#footerlinks a:hover {
color:#FF2424;
}
#footerlinks a:visited {
color:#aaaaaa;
}
#leftbracket {
float:left;
margin: 1px 0;
}
#rightbracket {
float:left;
margin: 1px 0;
}
p#footercopyright {
color:#7fa6aa;
font-size:10px;
margin:1px;
line-height:1.5em;
}

p#footercopyright a{
color:#7fa6aa;
font-size:10px;
margin:1px;
line-height:1.5em;
}

/* ----------------- Index Page Links CSS ------------------ */

#easy_as_learnmore {
background-image: url(/images/easy_as_learnmore.jpg);
background-repeat: no-repeat;
width:600px;
height:251px;
float:left;
position:relative;
margin: 0 0 0 12px;
display:inline;
}

#easy_as_learnmore a {
text-indent: -9999px;
width:169px;
height:22px;
display:block;
position: relative;
left:353px;
top:215px;
}

#testimonials {
width:180px;
height:395px;
float:right;
position:relative;
}

#special_learnmore {
background-image: url(/images/package_learnmore.jpg);
background-repeat: no-repeat;
width:600px;
height:132px;
float:left;
position:relative;
display:inline;
margin:12px 0 0 12px;
}

#special_learnmore a {
text-indent: -9999px;
width:600px;
height:132px;
display:block;
}

#prods_learnmore {
background-image: url(/images/prods_learnmore.gif);
background-repeat: no-repeat;
width:294px;
height:84px;
float:left;
position:relative;
display:inline;
margin:12px 0 0 12px;
}

#prods_learnmore a {
text-indent: -9999px;
width:294px;
height:84px;
display:block;
}

#ideagal_learnmore {
background-image: url(/images/idea_gal_learnmore.gif);
background-repeat: no-repeat;
width:294px;
height:84px;
float:left;
position:relative;
display:inline;
margin:12px 0 0 12px;
}

#ideagal_learnmore a {
text-indent: -9999px;
width:294px;
height:84px;
display:block;
}

#vid_learnmore {
background-image: url(/images/vid_demo_learnmore.gif);
background-repeat: no-repeat;
width:180px;
height:84px;
float: left;
position:relative;
display:inline;
margin:12px 0 0 12px;
}

#vid_learnmore a {
text-indent: -9999px;
width:180px;
height:84px;
display:block;
}

div#push {
height:20px;
}

/*----------------------------- Definition Rollover CSS ------------------------------*/

/* The style works this way because for every div inside of an anchor tag, the display is set to none, but when you :hover, you can only hover over one anchor tag at a time.
*/

a#definition {
position:relative;
color:#0e4666;
text-decoration:none;
}

#rolloverDiv{
background-color:#FFFFFF;
border-color:#000000;
border-width:2px;
padding:20px;
}

a#definition #rolloverDiv{
display:none;
color:#0e4666;
}

a#definition:hover #rolloverDiv{
display:block;
width:250px;
border: 1px solid black;
z-index:100;
position:absolute;
left:20px;
color:#512007;
text-decoration:none;
font-style:normal;
font-weight:normal;
font-size:14px;
}

a#definition:hover{
color:#512007;
text-decoration:none;
}

h1,h2,h3,h4 {
	width:400px;
	clear:none;
	padding:0;
}
/*
button {padding:0;margin:0;border:none;background:none;cursor:pointer;}
* html button {cursor:hand;}
button img {
	display:block;
}*/