/*
========================================

This big idea was created by Gallic and Merwin.
CSS Created By: Dave Merwin - dave at gallicandmerwin dot com

Copyright 2005

Questions? Comments? Contact Dave Merwin at dave at gallicandmerwin dot com.

========================================


  The gold background is: #d9bd7b
  The cream color of the boxes is: #f4f2db
  The yellow highlight is: #f8c300
  The red highlight is: #972335

*/

.red {
  color: #d62408;
}

a.red-link:active,
a.red-link:link,
a.red-link:visited {
	color: #d62408;
	text-decoration: underline;
}

a.red-link:hover {
	color: #000000;
	text-decoration: none;
}

/* General */
body {
background-color:#ffffff;
/* background-image:url(images/bgcolor.gif);*/
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size:.8em;
}

.text-wide .red-link {color:#d62408; font-weight:bold;}


/* ID */

#wrap {
position:relative;
width:850px;
margin:0px auto 0px auto;
text-align:left;
}

#content{

width:787px;

}

#header{
background-image:url(images/vyanet-logo-horizontalNEW.gif);
background-repeat:no-repeat;
height:69px;

}

#h_link {
	height: 69px;
	width: 330px;
	position: relative;
	float: left;
	display: block;
	
}

#header i
{
  display: none;
}

.octagon_logo {
  background-image: url(../images/contactagon_sleek_headerNEW.gif);
  display: block;
  height: 59px;
  margin: 0px auto 0px auto;
  width: 58px;
  overflow: hidden;
}

#login{
margin:50px 0px 0px 0px;
float:right;
}





  /*============UPPER HALF DIVS================*/




#upperhalf {
margin:7px 0px 0px 0px;
height:208px;
clear:left;
}



  #leftmenu {
  float:left;
  margin:0px 5px 0px 0px;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:133px;
  height:208px;
  font-size:11px;
  line-height:25px;
  }

  #centralimage {
  float:left;
  background-image:url(images/more-security-image.jpg);
  margin:0px 5px 0px 0px;
  height:208px;
  width:491px;
  }

  #centralimage-home {
  float:left;
  /*background-image:url(images/main-image-home.jpg);*/
  margin:0px 5px 0px 0px;
  height:208px;
  width:491px;
  }

  #rightimages {
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  height:208px;
  float:left;
  width:152px;
  text-indent: -9px;
  }

    #righttop {
    background-image:url(images/at-home-image.jpg);
    height:107px;}

    #rightbottom {
    background-image:url(images/at-work-image.jpg);
    margin:5px 0px 0px 0px;
    height:95px;
    }

  /*.special-space a {line-height:80%; font-size:11px; text-indent:-9px;}*/
.special-space a {line-height: 18px; font-size: 11px; margin: 0px; padding: 0px; text-indent: 2px;}

  /*============END UPPER HALF=================*/




table.affiliates td {
	margin: 0px 0px 0px 0px;
	padding: 15px 5px 0px 0px;
}





#midbar {
margin:7px 0px 0px 0px;
height:24px;
background-color:#d62408;
}

#lowerhalf {
margin:7px 0px 0px 0px;
height:100%;
font-size:12px;
background-color:#eeeeee;}

#lowerhalf2 {
margin:7px 0px 0px 0px;
height:100%;
font-size:12px;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;}















  /*============LOWER HALF DIVS================*/

  #protection {
  text-align:justify;
  float:left;
  clear:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:138px;
  height:auto;
  margin:0px 0px 0px 0px;
}

#protecmargin {
margin:20px 0px 0px 10px;
height:705px;
}

  #mid {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:472px;
  height:725px;
  margin:0px 0px 0px 0px;
  }

#mid2 {
/*position:relative;*/
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;

  width:648px;
  /*height:725px;*/
  margin:0;
  }

  #mid3 {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:472px;
  height:950px;
  margin:0px 0px 0px 0px;
  }

  #mid4 {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:472px;
  /*height:725px;*/
  margin:0px 0px 0px 0px;
  }

#preamble {
margin:0px 0px 3px 0px;
width:625px;

}

.datablock {
position:relative;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
float:left;
width:472px;
height:auto;
margin:0px 0px 5px 0px;
}

.datablock-wide {
position:relative;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
float:left;
/*width:648px;*/
height:auto;
margin:0px 5px 5px 0px;
}



/*Small images*/
.thumb {
/*position:relative;*/
width:100px;
height:100px;
float:left;
}


/*for the 3 column pages*/
.text  {
/*position:relative;*/
float:left;
width:370px;

}
/*for the 2 column pages*/
.text-wide  {
position:relative;
float:left;
width:448px;

}


/* this is for the Commitment box*/

  #farright {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:176px;
  height:725px;
  }

#commitmentbox {
margin:20px 0px 0px 25px;
background-color:#d62408;
width:140px;
height:auto;
}

#committitle {
font-size:11px;
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
height:20px}


#redspace { 
height:10px;
background-color:#d62408;}

#committext {
font-size:11px;
padding:3px 5px 5px 5px;
color: white;}



  /*============END LOWER HALF================*/









#footer {
margin:14px 0px 0px 0px;
height:30px;
text-align:center;
clear:both;

}













/* Lists */



/* Lists: Nav */

/*================ NAV ==================*/

#nav { /* all lists */
  line-height: 1;
  padding: 4px 0 4px 0px;
  margin: 0;
  list-style: none;
  /*background-color:#d62408;*/
  background-color: #d62408;
  letter-spacing:1px !important;
  text-align: center;
  height:16px;
  z-index: 100;
}

#nav a {
  width: 10em;
  color:#fff;
  font-weight:bold;
  /*background-color:#d62408;*/
  background-color: #d62408;
  text-decoration:none;
  border-right:1px solid #fff;
  padding:0 8px 0 0;
  z-index: 100;
}

#nav li ul a {border-right:0px; z-index: 100;}

#nav a:hover {
 color:#f8c300;
}

#nav li { /* all list items */
  display:inline;
  position:relative;
  padding:2px 0px 0px 0px;
  text-align: left;
  z-index: 100;
}


#nav li ul { /* second-level lists */
  position: absolute;
  background: #d62408;
  left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  padding: 10px;
  margin: 0 0 0 -8px;
  z-index: 100;
}

#nav li ul li {
  display:block; 
  list-style:none; 
  z-index: 100;
  border-bottom: 1px solid white;  
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
  left:0.2em;
  top:1.4em;
}

#nav li a#no-line {
      border-right:none;}


#nav li a.not-selected {}
#nav li a.selected {color:#f8c300;}
#leftmenu a.selected {color:#d62408;}




/* Lists: Footer */










/* Links */


/* Lists+Links are too unpredictable between browsers
I make my own that do work then.
 */
.unordlist {
display:block;
font-size:12px;
background-image:url(images/diskbullet.gif);
background-position:5px 5px;
background-repeat:no-repeat;
padding:1px 0px 2px 15px;
margin:2px 0px 1px 5px;
}


a:link {
text-decoration:none;
color:#000;}

a:visited {
text-decoration:none;
color:#000}

a:hover {
color:#d62408;
}

a:active {}


a.img {
text-decoration:none;
border:none;
}


a.navmenu:link {
font-size:12px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}

a.navmenu:visited {
font-size:12px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}

a.navmenu:hover {
font-size:12px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}












/* Classes */




/*Grey bar with bold red text*/
.texthead {
background-image:url(images/Drktan.gif);
padding:3px 0px 3px 3px;
color:#d62408;
font-size:14px;
font-weight:bold;
display:block;
margin:0px 0px 5px 0px;}


/*Padding for the VYANET commitment title*/
.committitlepad {
display:block;
margin:3px 0px 0px 5px;}


/*Big and Black */
.pagetitle {
display:block;
float:none;
font-size:16px;
font-weight:bold;
margin:20px 0px 5px 0px;
}

.topmenu {
display:block;
padding:3px 0px 0px 5px;
}



/* three images spacing for partners*/
.partners {
display:block;
margin:10px 0px 0px 15px;
}

#vyanet-security-subnav {
	width: 105px;
}

#vyanet-tech-subnav {
	width: 125px;
}


/*Padding for the Vertical Menu on the left*/

.sidebar { /* all lists */

  float:left;
  margin:0px 5px 0px 0px;
  background-color: #eeeeee;
  width:133px;
  height:208px;
  font-size:10px;
  line-height:16px;
  list-style: none;
  z-index: 1;
}

/* Creating dropdowns for vertical menu on left */

.sidebar ul {
  margin: 0px;
  padding-left: 5px;
  z-index: 1;
}

.sidebar li ul a:hover {
  color: #d62408;
}

.sidebar a:hover {
 color:#d62408;
}

.sidebar li { /* all list items */
  display:block;
  position:relative;
  text-align: left;
  padding-top: 5px;
  list-style: none;
  z-index: 1;
}

.sidebar li ul { /* second-level lists */
  position: absolute;
  background: #eeeeee;
  width: 11em;
  left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  padding: 10px;
  margin: 0 0 0 -8px;
  z-index: 1;
}

.sidebar li ul li
{
	border-bottom: 1px solid;
}

.sidebar li:hover ul, .sidebar li.sfhover ul { /* lists nested under hovered list items */
  left: 135px;
  top: -10px;
}

#security-left-submenu {
	width: 90px;
}

.sidebar li a.not-selected {}
.sidebar li a.selected {color:#d62408;}

.floatleft {
float:left;
}

/*Padding for bottom 4 cream boxes*/
.pad {
display:block;
padding:10px 10px 0px 10px;
}



/* By now you are probably asking yourself,
"Why not use the padding selector?" Good Question!!!
Answer:  (drum roll please)

Internet Explorer...

aka: Internet Butcherer

*/




/*Bold red text*/
.redshift {
color:#d62408;
font-weight:800;
}

/*Bold black text*/
.blackshift {
color:#000000;
font-weight:bold;
}

.bigblackshift {
font-size:11px;
color:#000000;
font-weight:bold;
}

.bigwhiteshift {
font-size:11px;
color:#FFFFFF;
font-weight:bold;
}

.forcedown {
float:left;
clear:left;
padding:0px 10px 0px 10px;
}

/* Controls midbars with yellow arrows */
.midbaritem {
color:#FFFFFF;
display:block;
font-size:12px;
background-image:url(images/arrow-yellow.gif);
background-repeat:no-repeat;
padding:1px 0px 2px 15px;
margin:5px 0px 0px 15px;
}

/* Controls midbars with yellow arrows on unique pages*/
.midbaritempage {
color:#FFFFFF;
display:block;
font-size:12px;
background-image:url(../images/white_gon.gif);
background-position:0px 4px;
background-repeat:no-repeat;
padding:5px 0px 2px 20px;
margin:0px 0px 0px 138px;
}


/* Controls midbars with yellow arrows on unique pages*/
.submenuitem {
color:#000;
display:block;
font-size:12px;
/*background-image:url(images/arrow-yellow.gif);*/
background-repeat:no-repeat;
padding:1px 5px 2px 0px;
margin:5px 0px 3px 15px;}


/* Controls midbars with yellow arrows on unique pages*/
.submenuitemSML {
color:#000;
display:block;
font-size:12px;
/*background-image:url(images/gold-arrow-small.gif);*/
background-repeat:no-repeat;
padding:1px 5px 2px 0px;
margin:5px 0px 3px 15px;}


/* Controls midbars with yellow arrows on unique pages*/
.bullet-red {
color:#d62408;
font-weight:800;
display:block;
font-size:12px;
background-image:url(images/arrow-yellow.gif);
background-repeat:no-repeat;
padding:1px 0px 2px 15px;
margin:5px 0px 3px 15px;}


.pagetitle-no-margin {
display:block;
float:none;
font-size:16px;
font-weight:bold;
padding:3px 3px 5px 3px;
text-indent: 0px;
}

.red-arrow {
display:block;
font-size:12px;
background-image:url(images/arrow-red.gif);
background-repeat:no-repeat;
padding:1px 5px 2px 10px;
}

.survey-form {padding:0 20px 20px 0;}

.survey {}

.survey ul {margin:10px 0 10px 5px; }
.survey ul li {list-style:none; display:block;}

.survey-form textarea {width:90%;}
.survey-form input.width {width:250px;}

/* Hacks and Fixes */


/*

Clear Hack
Created by Holly and John at positioniseverything.net
URI: http://www.positioniseverything.net/easyclearing.html

*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/* Customer Referral Form
--------------------------------------- */
#customer_referral_form {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#customer_referral_form table td.column-1 {
  width: 150px;
}

#customer_referral_form table td.column-2 {
  width: 300px;
}

/* carriage return */

.cr {margin-bottom: 10px;}
.crx2 {margin-bottom: 20px;}



.hide-column {
	width: 314px;
	float: left;
}