/* colors
red: 662222, 994d4b, aa2c28
green: 
00a277
224422
669977 
88bb99
CCDDCC 
gold: eebb00 , fbae18
orange: ee7744
Blue on logo: 2b3188
*/




/* opacity: .7; -moz-opacity: .7; */


/* ::::::::::::::::::::::: Site-wide ::::::::::::::::::::::: */

 * { box-sizing: border-box; }


.blue {#224488 }
.blue-lt {#6a76b6 }
.orange {#ee7744}

body {
/*background-color:#c5c071; */
background-color:#224488;
margin:0px;
text-align:center;
font: normal 16px helvetica, arial, sans-serif;
}

h1 {margin:0;padding:0;}
h2 {margin:0;padding:0; 
font: 200 28px  helvetica, arial, sans-serif; letter-spacing:0; padding-bottom:0; margin-bottom:0
}

h3 {font: 400 18px helvetica, arial, sans-serif; letter-spacing:0em;
/*color: #005500; */
color: #a24; 
padding-top:0; margin-top:8px}

h4 {
font-size: 22px;
margin:0;padding:0; 
color: #ee7744;
}

ul li {list-style-type: square; margin-left: 0;}
ul.bulleted {list-style-image: url('images/square_blue.png');}

.small {
font-size:8px;
font-family: arial, sans-serif;
}

.highlight { background-color: #fe9; }

/* .transparent { opacity: 0.7; } */



/* 2015-12 colors */

.blue {color:#224488}
.blue-lt {color:#6677bb}
.red {color: #a24 }
.yellow  {color:#eebb00}
.green {color:#008877}
.orange {color:#ee7744}
.black {color: #000 } 
.bg-yellow  {background-color:#eebb00}


.highlightedtext{
font-size:20px;
color:#662222;
}

/* Original colors 
.green {color: #119966 }
.red {color: #922 }
.red2 {color:#cc0000}
.orange {color:#ee7744}
.yellow  {color:#c5c071}
.green {color:#669977}
.blue {color:#36479d}
*/

/* ::::::::::::::::::::::: hide ::::::::::::::::::::::: */

.hide-screen {display:none }
.hide-pad {display: inline }
.hide-phone {display: inline }

/* ::::::::::::::::::::::: container ::::::::::::::::::::::: */

#container {
position: relative; top:0px; left: 0px;
width:100%; height:auto;
padding:0; margin-left:0;
	border:none 0px #ffffff;
	font-size:11px;
	text-align:left;
	overflow:visible;
}


/* ::::::::::::::::::::::: Above Banner ::::::::::::::::::::::: */

/* Logo  */

.logo {
float:left;
margin:0px; 
padding:10px 10px; 
width:50%; 
background-color: #248;
z-index: 100;
}

.logo img {
float:left;
position:relative;top:0px;left:0px;
margin:0 0px 60px 0px;
height:70px;width:70px;
border:solid 4px #fff;
margin: 10px; 
}

.name-VTH {
position:relative;top:10px;left:0px;
color:#224488;
font:bold 44px helvetica, arial;
letter-spacing: 0em;
margin-top:20px;
}

.tagline-VTH {
position:relative;top:-2px;left:5px;
font:400 18px helvetica, arial; 
letter-spacing: .05em;
color:#aa2244;
}


#remoteAssistance { z-index:100; 
/*position:absolute;top:20px;right:80px; */
position:relative; top:45px;
float:left;
width:auto;
margin-left:50px;
z-index:150;
}


/* SPECIAL */
.special { 
position: fixed; top: 0px; right: 40px;

width: 200px; 
padding: 20px 12px;
float: left;
z-index: 180;

	border: solid 6px #eebb00;
	border-radius: 50px;
	text-align: center;;
	font-size: 16px;
	color: #224488;
	background-color: white;
	
}

.special h2 { font-size: 22px }


#slider {
position: absolute; left: -560px; top: -10px; 
width: 500px;
background-color: #fff;
padding: 30px;
border: solid 6px #eebb00;
	border-radius: 50px;
	box-shadow: 8px 8px 5px #555;
z-index: 140;
}

#slider h2 { font-size: 40px }

#slider .image2 {position: absolute; right:180px; ; }
#slider .image3 {position: absolute; right:10px; bottom: 15px; }




/* ::::::::::::::: BANNER ::::::::::::: */

#banner {
position: relative;top:0px;
clear:both;
width:100%; height:100px;
margin:0;
padding:0px 0px 20px 0px;

/* background:  url('images/banner_VTH3.gif') no-repeat #666;*/
background-color:#fff;
vertical-align:middle;text-align:left;
overflow:hidden;
z-index:100;
}


/* Contact info */

#calljames  {
position:relative; top:5px; left: 15%;
float:left;
height:50px; 
min-width:20%;
padding:10px 10px 20px 20px;
margin:0; margin-bottom:0px;
	background-color: transparent;
	color:#248;
	border-style:none;
	border-width:1px 1px 0 1px;
	border-color:#465;
	border-top-right-radius: 30px;

	font: 800 26px helvetica, 'century gothic', verdana;
	letter-spacing:0em;
	text-align:left;
	
z-index:90;
}

.phone-top, .phone-top a { font-size:30px; font-weight:bold; color:#248; margin: 0 }
.callbetween {font-size:14px;font-weight:normal; color: #555; letter-spacing: 0px; line-height: 1.8;}




div.locations {
float:left;
margin-left: 30px;
margin-top:35px;
}

div.locations H2 {
font-size:18px;
letter-spacing:1px;
font-weight:600;
color:#777;
margin-bottom:0;padding-bottom:0;
line-height:1.2;
}

.locations b {
font-size:16px; text-transform:uppercase;
letter-spacing:1px;
font-weight:800;
/* : #aa2244; */
color: #ee7744;
padding-left:0px;
margin-top:0;padding-top:0;
}

.text-remote {
font-size:14px; text-transform:none;
letter-spacing:.15em;
font-weight:100; font-style:italic;
color:#333;
padding-left:0px;
}





/* ::::::::::::::: Content area   :::::::::::: */

#content  {
position:relative;left:0; top:0;
width:100%; height:auto; min-height:600px;
padding:0px;
	/* background-color:#669966; */
	
	background-color:#fff;
	border:none 3px #000;
	text-align:center; vertical-align:top;
	z-index:50;
	overflow: hidden;
}

#content.hp { min-height:700px;}

#container-pins {
position: relative; top:0px;
display:block;
width:100%; 
height:auto;
margin-left:0; padding-bottom: 0px;
	text-align:center;
	border:none 1px #f00;
	
	overflow:visible;
	*/
}



.graphic-bottom {
position:absolute; bottom:-4px; left:0;
width:100%;
-moz-opacity:  0.8;
opacity: 0.8;
}




/* ::::::::::::::: Block setups  :::::::::::: */

.block2 {
position: relative; top:0;
float:left; text-align:left;
width:45%; min-height: 200px; height:auto; 
margin-top: 10px;
padding: 5px 2% 1% 2%; margin-left: 2%;
	font-size:16px; color:#666;line-height:1.3;
background-color: #ffffff;
opacity: 0.9;
filter: alpha(opacity=80);
border-radius: 20px;
	-webkit-border-radius: 20px;
z-index: 160;
border:solid 4px #2b3188;
}


.block3 {
position: relative; top:0;
float:left; text-align:left;
width:31%; min-height: 200px; height:auto; 
margin-top: 10px;
padding: 5px 2% 1% 2%; margin-left: 2%;
	font-size:16px; color:#666;line-height:1.3;
background-color: #ffffff;
opacity: 0.9;
filter: alpha(opacity=80);
border-radius: 20px;
	-webkit-border-radius: 20px;
z-index: 160;
border:solid 2px #bbccdd;
}

 .block3 h2  {
color: #2244aa;
font-size:20px; font-weight: 600;
text-transform:uppercase;
letter-spacing: .05em;
line-height:1.2;
padding:0; margin:0;
}

.block3 h3  {
color:#000;
font-weight: 600;
padding:0; margin:0;
}

 .block3 p {
line-height: 1.3; }


.block3 iframe {background-color: #fff}

.block3.contactus {width: 25%;}
.block3.emailus {width: 44%;}

/* ::::::::::::::: 4-Block setup  :::::::::::: */
.block4 { 
float: left;
width: 21%;  min-height:300px; height: auto;
margin-left: 1%;
	text-align: left;
	padding: 20px;
}




/* ::::::::::::::: Block-Special    :::::::::::: */
#block-special {
position: relative; top: 10px; left: 0px;
padding: 15px;
margin-top: 0px;
width: 90%; height: 130px;
	text-align: left;
	background-color: #fff;
	font-size: 20px;
	color: #88aa88;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	line-height: 1.4;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#block-special img { margin-right: 10px; }

/* ::::::::::::::: 1-block setup    :::::::::::: */

#block-full { 
position:relative; top:0;

width: 100%; height:auto; min-height:450px;
margin-top:25px;margin-left:5%; 
background-color:transparent;text-align:left;
padding:  20px;
font: normal 16px helvetica, arial, sans-serif; color: #555;
z-index:100;
}

/* ::::::::::::::: 2-block setup    :::::::::::: */
/* ::: Main block ::: */

#block-main { 
position:relative; top:0;
float:left; 
width: 50%; height:auto; min-height:450px;
margin-top:25px;margin-left:5%; 
background-color:transparent;text-align:left;
padding: 0 20px;
font: normal 16px helvetica, arial, sans-serif; color: #888;
z-index:100;
}

#block-main h1 { font-size:16px; 
/* color:#ee7744; */
color:#ee7744; 
text-transform:uppercase; letter-spacing:.2em;}

#block-main h2 { font-size:30px; color:#248; text-transform:none; letter-spacing:0em;}

#block-main p { text-align:left; font-weight: normal; font-size: 16px; line-height:1.8}
#block-main p a { font-weight: normal; font-size: 12px; line-height:1.2}

#block-main ul li { text-align:left; font-weight:normal; font-size: 18px; line-height:1.8; margin-left:0; color:#555;}

#block-main h3 { /*color:#994d4b; */ color:#67b;
font:400 26px helvetica, arial, sans-serif;}


/* ::: Sidebar block ::: */

#block-sidebar { 
position:relative; top:0;
float:left; 
vertical-align:top;
width: 30%; min-height:400px;
/* background-color:#c5c071; */
background-color:#67b;
	margin-top:15px; 
	margin-left: 10%;
	padding:30px; margin-bottom: 50px;
	border:none 6px #696;
	border-radius: 25px; -webkit-border-radius: 25px;
	z-index:100;
}

#block-sidebar ul li { 
text-align:left;
color:#fff;
font: normal 16px helvetica, arial, sans-serif;
line-height:1.6;
margin-left:0; padding-left:0;
}

#block-sidebar ul  { 
margin-left:0; padding-left:0;
}

#block-sidebar h1 { color:#ee7744; font-size: 18px }
#block-sidebar h2 { color:#000; font:400 20px helvetica, arial, sans-serif; margin-top:10px; margin-bottom:0; padding-bottom:0px;}
#block-sidebar p { color:#fff; font-size: 15px; text-align:left;  margin-top:8px; padding-top:0px; padding-bottom:15px;}



/* ::: Residential / business content / Legal  ::: */

#content.residential, #content.business,  #content.legal {
width:100%; height:auto;
background-color:#fff;
border:none 6px #f00;
}

#block-sidebar.residential {
background-color:#67b; 
margin-top:10px; 
padding-top:20px;
border-color:#67b;
}

#block-sidebar.residential h2 { 
margin-top:20px;
color:#fff;
font: normal 22px;
letter-spacing:0; 
}

#block-main.residential p { 
font-size: 20px 
}


#block-main.residential p.services { color:#67b } 

/* :::::::::::::::::::::  Help page ::::::::::::::::::::: */


#content.help {width:100%; height:750px;; background-color:#fff }
#block-main.help {width: 96%; padding: 2%; padding-top: 30px}


.help-item {padding:5px;border:none; width: 40%;}
.help-item li { list-style-type: square; line-height:1.5;color:#444;font-size:18px; margin-bottom:5px;}

a:link.help-q, 
a:visited.help-q, 
a:active.help-q,

a:link.help-q1, a:visited.help-q1, a:active.help-q1, 
a:link.help-q2, a:visited.help-q2, a:active.help-q2, 
a:link.help-q3, a:visited.help-q3, a:active.help-q3, news
a:link.help-q4, a:visited.help-q4, a:active.help-q4 

/* {font:normal 20px helvetica, verdana; color:#dd7700} */
{font:normal 20px helvetica, verdana; color:#aa2244}





a:hover.help-q,
a:hover.help-q1,
a:hover.help-q2,
a:hover.help-q3,
a:hover.help-q4 {color:#67b}

#content.help h2.q {color:#a24;line-height:1.2;margin:20px 0 20px 0; }
#content.help h2 {margin-top:12px}


/* This is the hidden panel controlled by jQuery.  */

.help-a-full1, .help-a-full2, .help-a-full3, .help-a-full4 {
display:none;
position:absolute; top:0; left:45%;
height:auto;width:50%;
background-color:#fff;
padding:20px;
font-size:16px;
z-index:100;
border: solid 8px #67b;
border-radius: 25px; -webkit-border-radius: 25px;
}


.help-tip {color:#eebb00; font-size:20px; display:block; float: left}



/* ::::::::::::::: Contact us  content :::::::::::: */

#content.contactus {
position:relative; top:0;
width:100%; height: auto;
background-color:#fff;
border:none 6px #f00;
}

#content.contactus h2 {
margin-top:20px; margin-bottom:15px;
	font: 400 30px helvetica, arial, sans-serif;
	letter-spacing:.05em;
	text-transform:none;
	color: #a24;
	text-align:center;
}




.phoneno {font-size:30px; color:#000}

.contactus-extra {display:none }

#block-sidebar.contactus img { text-align: center }

form {font-size: 12px; color: #555; text-align: left }



/* :::::::::     Web design page ::::::::::::::: */

#block-sidebar.webdesign { background-color:#67b }
#block-main.webdesign p { font-size: 20px; line-height: 1.5 }

#block-main.webdesign  { 
position:relative;top:5px; 
font-size: 11px; color: #888; }

#block-main.webdesign a {font-size: 12px; line-height:1.1}

#block-sidebar.webdesign h1 {letter-spacing:.03em}




/* :::::::::     Newsletter page ::::::::::::::: */
#content.newsletterpage {
background-color: #fff;
height:900px; }

#sidebar.newsletter div.menu-newletter {position: relative }


#container.newsletter body {
background-color: #fff;
margin:20px 8%;
font: normal 16px helvetica, arial, sans-serif;
line-height: 1.4; color: #888;
text-align:center;
}


#container.newsletter h1 {
font-size: 30px; 
color: #196;
margin-top: 0; padding-top:0;margin-bottom: 0;
}

#container.newsletter h2 {
font-size: 18px; 
color: #444;
margin-bottom: 0; padding-bottom:0;
}

#container.newsletter h3 {
font-size: 18px; 
font-weight: bold;
color: #333;
}


li {margin-bottom: 15px; list-style-type: square; color: #555}

#container.newsletterpage #block-sidebar 
{float: left; width: 38%; padding: 0; margin: 1%; }
#container.newsletterpage #block-main 
{float: left; width: 38% ; padding: 0; margin: 1%; }

/* :::::::::  The  Newsletter  ::::::::::::::: */

#container.newsletter {
width: 90%; 
margin: 20px 2%;
background-color: #fff;
font: normal 16px helvetica, arial, sans-serif;
line-height: 1.4; color: #666;
text-align:left;

}

#content.newsletter h1 {
font-size: 36px; 
color: #196;
margin-top: 0; padding-top:0;margin-bottom: 0;
}

#content.newsletter h2 {
font-size: 18px; 
color: #000;
margin-bottom: 0; padding-bottom:0;
text-transform:uppercase;letter-spacing: .1em
}

#content.newsletter h3 {
font-size: 22px; 
font-weight: 400;
/* color: #36479d; */
 color: #248;
Margin-bottom: 0;
}


#content.newsletter li {margin-bottom: 15px; list-style-type: square; color: #555}

#container.newsletter  #section2 {width: 80%; font-size: 20px; color: #248;  }


/* ::::::::::::::: Legal notices content :::::::::::: */

#block-main.legal {
width:80%;
background-color:transparent;
padding: 50px 10%;
margin:0;
color: #888;
text-align:left;
}

#block-main.legal  p {
font-size: 16px;
line-height:2;
}


/* ::::::::::::::: Remote login page :::::::::::: */
 
#block-main.remote { width: 35%; max-width: 500px; margin-right:40px; line-height: 1.6 }
#block-sidebar.remote { width: 45%; max-width: 300px; height: 200px; border:none }
#block-sidebar.remote table td {height: 50px; }
#block-sidebar.remote table th {font: normal 16px arial, sans-serif; color: #ddd }


#content.remote {
background-color: #fff; 
background-image: url('image/bg_james.png');
background-repeat: no-repeat;
background-position: bottom right;
}




/* :::::::::::::::: Forms ::::::::::::::  */

input[type=text] {
    width: 95%;
    padding: 8px 20px;
    margin: 2px 0;
    border: solid 1px #555; 
    border-radius: 4px; 
    
}



textarea {
    width: 95%;
    height: 80px;
    padding: 5px 5px;
    box-sizing: border-box;
    border: solid 1px #555;
    border-radius: 4px;
 background-color: #ffeebb;
    resize: none;
}


input[type=button], input[type=submit], input[type=reset] {
    background-color: #ffee99;
    border: solid 1px #333;
    color: #333; 
    font-weight: bold; font-size: 16px;
    padding: 8px 32px;
    text-decoration: none;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 20px;
}


#contactform {
background-color: #fff;
height: auto; 
overflow: visible;
font: normal 11px helvetica, arial; 
line-height: 1;

}


.label, label {font: normal 11px helvetica, arial;
margin: 15px 0 5px 0;
}

/* :::::::::::::::: Footers ::::::::::::::  */

#footers {
position:relative;top:10px; 
display: block; clear:both;
height:auto; width: 100%;
	line-height: 1.8;
	text-align: center;
	border: none;
	z-index:100;
}

#footer1, footer2, footer3, #footer-webdesign {
position:relative; top: 0 ; 
display:block;
height: auto;
margin-bottom:15px;
	text-align:center;
}

#footer1 img {
height:28px; width: auto; 
border: solid 4px  #fff; border-radius: 5px; margin-right:3px
} 


/* Name and links: make name a bit larger */

#footer3 { 
 font-size:14px;
letter-spacing:.2em; color:#ddd;
line-height:1.3;
}

#footer3.name {text-transform:uppercase; letter-spacing:.2em}
#footer3 a { font-size:12px }
#footer3 b { 
text-transform:uppercase; 
}

#footer-webdesign { 
position:relative;top:10px; 
font-size: 12px; 
color: #ddf;
 }

#footer-webdesign a {letter-spacing:.2em}



#footer2 img {
width:30px; height:30px;
margin:0; 
border: solid 1px  #fff; border-radius: 5px; margin-right:3px;
}


/* BOXES */

.box-border {
border: solid 12px #000;
}


/* LINKS */
a {text-decoration: none }

A:link { text-decoration: none; color:#248}
A:active { text-decoration: none; color:#248  }
A:visited { text-decoration: none; color:#248  } 
A:hover{ text-decoration: none; color:#679 }

A.r:link { text-decoration: none; color:#ffffff}
A.r:active { text-decoration: none; color:#ffffff  }
A.r:visited { text-decoration: none; color:#ffffff  } 
A.r:hover{ text-decoration: none; color:#ffffff }




/* Buttons */

A.button:link,
A.button:active,
A.button:visited,
input.button
{ padding: 12px;
font:bold 14px arial, sans-serif;
text-decoration: none; 
color:#000; 

border:solid 2px #ffffff;
background-color:#eebb00;
-moz-border-radius: 22px;
	border-radius: 22px;
	min-width:150px;
} 


A.button:hover,input.button:hover { 
/* background-color:#dddd88; color:#333; */
background-color:#ffee99; color:#333;
}

.button { background-color:#eebb00;-moz-border-radius: 22px;
	border-radius: 22px;
	min-width:150px; }


/* ::::::::::::::: misc :::::::::::: */



.tagline{
font:200 20px helvetica, arial,sans-serif;
color:#cc0000; 
}


.learnmore{
font:200 14px verdana,sans-serif;
color:#662222; 
}


.tip { 
border:solid 4px #ee7744;
background-color:#ee7744;
-moz-border-radius: 22px;
	border-radius: 22px;
padding: 8px 5px;
	color: #fff; 
	font-weight: bold; 
	text-transform: uppercase;
float: left;
display: block;
margin-right: 15px;
	}

.numbering{
font:200 20px georgia,serif;
color:#224422; 
text-align:right;
padding:1px 4px;
text-align:center;
background:#ffee99;
border: 1px solid #662222;
}


.box-login {
/*position:absolute;
left:600px;
top:0px;*/
width:200px;
height:40px;
display:inline;
z-index:100;
text-align:right;
vertical-align:middle;
border-width:1px; 
border-color:#fff;
padding:3px 5px 3px 5px;
}




input {
border-style:solid;
border-width:1px; 
border-color:#fff;
padding:2px;
background-color:#ffeebb;
font-size:12px;

}