/*------------------------------------------------------------------------------------------------*/
/*-                                            LAYOUT.CSS                                        -*/
/*-THIS IS USED TO DECLARE LAYOUT ONLY, INCLUDING POSISTIONING AND BACKGROUND STYLING OF ELEMENTS-*/
/*-                           IT DOES NOT DECLARE TEXT OR CONTENT STYLING.                       -*/
/*------------------------------------------------------------------------------------------------*/

body {
 background: #848484 url(../images/bg_slice.jpg) repeat-x left top;
}
/* ################################### HEADER LAYOUT #################################*/

#headercontainer {
 background:  url(../images/header_slice.png) repeat-x;
 width: 100%;
}

#header {
 margin: 0 auto;
 width: 996px;
 height: 88px;
 background:  url(../images/header_bg.png) no-repeat;
}

#logo {
 float: left
}

#headerLinks {
width: 335px;
float: right;
margin-right: 55px;
padding-top:10px;
}

.phoneicon{
background:url(../images/phone_icon.gif) no-repeat right center;
}

.mailicon{
background:url(../images/mail_icon.gif) no-repeat right center;
}

#header a.logout {
    text-align:right;
    float:right;
    color: #ccc;
    margin: 40px 0 5px 0;
    width:400px;
    text-decoration: none;
}


/* ################################### NAV LAYOUT #################################*/

#navigationcontainer {
 background: url(../images/nav_cont_slice.png) repeat-x;
 width: 100%
}

#navigation {
 margin: 0 auto;
 width: 996px;
 border-left: solid 1px #be5a6e;
 border-right: solid 1px #791428;
}

/* ################################### BREADCRUMB LAYOUT #################################*/

#ctl00_mainarea_breadcrumb {
 float: right;
 padding: 0px 0px 0px 0px;
 width: 712px;
 margin: 6px 8px 0px 0px;
}

/* ################################### PAGE LAYOUT #################################*/

#ctl00_maincontainer {
margin: 17px auto 10px auto;
width: 996px;
padding-bottom: 20px;
background: url(../images/main_bg_slice.png) repeat-y;
}

#ctl00_maincontainer.background {
background: url(../images/copy_bg_slice.png) repeat-y;
}

#copyarea {
}

#ctl00_mainarea_content1 {
 background: url(../images/content1_double_line.gif) repeat-y right top;
 float: left;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 0px 20px 23px;
 width: 672px;
 margin: 15px 0px 0px 8px;
}

#ctl00_mainarea_content1.page {
 background: none;
 float: left;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 0px 20px 0px;
 width: 222px;
 margin: 8px 0px 0px 13px;
}

#ctl00_mainarea_content2 {
 float: right;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 0px 20px 0px;
 width: 263px;
 margin: 15px 8px 0px 0px;
}

#ctl00_mainarea_content2.copy {
 float: right;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 10px 20px 20px 0px;
 width: 692px;
 margin: 0px 8px 0px 0px;
}

#ctl00_mainarea_content3 {
 background: #ddd;
 float: right;
 height:auto !important;
 height: 300px;
 min-height: 300px;
 padding: 0px 10px 20px 0px;
 width: 190px
}

#ctl00_mainarea_content4 {
background: url(../images/home.jpg) no-repeat 8px 8px;
 height:auto !important;
 height: 200px;
 min-height: 233px;
 width: 980px;
 padding: 8px 8px 0px 8px;
}

#ctl00_mainarea_sidemenu {
 padding: 0px 0px 0px 0px;
 width: 222px;
 margin-bottom:10px;
}

.quotes {
 display: block;
 margin: 11px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 width: 222px;
 background: url(../images/quotebox_bg.png) no-repeat;
}

.quotestop {
 background: url(../images/quotebox_top.png) no-repeat;
 display: block;
 padding: 9px 0px 7px 15px
}

.quotesmiddle {
 background: white url(../images/quotebox_bg.png) no-repeat bottom;
 border-right:solid 1px #ababab;
 border-left:solid 1px #ababab;
 display: block;
 padding: 10px 15px 1px 15px;
}

.quotesbottom {
 display: block;
 background: url(../images/quotebox_bottom.png) no-repeat;
 height: 3px;
}


/*########################### BLOG PAGE LAYOUT ##################################*/

.blogStory {
margin-bottom:15px;
}

#categories {
width:222px;
height:auto;
float: left;
}

#ctl00_mainarea_content1.page #categories ul {
margin:0px 0px 0px 0px;
padding:10px 0px 10px 0px;
background: none;
}

#ctl00_mainarea_content1.page #categories ul li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 20px;
background: none;
}

#ctl00_mainarea_content1.page #categories ul li a {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background: none;
}

#postedOn {
border-top: solid 1px #ccc;
padding: 5px 0px 0px 0px;
}

/*########################### NEWS PAGE ITEMS ##################################*/

.newsoverview {
 display: block;
 height:auto !important;
 height: 120px;
 margin: 15px 0px 0px 0px;
 min-height: 120px
}

img.newsThumb {
padding: 0px;
margin: 0px 25px 20px 0px;
}

#newsNavContainer {
padding-top:30px;
}

.nextPrev{
float: right;
margin-left: 10px;
}

.backNews{
float: left;
}

/*########################### HOMEPAGE NEWS TICKER ##################################*/


#copyarea ul#news {
width: 780px;
float: right;
padding: 8px 0px 0px 0px;
margin: 0px 10px 0px 0px;
}

#copyarea ul#news li {
background:none;
padding: 0px;
margin:0px;
color: #fff;
}

#copyarea ul#news li a {
color: #b31e3b;
padding: 0px;
margin:0px;
font-weight: bold;
}

#tickerContainer {
background: url(../images/highlights_bg.png) repeat-x;
width: 980px;
height: 36px;
float: left;
}

.tickercontainer { /* the outer div with the black border */
width: 800px; 
height: 36px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 11px;
width: 780px;
overflow: hidden;
}

#copyarea ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}

#copyarea ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: none;
}

#copyarea ul.newsticker li a {
white-space: nowrap;
padding: 0;
color: #e3e3e3;
font: 11px Verdana;
margin: 0 50px 0 0;
text-decoration: none;
} 

ul.newsticker span {
margin: 0 10px 0 0;
} 

/*######################################## HOMEPAGE BOXES ##############################*/

.homeBox_Container {
width: 285px;
height:139px;
padding: 5px 10px 10px 5px;
float: left;
margin: 0 0 24px 5px;
}

.vmware{
background: url(../images/vmware_box.png) no-repeat top left;
}

.leased{
background: url(../images/leased_box.png) no-repeat top left;
margin-left:40px
}

.server{
background: url(../images/server_box.png) no-repeat top left;
}

.multi{
background: url(../images/multi_box.png) no-repeat top left;
margin-left:40px
}

.colocation{
background: url(../images/colocation_box.png) no-repeat top left;
}

.business{
background: url(../images/business_box.png) no-repeat top left;
margin-left:40px;
}

.homeBox_Head {
height:26px;
width:225px;
padding: 2px 0 0 20px;
}

#ctl00_mainarea_content1 .homeBox_Content {
}

#ctl00_mainarea_content1 .homeBox_Content ul {
margin: 6px 0 0 0;
padding: 0px;
}

#ctl00_mainarea_content1 .homeBox_Content ul li {
padding: 0px 0px 7px 20px;
background: url(../images/home_bullet.gif) no-repeat center left;
height:14px;
margin: 0px 0px 0px 20px;
color:#4b4a4a;
font-size: 0.85em;
width:220px;
}

.homeBox_Footer {
width:250px;
padding-right: 30px;
}

/*##################################################################################################*/
/* Login Boxes */
/*##################################################################################################*/               

#login_box
{
    background: url(../images/login_bg.png) no-repeat;
    width: 175px;
    height: 170px;
    padding: 30px 60px 0 65px;
}

#login_button
{
    padding: 0px 13px 0px 0px;
    text-align: right;
}

/*########################################FOOTER LAYOUT##############################*/

#footercontainer {
 background: #0d0d0d url(../images/footer_slice.png) repeat-x;
 width: 100%
}

#footer {
 margin: 0 auto;
 width: 996px;
 padding-top:11px;
}

ul.footerList{
margin: 20px 0px 0px 0px;
padding: 35px 0px 30px 0px;
width: 285px;
height: auto;
float: left;
background: url(../images/highlights.png) no-repeat top left;
}

ul.footerList li{
margin: 0px;
padding:  10px 0px 10px 0px;
width: 285px;
text-align:left;
border-bottom: solid 1px #404040;
font-size: 1.1em;
}

ul.second {
margin-left:40px;
background: url(../images/blogposts.png) no-repeat left top;
}

#footerContact {
width:295px;
float: right;
}

ul.footerAddress {
font-size: 1.2em;
color: #f5e8e8;
}

#footer ul.footerAddress li {
padding: 1px 0px 1px 0px;
}

#footerLogo{
float: left;
width:70px;
height:85px;
padding-left:5px;
}

#searchContainer{
height:auto;
margin-bottom:45px;
padding-top:15px;
}

.searchBox {
border: solid 1px #4b4b4b;
border-right: 0px;
float: left;
width: 204px;
height: 21px;
padding:6px 0px 0px 2px;
color:#5d5d5d;
}

/*######################################## CLIENT LOGOS ##############################*/

#clientLogos {
list-style: none;
padding:10px 0px 0px 0px;
margin: 0px 0px 50px 0px;
border-top:solid 1px #393939;
}

#clientLogos li {
float: left;
}

#clientLogos a * {
display: none;
}

#clientLogos a {
margin-right:35px;
}

#clientLogos a,
#clientLogos a .hover {
height: 45px;
position: relative;
display: block;
background: url(../images/client_sprite.png) 0 0px no-repeat;
}

/* CISCO */
#clientLogos a.cisco {
background-position: 0 0px;
width: 73px;
}

/* CISCO HOVER */
#clientLogos .highlight a.cisco:hover,
#clientLogos a.cisco .hover {
background-position: 0 -45px;
width: 73px;
}

/* JUNIPER */
#clientLogos a.juniper {
background-position: -117px 0px;
width: 114px;
}

/* JUNIPER HOVER */
#clientLogos .highlight a.juniper:hover,
#clientLogos a.juniper .hover {
background-position: -117px -45px;
}

/* DELL */
#clientLogos a.dell {
background-position: -266px 0;
width: 81px;
}

/* DELL HOVER */
#clientLogos .highlight a.dell:hover,
#clientLogos a.dell .hover {
background-position: -266px -45px;
}

/* VMWARE */
#clientLogos a.vmware {
background-position: -375px 0;
width: 138px;
}

/* VMWARE HOVER */
#clientLogos .highlight a.vmware:hover,
#clientLogos a.vmware .hover {
background-position: -375px -45px;
}

/* LINX */
#clientLogos a.linx {
background-position: -546px 0;
width: 79px;
}

/* LINX HOVER */
#clientLogos .highlight a.linx:hover,
#clientLogos a.linx .hover {
background-position: -546px -45px;
}

/* NOMINET */
#clientLogos a.nominet {
background-position: -655px 0;
width: 97px;
}

/* NOMINET HOVER */
#clientLogos .highlight a.nominet:hover,
#clientLogos a.nominet .hover {
background-position: -655px -45px;
}

/* MICROSOFT */
#clientLogos a.micro {
background-position: -793px 0;
width: 118px;
}

/* MICROSOFT HOVER */
#clientLogos .highlight a.micro:hover,
#clientLogos a.micro .hover {
background-position: -793px -45px;
}

/* BT */
#clientLogos a.bt {
background-position: -945px 0;
width: 51px;
margin-right:0px;
}

/* BT HOVER */
#clientLogos .highlight a.bt:hover,
#clientLogos a.bt .hover {
background-position: -945px -45px;
}


/*######################################## CLIENT LOGOS END ##############################*/


ul.footerList .noborder {
border: 0px;
}

#footerLinks {
 padding: 20px 0px 5px 0px;
 text-align: center;
 width: 996px;
}

#designBy {
 padding: 5px 0px 10px 0px;
 text-align: center;
 width: 996px;
}

/*######################################## NETWORK STATUS LAYOUT ##############################*/

/*
.class1 / .hello1 = Status OK (Green)
.class2 / .hello2 = Status Not OK (Red)
.class3 / .hello3 = Staus Amber (Amber)
*/

div.class1 a.MenuTopa {
 display: block;
 width: 100%;
 cursor: pointer;
 background:none;
}

#ctl00_mainarea_content2.copy div.class1 a.MenuTopa:hover {
text-decoration:none;
}

#ctl00_mainarea_content2.copy div.networkContainer {
cursor:pointer;
}

.class1 {
background: url(../images/network_green.png) no-repeat bottom left;
height:28px;
}

.hello1 
{
background: url(../images/network_green.png) no-repeat top left;
height:28px;
}

.class2 {
background: url(../images/network_red.png) no-repeat bottom left;
height:28px;
}

.hello2 
{
background: url(../images/network_red.png) no-repeat top left;
height:28px;
}

.class3 
{
background: url(../images/network_amber.png) no-repeat bottom left;
height:28px;
}

.hello3
{
background: url(../images/network_amber.png) no-repeat top left;
height:28px;
}   

/* Status Name*/
#ctl00_mainarea_content2.copy .class1 span.name,
#ctl00_mainarea_content2.copy .hello1 span.name,
#ctl00_mainarea_content2.copy .class2 span.name,
#ctl00_mainarea_content2.copy .hello2 span.name,
#ctl00_mainarea_content2.copy .class3 span.name,
#ctl00_mainarea_content2.copy .hello3 span.name {
text-decoration:none;
display: block;
float: left;
width:395px;
padding:2px 0px 0px 40px;
color: #fff;
font-weight: bold;
}

/* History area*/
#ctl00_mainarea_content2.copy .class1 span.history,
#ctl00_mainarea_content2.copy .hello1 span.history,
#ctl00_mainarea_content2.copy .class2 span.history,
#ctl00_mainarea_content2.copy .hello2 span.history,
#ctl00_mainarea_content2.copy .class3 span.history,
#ctl00_mainarea_content2.copy .hello3 span.history {
text-decoration:none;
display: block;
float: left;
width:100px;
padding: 2px 0px 0px 15px;
color: #fff;
font-weight: bold;
}

/* show history link
#ctl00_mainarea_content2.copy .class1 a.MenuTopa,
#ctl00_mainarea_content2.copy .hello1 a.MenuTopa,
#ctl00_mainarea_content2.copy .class2 a.MenuTopa,
#ctl00_mainarea_content2.copy .hello2 a.MenuTopa,
#ctl00_mainarea_content2.copy .class3 a.MenuTopa,
#ctl00_mainarea_content2.copy .hello3 a.MenuTopa {
cursor: pointer;
display: block;
width: 109px;
float: left;
padding:2px 0px 0px 0px;
text-align: center;
background:none;
color: #fff;
font-weight: bold;
}

*

/* Status area*/
#ctl00_mainarea_content2.copy .class1 span.status,
#ctl00_mainarea_content2.copy .hello1 span.status,
#ctl00_mainarea_content2.copy .class2 span.status,
#ctl00_mainarea_content2.copy .hello2 span.status,
#ctl00_mainarea_content2.copy .class3 span.status,
#ctl00_mainarea_content2.copy .hello3 span.status {
text-decoration:none;
display: block;
float: right;
width:125px;
padding: 2px 0px 0px 15px;
color: #fff;
font-weight: bold;
}

/*Drop down content here*/
.expandable_boxa {
padding: 0px 10px 10px 10px;
background: #f2f2f2;
cursor:default;
}

#ctl00_mainarea_content2.copy .expandable_boxa p {
padding: 3px 0px 0px 0px;
margin:0px;
}

/*Each drop down has a container which gives spacing around it*/
.networkContainer {
margin-bottom:3px;
}