body{ margin: 0;padding: 0;border: 0;height: 100%;max-height: 100%; color: #333; }

#framecontent{;background:#ffffff url(background.jpg) left bottom repeat-x;
width: 100%;height: 130px; }

#maincontent{ background: #FFF;color: #333; }

#header table  { width:98%;color:#80000;font-size:125%; }
#header table > tbody > tr:first-child > td:first-child {font-size:200%;width:50px;margin-top:-2px;}
#header table > tbody > tr:first-child > td:nth-child(2) {border-collapse: collapse;border-bottom:2px solid #800000;margin-left:-2px;padding-top:8px;padding-left: 4px;} 
#header table > tbody > tr:first-child > td:nth-child(2) span {padding-top:3px;}
.circle-text { width: 70px;height:50px; }
.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 145%;
    background: #fff; 
    border:2px solid #800000;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle-text div {
    float:left;
    width: 32px;
    padding-top: 10%;
    text-align: center;
    padding-left: 20px;
}
/* The animation code */
@keyframes phone-header {
    0%   {color: gray;  top:-500px;}
    100% {color: #800000; top:0px;}
}
.phone-style {
   position:relative;margin-left:60%;
   animation-name: phone-header;
   animation-duration: 4s; }
   
#wrapper {background: #fff url(contentBackground.jpg) left bottom no-repeat; 
margin:0px 2% 25px 1%; padding:0px 10px 0px 10px;font-size:90%;color: #333;
/*  Prevents Flickering  */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;}
.contentBox {border:1px solid #aaa;
-webkit-box-shadow: 10px 10px 5px 0px rgba(170,170,170,1);
-moz-box-shadow: 10px 10px 5px 0px rgba(170,170,170,1);
box-shadow: 10px 10px 5px 0px rgba(170,170,170,1);}
.contentBox h2 { padding-left:10px;border:1px solid #aaa;background-color:#800000;color:#fff;}
.contentPadding { padding:10px; }
h1 {font-size:170%;color:#808080;}
h2 {font-size:120%; margin-top:-1%;color:#ccc;}

#left_column { float:right; clear:both; padding-left:1%;margin-top:33px;width:24%;font-size:80%; }
#content {float:left;width:70%; color:#333;margin-right:15px;  padding:0 10px 0 8px;}
#footer {border-top:1px solid #ccc;clear:both; margin:2px auto; text-align:center;}

a {text-decoration:none;font-size:100%;color:#800000;}
a:hover {text-decoration:underline;background-color:#800000;color:#fff;}
.anchor {text-decoration:none; color:#fff;}
.floatRight {float:right;margin-left:3px;padding-left:6px;margin-right:3px;}
.floatLeft {float:left;margin-right:3px;padding-right:6px;margin-left:3px;}
p{ padding:10px;text-align:left;color: #333; }
div {color: #333; }
ul {color: #333; }
div.testimonial {   color: #000;
   background: url(paper.gif);
   font-style: italic; font-family:georgia, verdana, serif;
   margin-left: 5%; margin-right: 5%; padding: 10pt;
   border: 3pt ridge #960000;
}



.dataTable table {width:98%;font-size:small;padding:1px;border:1px #eee solid;}
.dataTable td {border:1px #eee groove;}
.dataTable tr {border:1px #eee groove;}
.dataTable ul {padding-left:-1px;}
.dataTable li {padding:1px;margin:0px;text-align:left;font-size:14px; }

#mobile { display:none; }
/* Begin CSS Drop Down Menu */
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/pro_drop3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

.menu2 {padding:0 0 0 0; margin:0; list-style:none; height:28px; background:#800000; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.menu2 li.top {display:block; float:left;}
.menu2 li a.top_link {display:block; float:left; height:28px; line-height:27px; color:#EEEEEE; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:28px;background:url(blank.gif) right top;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#FFE8E8; background: url(blank_over.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible; position:relative; z-index:200;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:31px; background: #fff; padding:3px; border:1px solid #800000; white-space:nowrap; width:200px; height:auto; z-index:300;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:200px; font-weight:normal;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:200px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(arrow.gif) 190px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#800000; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#800000 url(arrow_over.gif) 190px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#800000 url(arrow_over.gif) 190px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:200px; top:-4px; background: #fff; padding:3px; border:1px solid #800000; white-space:nowrap; width:200px; z-index:400; height:auto;}

body.index .menu2 a#index,
body.services .menu2 a#services,
body.products .menu2 a#products,
body.testimonials .menu2 a#testimonials {font-size:13px; color:#f1f1f1; }

body.products .menu2 a#products {font-size:14px; color:#fff; }


.hoverBox {display:inline; color:#800000;font-size:small;}

.hoverBox a { text-decoration:none;}
.hoverBox a span { display: none; }
.hoverBox a:hover { position: relative; }
.hoverBox a:hover span {display: block;
   position : absolute; right : 2em;text-align:center;
   top : 0.9em;  cursor: pointer; /* for IE */
   padding: 5px; margin: 5px auto; z-index: 100;
   color: #333; background: #FFF; width:380px; 
   border:2px #800000 groove;
   font: 110% Verdana, sans-serif; }
div.row { clear: both; margin-top:10px; }

div.row span.label {
  float: left;  font-size:120%; border-bottom:1px solid #999;
  font-weight:bold;
  text-align: right;
  }
form { font-family:Georgia, san-serif;}
.headlabel {
  font-size:120%; border-bottom:1px solid #999;
  font-weight:bold;
  text-align: right;
  }
div.row span.formw {
  float: right;
  width: 80%;
  text-align: left;
  } 
form { vertical-align: middle; padding-left:3px;}
form fieldset { border: none; }
form fieldset p { margin-bottom: 3px; }
form label { padding-right: 3px; }
form input { text-align: center; }
.inputText3 { width: 20px; }
.inputText4 { width: 26px; }
form legend { color: #BFBFBF; }
form fieldset>legend { margin-left: 0; }
.contact-form {height:450px;} 

.errorMessage { color:red; font-size:90%; line-height:8px;}
.contact-label {color:#800000;font-weight:bold;font-size:110%;}
.contact-field {display:block;margin-left:10px;font-size:120%;}
.contact-email {margin:5px auto;padding:5px;border: 1px #fff solid;}
#left_column hr {color:#800000;}
@media (max-width:800px){
   #framecontent { height:101px;top:auto;position:relative;}
   #wrapper { min-width:100px;background:#fff; }
   .phone-style { position:relative;margin-left:40%;} 
   #left_column  { float:none;display:block;width:100%;min-width:0;font-size:100%; }
   #content { float:none;width:100%;font-size:100%;border:none; }

	nav { display:none }

	#mobile {
		background-color:#800000;
        color:white;
		box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
		display:block;
	}
  	#mobile a {
        color:white;
        }  

	/*
	Top black bar that holds the toggle button
	*/

	#mobile #toggle-bar {
		line-height:50px;
		height:50px;
	}

	/*
	Toggle button #1 ("Menu")
	*/

	#mobile strong a {
		margin-left:30px;
		border:1px solid #444;
		padding:10px;
	}

	/*
	Toggle button #2 ("Navicon")
	*/

	#mobile .navicon {
		float: right;
		height: 6px;
		width: 34px;
		margin: 16px;
		border-top: 18px double #FFF;
		border-bottom: 6px solid #FFF;
		font-size:0;
	}

	/*
	The dropdown menu
	*/

	#mobile ul li {
		clear:both;
		list-style:none;
	}

	#mobile ul li a {
		display:block;
		background-color:#800000;
		text-transform:uppercase;
		letter-spacing:.2em;
		margin:2px 0;
		padding:6px 0 6px 8px;
	}

	#mobile ul ul {
		font-size:small;
	}

	#mobile ul ul li {
		margin-left:30px;
	}

	#mobile ul ul a {
		background-color:#800000;
		padding-left:8px;
	}

	#mobile ul ul a:before {
		content: "\2192 ";
		padding-right:8px;
	}
}

   .contact-label {display:inline;font-weight:bold;font-size:110%;}
   .contact-label:before {
      content: "\a ";
      white-space: pre;
    }
   .contact-field {display:inline;margin-left:10px;font-size:120%;}
   .contact-email {margin:5px auto;padding:5px;border: 1px #fff solid;}	
   footer { background:#fff; }
}

