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

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

*/


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

a img {border:none;}

/* ID */

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

#content{

width:787px;

}

#header{
background-image:url(../images/security-tech-logo-large.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;
}

#mainmenu {
margin:7px 0px 0px 0px;
height:24px;
background-color:#d62408;
color:#FFFFFF;

}

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

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

  #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;
  }

#rightimages {
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  height:208px;
  float:left;
  width: 290px;

  }

    #righttop {    
   	 height:102px;
   	 
    }
	
    #rightbottom {

		margin-top: 4px;
	    height:102px;
    }
	
	#vyanetathomebar a:active, #vyanetatworkbar a:active,
	#vyanetathomebar a:link, #vyanetatworkbar a:link,
	#vyanetathomebar a:visited, #vyanetatworkbar a:visited {
		color: #ffffff;
		text-decoration: none;
	}
	
	#vyanetathomebar a:hover, #vyanetatworkbar a:hover {
		color: #f8c300;
		text-decoration: none;
	}



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

#midbar {
margin:7px 0px 0px 0px;
height:24px;

}

  /*=============MID BAR STUFF=================*/
  #welcome {
  background-color:#d62408;
  float:left;
  height:24px;
  width:214px;
  margin:0px 5px 0px 0px;}

  #whatnew {
  background-color:#d62408;
  float:left;
  height:24px;
  width:214px;
  margin:0px 5px 0px 0px;}

  #solutions {
  background-color:#d62408;
  float:left;
  height:24px;
  width:192px;
  margin:0px 5px 0px 0px;}

  #partners {
  background-color:#d62408;
  float:left;
  width:152px;
  height:24px;}

  /*============END MID BAR STUFF==============*/


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

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

  #farleft {
  text-align:justify;
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:214px;
  height:180px;
  margin:0px 5px 0px 0px;
}

  #midleft {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:214px;
  height:180px;
  margin:0px 5px 0px 0px;
  }

  #midright {
  float:left;
  /*background-color:#f4f2db;*/
  background-color: #eeeeee;
  width:192px;
  height:180px;
  margin:0px 5px 0px 0px;
  }

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

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

#footer {
margin:20px 0px 0px 0px;
height:30px;
text-align:center;
}


/* Lists */

/* THIS CLEARS PRESETS...in theory
UL {
margin-left: 0px;
padding: 0 0 0 0px;
list-style: none;
padding-left: 0px;
text-indent: -10px;
}
*/


/* Lists: Nav */

/*#farright ul {
list-style-image:url(images/YellowArrow-BG.png);
list-style-type:disc;
list-style-position:inside;
margin: 10px 0px 0px -25px;
}

#midright ul {
list-style-position:inside;
font-size:14px;
margin: 10px 0px 0px -25px;
}*/

ul#main-nav {  all lists
  padding: 4px 0 4px 8px;
  margin: 0;
  list-style: none;
  background-color:#d62408;
  text-align:left;
  letter-spacing:1px;
  height:16px;
}

ul#main-nav a {color:#fff;
text-decoration:none;
border-right:1px solid #fff;
padding:0 10px 0 5px;

}



ul#main-nav a:hover {color:#f8c300;}

ul#main-nav li.main-level {  all list items
display:inline;
position: relative;
padding:4px 0px;

}

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

ul#main-nav li ul {  second-level lists
  position: absolute;
  left: -999px;
  list-style: none;
  padding: 10px;
  margin: 0 0 0 -10px;
  background-color:#d62408;

}

ul#main-nav li ul li {
 padding:7px 5px 0 5px;
}

ul#main-nav li ul li a {
      border-right:none;
}

ul#main-nav li>ul {  to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left
  top: auto;
  left: auto;
}

ul#main-nav li:hover ul, li.over ul {  lists nested under hovered list items
  left:auto;
}

/*================ 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: 0px 0px 0px -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 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;
}

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

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;
}


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

/*** OVERRIDE ***/

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

#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:11px;
  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;
}

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

.floatleft {
float:left;
}

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

/*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;
}

.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;
}

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


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


/* 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 */


/* .home-container
--------------------------------------- */
.home-container {
  background-color: #eeeeee;
  border-top: 1px solid #ffffff;
  color: #000000;
  margin: 6px 0px 0px 0px;
  padding: 10px 20px 10px 20px;
  width: 746px;
}

.home-container p {
	margin: 0px;
	padding: 0px;
}

.home-container a:active,
.home-container a:link,
.home-container a:visited {
  background-color: transparent;
  color: #d62408;
  text-decoration: underline;
}

.home-container a:hover {
  background-color: transparent;
  color: #000000;
  text-decoration: none;
}


/* .container
--------------------------------------- */
.container {
  background-image: url(../images/container.gif);
  background-repeat: repeat-y;
  border-top: 1px solid #ffffff;
  margin: 6px 0px 0px 0px;
  overflow: auto;
  padding: 0px 0px 0px 0px;
  width: 786px;
}

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

.container a:hover {
  background-color: transparent;
  color: #000000;
  text-decoration: none;
}

.container h2 {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.container h3 {
  margin: 10px 10px 0px 12px;
  padding: 0px 0px 0px 0px;
}

.container p {
  margin: 0px 10px 0px 12px;
  padding: 0px 0px 0px 0px;
}

.container i {
  display: none;
}

.container .clear {
  clear: both;
}

.container img.spacer_bar {
  float: none;
  margin-left: 10px;
}

/* .column-1
--------------------------------------- */
.column-1 {
  float: left;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  width: 262px;
}

.column-1 h2 {
  background-image: url(../images/offers.gif);
  height: 41px;
  width: 262px;
}

.column-1 h3 {
  margin: 10px 10px 0px 10px;
  padding: 0px 0px 0px 0px;
}

.column-1 h3 a {
  background-image: url(../images/button-2new.gif);
  display: block;
  height: 60px;
  width: 235px;
}

.column-1 p {
  margin: 0px 10px 0px 10px;
  padding: 0px 0px 0px 0px;
}

.column-1 img {
  float: left;
  margin: 0px 10px 0px 10px;
  padding: 0px 0px 0px 0px;
}

/* .column-2
--------------------------------------- */
.column-2 {
  float: left;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  width: 262px;
}

.column-2 h2 {
  background-image: url(../images/news.gif);
  height: 41px;
  width: 262px;
}

.column-2 h3 a {
  background-image: url(../images/button-1new.gif);
  display: block;
  height: 60px;
  width: 235px;
}

.column-2 img {
  float: left;
  margin: 0px 10px 0px 12px;
  padding: 0px 0px 0px 0px;
}

/* .column-3
--------------------------------------- */
.column-3 {
  float: left;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  width: 262px;
}

.column-3 h2 {
  background-image: url(../images/secure-solutions_new.gif);
  height: 41px;
  width: 262px;
}

.column-3 h3 a {
  background-image: url(../images/button-3new.gif);
  display: block;
  height: 60px;
  width: 235px;
}

.column-3 ul {
  margin: 0px 15px 0px 32px;
  padding: 0px 0px 0px 0px;
}

/* .column-4
--------------------------------------- */
.column-4 {
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 262px;
  overflow: hidden;
}

.column-4 h2 {
  background-image: url(../images/affiliates.gif);
  height: 41px;
  width: 262px;
  overflow: hidden;
}

.column-3 h3 a {
  background-image: url(../images/button-3new.gif);
  display: block;
  height: 60px;
  width: 235px;
}

.column-4 ul {
  margin: 0px 75px 0px 75px;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
}

.column-4 li {
  list-style-type: none;
  overflow: hidden;
}

.column-4 table {
  margin: 0px auto 0px auto;
  padding: 0px 0px 0px 0px;
  width: 230px;
}

.column-4 table td {
  margin: 0px 0px 0px 0px;
  padding: 0px 5px 5px 5px;
  text-align: center;
  width: 105px;
}

/* .container-bottom
--------------------------------------- */
.container-bottom {
  background-image: url(../images/container-bottom.gif);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  height: 10px;
  width: 786px;
}