/*

	Title:      360TCS Screen styles
	Date:       4/23/2009

*/

@import "reset.css";

body {
	margin: 0; padding: 0;
	font-family: arial, helvetica, sans-serif; color: #626366;
	line-height: 1.5;
	background: #666 url(../images/bg_body.gif) repeat;
	text-align: center;
}

a { 
    color: #626366;
	text-decoration: underline;
}
a:hover { 
	color: #25a9df;
    text-decoration: underline;
}
a.more {
    font-size: 9px; font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #25a9df;
    white-space: nowrap;
}
a.more:hover {
	text-decoration: underline;
}

/* =typography defaults
------------------------------------------------------ */

h1,h2,h3,h4,h5,h6 { font-family: arial, helvetica, sans-serif; font-weight: bold; color: #626366; }

h1 { font-size: 2.7em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.5em; line-height: 1; margin-top: 0; margin-bottom: 1.5em; }
h3 { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em;  }

p, ul, ol { margin: 0 0 1.5em; font-size: 1.2em; }

ul li { 
	padding: 0 0 0 10px;
	background: url(../images/bullet.gif) no-repeat 0 6px;
}

em { font-style: italic; }
strong { font-weight: bold; }


/* =structure
------------------------------------------------------ */

#skip-links {  /* accessibility */
	position: absolute;
	top: 0; left: -999em;
}
#header { 
	position: relative;
	height: 150px;
	background: #fff;
}
#container {
	width: 920px;
	margin: 0 auto;
	text-align: left;
}
#slogan 
{
    height:24px;
	background: url(../images/bg_container.png) no-repeat top left;
}    
#main {
	background: #fff;
	padding: 0 0 30px 0;
}
#content {
	float: left;
	width: 531px;
}
#sidebar {
    float: right;
    width: 389px;
}
#footer {
	clear: both;
	padding: 2px 20px;
	background: #d9d9d9 url(../images/bg_footer.gif) repeat;
}


/* =header
------------------------------------------------------ */

a#logo {
	position: absolute; top: 21px; left: 31px;
	width: 111px; height: 99px;
	background: url(../images/360tcs_logo.gif) no-repeat 0 0;
	display: block;
	text-indent: -999px;
}
a#login {
	position: absolute; bottom: 25px; right: 25px;
	font-size: 1.2em; line-height: 1;
	text-decoration: none;
}
#tagline {  /* added via javascript */
    float:right;
	font-size: 11px;
	color: #fff;
	padding: 3px 25px 0 0;
}


/* =date Date & Time widgets
------------------------------------------------------ */

#date {
    position: absolute; top: -15px; right: 6px;
    font-size: 10px; color: #bcbdbd; line-height: 1;
}
#clock {
   position: absolute; top: 0; right: 7px;
   padding-top: 8px;
   font-size: 10px; color: #999; line-height: 1;
}
#clock span {
    padding: 8px 6px 0 3px;
    background: url(../images/clock_separator.gif) no-repeat bottom right;
}
#clock span.seconds {
    background: none;
    padding-right: 0;
}


/* =navigation
------------------------------------------------------ */

/* all */
#divNav {
	width: 171px;
	position: absolute; top: 18px; left: 178px;
	margin: 0; padding: 0;
	text-align:right;
}
#divNav a.link {
    font-size: 1.2em;
	text-decoration: none;
}
#divNav a.link:hover {
    color:#000;
}
#nav {
    margin: 0;
    padding: 0;
}
#nav li {
	text-align: right;
	margin: 0; padding: 0; background: none;
}
/* subnav */
#nav ul {
	position: absolute;
	top: 0; left: -999em;
	width: 165px;
	font-size: .834em;
}
#nav li.current ul, #nav li.sfHover ul {
	left: 183px; top: 3px;
}
#nav ul li {
	text-align: left;
}
/* links */
#nav a, #nav li.current li a, #nav li.sfHover li a {
	color: #626366;	text-decoration: none;
}
#nav a:hover, #nav li.current li a:hover, #nav li.sfHover li a:hover,
#nav li.current a, #nav li.sfHover a,
#nav li.current li.currrent a, #nav li.sfHover li.current a {
	color: #000;
}


/* =titles
------------------------------------------------------ */

#title {
	height: 128px;
	margin: 0 0 40px;
	background: #18aef0 url(../images/bg_title.gif) repeat-y top left;
	position: relative;
}
#title h1 {
	position: absolute; left: 20px; bottom: 20px;
	margin: 0; padding: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 2.7em; line-height: 1; font-weight: normal;
	color: #fff;
}

/* image replacement */
h1.title {
	height: 27px; width: 400px;
	text-indent: -9999px;
}
h1.case-study { background: url(../images/title_case-study.gif) no-repeat 0 0; }
h1.services { background: url(../images/title_services.gif) no-repeat 0 0; }
h1.infrastructure { background: url(../images/title_infrastructure.gif) no-repeat 0 0; }
h1.power { background: url(../images/title_power.gif) no-repeat 0 0; }
h1.cooling { background: url(../images/title_cooling.gif) no-repeat 0 0; }
h1.connectivity { background: url(../images/title_connectivity.gif) no-repeat 0 0; }
h1.security { background: url(../images/title_security.gif) no-repeat 0 0; }
h1.contact { background: url(../images/title_contact.gif) no-repeat 0 0; }
h1.customer-login { background: url(../images/title_customer-login.gif) no-repeat 0 0; }
h1.location { background: url(../images/title_location.gif) no-repeat 0 0; }
h1.login {background: url(../images/title_login.gif) no-repeat 0 0;}
h1.contact_form {background: url(../images/title_contact_form.gif) no-repeat 0 0;}
/* =content modules
------------------------------------------------------ */

/* default copy mod */
.module {
	margin: 0 75px 0 20px;
}
/* intro mod */
.intro {
	margin-right: 85px;
}
.intro p {
	font-size: 1.5em;
	line-height: 1.5;
	margin-bottom: 1.2em;
}
.intro h2 {
	line-height: 1.5;
	margin-bottom: 0;
}
/* callout mod */
.callout {
	margin: 0 80px 1.5em 0;
	padding: 0 0 0 79px;
	background: url(../images/bg_callout.gif) repeat-y top left;
}
/* callout mod - box with full background */
.callout-box {
	margin: 0 16px 1.5em 0;
	padding: 10px 40px 15px 79px;
	background: #d7d8d9 url(../images/bg_callout.gif) repeat-y top left;
}
/* 4-col lists */
#content .callout-box ul {
	float: left;
	width: 25%;
	margin: 0 0 10px;
}
#content .callout-box li {
	padding: 0; background: none;
}


/* =login Customer Login
------------------------------------------------------ */

form#login { 
    margin: 20px 0 0; padding: 0;
}
form#login fieldset { 
    margin: 0; padding: 10px 0 0; border: 0;
}
form#login legend { 
    margin: 0; padding: 0 0 0 8px;
    font-size: 16px;
    color: #616266;
}
form#login div {
	position: relative; 
    width: 389px; height: 50px;
    background: url(../images/bg_login.gif) no-repeat top left; 
} 
form#login p { 
    height: 24px; margin: 0 0 2px; 
} 
form#login label {        
    float: left; display: inline;
    margin: 3px 0 0 8px; width: 85px; 
    font-size: 12px; color: #fff;
}
form#login input#id, form#login input#password { 
    height: 12px; width: 126px; 
    margin: 6px 0 0 3px; padding: 0; border: 0; 
    font-size: 11px;
    background: transparent;
    outline: none; 
}
form#login button {    
    position: absolute; top: 0; left: 257px;
    width: 62px; height: 50px;
	margin: 0; padding: 0; 
    font-size: 10px; line-height: 50px; color: #616266;     
    background: none; border: 0;
    outline: none; 
}
form#login button:hover {
    color: #26a9e0;
}


/* =home page
------------------------------------------------------ */

body.home #content {
    padding: 30px 0 0 0;
    width: 590px;
}
#banner {
    width: 920px; height: 305px;
    background: #282626 url(../images/home_banner.jpg) no-repeat 0 0;
    position: relative;
}
#feature {
    width: 230px; height: 235px;
    position: absolute; top: 20px; right: 20px;
    background: #25a9df;
	z-index: 1000;
}
#feature ul {
    margin: 0.5em 0 15px; padding: 0;
    font-size: 1.1em; line-height: 1.2;
	font-weight: bold;
}
#feature li {
    margin: 0; padding: 0; background: none;
}
#feature li a {
    display: block;
    padding: 5px 12px 5px 20px;
    color: #fff;
    text-decoration: none;
}
#feature li a:hover, #feature li a.current {
    background: #2198c9 url(../images/feature_nav-on.gif) no-repeat 5px center;
}
#feature p {
    margin: 0; padding: 0 10px 0 20px;
    font-size: 1.1em; color: #fff;
	line-height: 15px;
	display: none;
}
#feature p.current { 
	display: block; 
}   
body.home .module, body.home .intro {
    margin-right: 0;
}
body.home .intro p {
    font-size: 1.6em;
}
body.home #sidebar {
    width: 217px;
    margin: 0 20px 0 0;    
    padding: 33px 0 0 0;
}
body.home #sidebar h2 {
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.7;
}
body.home #sidebar p {
    font-size: 1.1em;
    line-height: 1.7;
}


/* =footer
------------------------------------------------------ */

#footer ul {
	margin: 0;
}
#footer li {
	float: left;
	margin: 0; padding: 0; background: none;
	font-size: 0.75em;
}
#footer li#copyright {
	padding-top: 4px;
	margin-left: 664px;
	text-transform: uppercase;
}
#footer li#disclosures {
	float: right;
	padding-top: 4px;
	text-transform: uppercase;
}
#footer a {
	text-decoration: none;
}


/* =misc
------------------------------------------------------ */

html { overflow-y: scroll; } /* always show scrollbars - Safari/FF */ 
hr, .hide {	display: none; }
.nobr { white-space: nowrap;}
.highlight { background: #ffc; }
.left { float: left; margin: 0 8px 8px 0; }
.right { float: right; margin: 0 0 8px 8px; }
.first { margin-top: 0; }
.last {	margin-bottom: 0; }

/* self-clearing floats */
.wrap:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

ul.main {
    font-size: 1.6em;
}
ul.main li {
    background:none;
    color:#00b0f0;
    list-style:disc outside none;
    margin-left:15px;
    padding:0;
}
ul.main li span {
    color:#000;
}