﻿/* -------------------------------------------
project:	XioLink
date:		2007/07/11
------------------------------------------- */

html { min-height: 100%; margin-bottom: 1px; font-size: 100.01%; }
body { margin: 0; padding: 0; color: #555555; font: 75%/130% Arial,Tahoma,Georgia,Helvetica,sans-serif; background: #E9E9E9 url(../images/body-bg.gif) 0 0 repeat-x; }
textarea, input, select, option, button { font: 0.92em Arial,Tahoma,Georgia,Helvetica,sans-serif; }


/* COMMON
------------------------------------------- */
fieldset { border: none; margin: 0 0 12px; padding: 0; }
legend { display: none; }
button { font-size: 0.92em; overflow: visible; cursor: pointer; }
input,label { font: 0.83em Arial,Tahoma,Georgia,Helvetica,sans-serif;  }
input { color: #514D4D; }
label { color: #070202; }

img { border: none; }
.img.fr { padding: 0 0 10px 10px; margin: 0; }
.img.fl { padding: 0 10px 10px 0; margin: 0; }

strong { }
em { padding: 1px 2px; }

abbr, 
acronym { border-bottom: 1px dotted #aaa; }

dl { margin: 0 0 12px; }
 dt { font-weight: bold; }
 dd { margin: 0; }

p { line-height: 18px; margin: 0 0 18px; }

a { padding: 0; color: #006BB7; text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: underline; }

.clear { clear: both; }
.fr { float: right; }
.fl { float: left; }
.h { display: none; }

ul { padding: 0; margin: 0 0 10px;  }
ul li { padding: 0 0 1px 0px; margin: 0 0 5px 15px; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; padding: 0; font: normal 2.0em Arial,Tahoma,Georgia,Helvetica,sans-serif; color: #050101; }
h1 { color: #000000; }
h2 { font-size: 1.97em; }
h3 { font-size: 1.33em; }
h4 { font-size: 1em; }
h5 { font-size: 0.800em; }
h6 { font-size: 0.800em; }
h7 { margin: 0 0 0 0; font-size: 1.33em; }

#sidebar h2 { font-size: 1.50em; }

h1.logo { float: left; padding: 7px 31px; margin: 0 0 13px 0; }
h1.logo a { display: block; width: 226px; height: 51px; overflow: hidden; background: url(../images/logo.gif) 0 0 no-repeat; text-indent: -1001em; }



/* HELPERS
------------------------------------------- */
.wrapper { overflow: hidden; }
.offset { position: absolute; left: -10001em; top: -10001em; }
.center { text-align: center; }

/* LAYOUT
------------------------------------------- */
#root { display: block; width: 950px; height: 1%; padding: 9px 0 0 0; margin: 0 auto; margin-top: 5px; background: #fff url(../images/root-top-bg.gif) 0 0 no-repeat; }
 #top { display: block; width: 932px; height: 1%; padding: 0 9px; margin: 0; }
  #top #form-login { float: right; width: auto; padding: 15px 17px 0 0; }
  #top #form-login .element { float: left; width: 162px; height: 1%; overflow: hidden; padding: 0 3px 0 0; margin: 0; }
  #top #form-login label { display: block; margin: 0 0 5px; padding: 0 0 0 5px; }
  #top #form-login input { display: block; width: 141px; height: 14px; padding: 5px 9px 1px 9px; margin: 0; }
  #top #form-login button#btn-log-in { float: left; width: 61px; height: 21px; padding: 0; margin: 20px 0 0 5px; background: url(../images/btn-log-in.gif) 0 0 no-repeat; border: 0; text-indent: -1001em; }
  #top #nav { clear: both; display: block; }
  #top #promo-bar { clear: both; display: block; }
  
 #container { clear: both; display: block; width: 932px; height: 1%; overflow: hidden; padding: 5px 0 0px 0; margin: 0 9px; background: #fff; }
  #content { float: left; width: 571px; height: 1%; padding: 0 0 0 10px; }
   #content .intro { display: block; width: auto; height: 1%; overflow: hidden; margin-bottom: 20px;  border-bottom: 1px solid #E7E7E7; } 
  #sidebar { float: right; width: 330px; height: 1%; }
  
   #xiolink-promo { display: block; width: 330px; height: 71px; padding: 0; margin: 0 0 8px; overflow: hidden; background: url(../images/xiolink-promo.gif) 0 0 no-repeat; text-indent: -1001em;  }
   
   #sidebar .box { display: block; width: 323px; height: 1%; padding-top: 5px; margin: 0 0 0 2px; overflow: hidden; background: url(../images/sidebar-box-top.gif) 0 0 no-repeat; }
   #sidebar .box .box-wrap-a { display: block; width: 323px; height: 1%; overflow: hidden; background: url(../images/sidebar-box-bg.gif) 0 0 repeat-y; }
   #sidebar .box .box-wrap-a .box-wrap-b { display: block; width: 281px; min-height: 55px; padding: 9px 23px 18px 18px; overflow: hidden; background: url(../images/sidebar-box-bottom.gif) 0 100% no-repeat; }
   #sidebar .box h2 { display: block; padding: 0 0 10px 17px; background: url(../images/bullet-box-triangle.gif) 0 8px no-repeat; border-bottom: 1px solid #EBEBEB; }
   #sidebar .box p { padding-left: 22px; margin: 0 0 10px; }
   #sidebar .box a.more-info { float: right; }
   #sidebar .box p.testimonial-author { font-weight: bold; text-align: right; }
   
 
 #footer { display: block; width: 100%; height: 1%; padding: 6px 0 0 0; overflow: hidden; background: url(../images/footer-top-bg.gif) 0 0 no-repeat; }
 
#under-footer { width: 904px; height: 1%; overflow: hidden; margin: 0 auto; color: #555555; padding: 7px 23px; margin-bottom: 30px; }
 #under-footer #copyright { float: left; padding-top: 8px;  }
 #under-footer #cerified { float: right; }
 #under-footer #msgold { float: left; padding-top: 0px; padding-left: 35px; }
 #under-footer #cerified span { float: left; padding-top: 8px; padding-right: 13px; }


/* SKIP LINKS
------------------------------------------- */
#skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
 #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 9659px; top: 0; z-index: 10001; width: 200px; padding: 2px 0; background: #A32F31; color: #000; font-size: 1.4em; text-align: center; }
 

/* NAVIGATION
------------------------------------------- */

/* NAV */
#nav { z-index: 200; position: relative; display: block; width: 921px; height: 38px; padding: 0 5px 0 6px; margin: 0; list-style: none; background: url(../images/nav-bg.gif) 0 0 no-repeat; border-bottom: 2px solid #fff; }
#nav li { float: left; height: 38px; padding: 0 0 0 2px; margin: 0; list-style: none; background: url(../images/nav-sep.gif) 0 14px no-repeat;  }
#nav li a { display: block; height: 13px; overflow: hidden; padding: 14px 15px 11px 15px; margin: 0; color: #F3F1E9; font: 0.83em Arial,Tahoma,Georgia,Helvetica,sans-serif; text-transform: uppercase; }
 #nav li a:hover, #nav li:hover a, #nav li.current a { color: #fff; background: url(../images/nav-a-hover.gif) 50% 100% no-repeat; text-decoration: none; }
#nav li.first { margin-left: 0; padding-left: 0; background: transparent; }
#nav li.last { float: right; background: transparent; }
#nav li#sitemap { padding-left: 8px; background: url(../images/nav-sitemap-ico.gif) 0 16px no-repeat; }

#nav li a em { display: none; position: absolute; left: -10001em; top: -10001em; }
#nav li div.ul-li-bg { position: absolute; left: 0; top: 38px; display: none; overflow: hidden; width: 932px; height: 34px; background: #7B7B7B; }
#nav li ul { position: absolute; left: 0; top: 38px; display: none; width: 920px; height: 64px; padding: 0 0 0 12px; margin: 0; border-top: 2px solid #fff; overflow: hidden; }
#nav li ul li { padding: 10px 0 9px 0; margin: 0; background: transparent; }
#nav li ul li a, #nav li:hover ul li a, #nav li.current ul li a  { padding: 0 8px 0 9px; margin: 0;  color: #fff; background: url(../images/nav-sub-sep.gif) 0 50% no-repeat; }
#nav li ul li.first a, #nav li:hover ul li.first a { background: transparent; }
#nav li ul li a:hover, #nav li.current ul li.act a { background: #000 !important; color: #FFF;   }

#nav li:hover ul { display: block; }
#nav li:hover div.ul-li-bg { display: block; }


/* Foot-nav */
#foot-nav { display: block; width: 100%; height: 32px; padding: 0; margin: 0; background: #4A4845 url(../images/footer-bottom-bg.gif) 0 100% no-repeat; list-style: none; }
#foot-nav li { float: left; height: 25px; padding: 7px 0 0 1px; margin: 0;  background: url(../images/nav-foot-sep.gif) 0 10px no-repeat; }
#foot-nav li a { width: auto; height: 11px; padding: 7px 8px; margin: 0; color: #B7B6B5; font: 1em Arial,Tahoma,Georgia,Helvetica,sans-serif; }
#foot-nav li a em { display: none; }

#foot-nav li.right { float: right; }
#foot-nav li.first { background: transparent; margin-left: 15px; padding-left: 0; }
#foot-nav li.right.last { margin-right: 15px; padding-right: 0; }

/* USEFULL
------------------------------------------- */
p.cite { margin-left: 22px !important; padding: 0 0 0 10px !important; background: url(../images/cite-begin.gif) 0 4px no-repeat; }
p.cite .end { display: inline; overflow: hidden; padding-left: 20px; padding-right: 10px; width: 15px; height: 10px; background: url(../images/cite-end.gif) 0 4px no-repeat; text-indent: -1001em; }
a.more-info { display: block; width: 58px; height: 17px; overflow: hidden; padding: 2px 10px 0 13px; margin: 0; border: 1px solid #E3E3E4; color: #FE8909; background: url(../images/more-info.gif) 5px 50% no-repeat; font-size: 10px; text-transform: uppercase; }
.marked { color: #FC8F19; }
 
/* HOMEPAGE 
------------------------------------------- */
.homepage #top #promo-bar { display: block; width: 932px; height: 278px; background: #000 url(../images/promo-bar-bg-homepage.jpg) 0 0 no-repeat; }
.homepage #top #promo-bar h1.h { display: block; width: 932px; height: 194px; overflow: hidden; margin: 0; padding: 0; text-indent: -1001em; }
.homepage #top #promo-bar ul.cols { display: block; width: 917px; height: 84px; overflow: hidden; margin: 0; padding: 0 7px 0 8px; background: url(../images/ul-cols-bg.gif) 0 100% no-repeat; }
.homepage #top #promo-bar ul.cols li { float: left; width: 228px; height: 77px; overflow: hidden; margin: 0 1px 0 0; padding: 0; }
.homepage #top #promo-bar ul.cols li.last { margin-right: 0; }
.homepage #top #promo-bar ul.cols li a { float: left; width: 190px; height: 60px; padding: 10px 15px 8px 20px; margin: 0; overflow: hidden; background: #1E1B1B url(../images/ul-cols-li-bg.gif) 0 0 no-repeat; }
.homepage #top #promo-bar ul.cols li a:hover { background-color: #2A2727; text-decoration: none;  }
.homepage #top #promo-bar ul.cols li a:focus, .homepage #top #promo-bar ul.cols li a:active { text-decoration: none; }
.homepage #top #promo-bar ul.cols li a span { line-height: 15px; padding: 0; margin: 0; font-size: 0.92em; color: #787676; }
.homepage #top #promo-bar ul.cols li a span.title { display: block; margin: 0 0 4px; padding: 0; font: 1.25em Tahoma,Arial,Georgia,Helvetica,sans-serif; color: #fff;  }
.homepage #top #promo-bar ul.cols li a span span.more { display: inline; width: 26px; height: 5px; overflow: hidden; }

.homepage #content { width: 571px; padding: 10; }
.homepage #content .intro { margin-bottom: 0; }
.homepage #content .col { float: left; padding: 20px 20px 0 17px; height: 1%; }
.homepage #content .col h2 { padding-lefT: 37px; background: url(../images/h2-home-bullet.gif) 0 8px no-repeat; }
.homepage #content .col p { margin: 0 0 8px; }
.homepage #content .col a.more-info { float: right; }
.homepage #content #col-a { width: 246px; border-right: 1px solid #E7E7E7; }
.homepage #content #col-b { width: 249px; margin-left: -1px; border-left: 1px solid #E7E7E7; }

.homepage #sidebar #customers-saying { margin: 0 0 12px 2px; }


/* Other */
.data-center-flash { display: block; overflow: hidden; width: 520px; height: 276px; padding: 0; margin: 0 auto; }

.contact-form {}
.contact-form dl { display: block; overflow: hidden; width: 100%; margin: 0 0 12px; padding: 0; }
.contact-form dt, #contact-form dd { margin: 0 0 5px; }
.contact-form dt { float: left; clear: left; width: 150px; }
.contact-form .row { width: 100%; }
.contact-form dd { float: left; width: 400px; }
.contact-form dd input { width: 200px; }
.contact-form dd select { color: #514D4D; }
.contact-form dd textarea { color: #514D4D; width: 350px; }
.contact-form input[type="submit"] { color: #000000; }

.contact-form .warnings {padding-bottom:12px;}
.contact-form .warnings ul {color:#f00000; padding-bottom:0px; margin-bottom:0px; list-style-type:none; background-image:none;}
.contact-form .warnings ul li{padding:0; list-style-type:none; background-image:none; background:none;}


/* Preview bar layout */
.previewBar{font-size: 12px; line-height: 1.3em; display: block; background: #e7e7e7 url(../images/back.jpg) left top repeat-x; width: 100%; height: 51px;}
.previewBar #preview-back {position: relative; width: 780px; margin: 0 auto; background: #e7e7e7;}

  #preview-header {height: 49px; padding: 2px 5px 0 5px; background: #fff url(../images/top-bar-back.jpg) left top repeat-x;}
	#preview-header a {font-size: 1.2em; font-weight:normal; font-family: Verdana, Helvetica, sans-serif;}
	
	#preview-header div.buttons {float: right;}
	#preview-header .buttons label.inside {margin: 7px; font-size: 0.9em;}
	#preview-header input.button {width: 93px; height: 30px; border: none; background: #ccc url(../images/button-out.gif) center center no-repeat; text-align: center;}
	#preview-header .buttons .button {margin: 0 0 0 10px;}
	#preview-header a.button-link, #preview-header a.button-link:visited {display: block; float: left; height: 32px; margin: 2px; padding: 0 10px 0 10px; border-top: 2px solid #bebebe; border-right: 2px solid #2f2f2f;  border-bottom: 2px solid #2f2f2f; border-left: 2px solid #b4b4b4; background: #000 url(../images/button-link-back.jpg) left top repeat-x; color: #fff; line-height: 32px; text-align: center; text-decoration: none;}
	#preview-header a.button-link:hover, #preview-header a.button-link.on {border-top: 2px solid #141414; border-right: 2px solid #959595;  border-bottom: 2px solid #959595; border-left: 2px solid #141414; background: #595959;}

	#preview-header a.right-button, a.right-button:visited {display: block; float: left; width: 97px; height: 25px; margin: 8px 5px 0 5px; background: #fff url(../images/right-button-out.jpg) center center no-repeat; color: #000; font-size: 0.96em; line-height: 25px; text-align: center; text-decoration: none;}
	#preview-header a.right-button:hover {background: #fff url(../images/right-button-over.jpg) center center no-repeat;}
	#preview-header a.right-button.goto-admin, a.right-button.goto-admin:visited {width: 115px; background: #fff url(../images/right-button-big-out.jpg) center center no-repeat;}
	#preview-header a.right-button.goto-admin:hover {background-image: url(../images/right-button-big-over.jpg);}

	
	/* Admin Page */

.header {border-bottom:1px solid #729CC8; overflow:hidden; padding:12px 15px 15px 21px;}
.form-Admin-Login {overflow:hidden; padding:1em 170px 0 325px;}
.box-06 {background:transparent url(../images/box_06.png) no-repeat scroll 0 0; padding-top:6px; margin-top: 15px;}
.box-06-bottom {background:transparent url(../images/box_06.png) no-repeat scroll 0 100%; padding-bottom:6px;}
.box-06-middle {background:#FFFFFF none repeat scroll 0 0; border-color: #729BC7; border-style:none solid; border-width:medium 1px; overflow:hidden; padding:6px 12px; width:329px;}
.form-Admin-Login p {overflow:hidden; margin:0 0 10px;}
.form-Admin-Login p span {float:left; padding-right:5px; text-align:right; width:95px;}
.form-Admin-Login p input{border-color:1px solid #729BC7; width:154px;}
.form-Admin-Login p.forgot-pw{padding-left: 100px;}
.form-Admin-Login p.text-center{padding-left: 100px; }
.form-Admin-Login p.text-center input{width:80px;}

#errorContainer { margin:10px 0; }
