/* CSS Document */

@import url("reset.css");

body {
	/*background-image:url(../images/lh_20px.jpg);*/
	background-color:rgb(235, 235, 235);
	background-image:url(../images/grain.png);
	color: rgb(77, 81, 84);
	font-size: 75%;
	line-height:1.66667;
	text-align:center;
	margin: 0 auto;
}
 
html>body {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px; /* ignored by ie6 */
}
 
p {
	font-size: 1em;
	line-height: 1.667em;
	margin:1.667em 0 1.667em;
}

h1{
	font-size:3em;/* 36px */
	font-weight:normal;
	line-height:1.111em; /* 40px */
	padding:.5556em 0; /* 20px */
}

h2 {
	background:url(../images/h2_gradBG.jpg) bottom left repeat-x rgb(32, 62, 86);
	color:rgb(254, 254, 255);
	font-size:1.75em; /* 21px */
	font-weight:normal;
	line-height:1.9047em; /* 40px */
	/*padding:1.9047em 0;*/ /* 40px */
	margin-bottom:.95235em;
	padding:0 0 0 .4671em;
}

h3 {
	font-size:1.5em; /* 18px */
	font-weight:normal;
	line-height:1.111em; /* 20px */
	padding:1.111em 0 0 0; /* 20px */
}

h4 { font-size:1.33333em; /* 16px */
	line-height:1.25em; /* 20px */
	padding:1.25em 0; /* 20px */
}

h5 {
	font-size:1.16667em; /* 14px */
	font-weight:normal;
	line-height:1.4285em; /* 20px */
	padding:.7142em 0; /* 10px */
}

h6 {
	font-size:1em; /* 12px */
	line-height:1.667em;
	padding:.8333em 0; /* 10px */
}
	
/* !Text elements */
/* -------------------------------------------------------------- */

p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus,
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* !Lists*/
/* -------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* !Tables */
/* -------------------------------------------------------------- */

table       { margin-bottom: 1.667em; width:100%; }
th          { font-weight: bold; }
/* thead th    { background: #c3d9ff; } */
th,td,caption {
	font-size: 1em;
	line-height: 1.667em;
	padding:.8333em;
}

/* tr.even td  { background: #e5ecf9; } */
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* !Misc classes */
/* -------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

/* ------------- END TYPOGRAPHY --------------- */
/* !Layout */
/* -------------------------------------------------------------- */
#wrapper{
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	width: 960px;
}

.container{
	clear:both;
	margin:0 .8333em 1.66em;
	}

/* -- Platform Metrics -- */	
.feature{
	color:rgb(32, 62, 86);
	float:left;
	text-align: center;
	margin-right: 1.667em;
	width:24.9em;
}

#trustintro{
	text-align: left;
}

#completions{
	margin-right:0;
}

#reports, #completions{
	/* background:url(../images/alert-overlay.png) repeat-x rgb(242, 242, 242); */
	background-color: rgb(194, 215, 226);
	background-image: url(../images/featuredBox_bg.jpg);
	background-image: 
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(173,194,204)),
			color-stop(0.02, rgb(194,215,226)),
			color-stop(0.53, rgb(231,238,242)),
			color-stop(0.57, rgb(242,242,242)),
			color-stop(1, rgb(218,234,242))
		);
	background-image:
		-moz-linear-gradient(
			center bottom,
			rgb(173,194,204) 0%,
			rgb(194,215,226) 2%,
			rgb(231,238,242) 53%,
			rgb(242,242,242) 57%,
			rgb(218,234,242) 100%
		)
	;
	border:1px solid rgb(184, 202, 217);
	box-shadow: -1px -1px 0px #FFF;
	font-weight: bold;
	margin-top:1.667em;
}

#reports p, #completions p{
	margin:1.667em;
}
p.test {

	text-shadow: rgb(184, 196, 201) 20px -12px 2px;
}
.metricfigure{
	font-size: 5em;
	line-height: 1em;
	padding:.3em;
	text-shadow: #000000 0px 12px 40px;
	text-shadow: rgb(184, 196, 201) 0px 12px 10px;
	text-shadow: rgba(0, 0, 30, .3) 0px 18px 30px;
}

/* !Data Center Table -- */
{
	text-align: center;
}

table h4{
	display: inline-block;
}

thead{
	border-right:1px solid rgb(206, 212, 217);
	border-left:1px solid rgb(206, 212, 217);
}

thead th{
	border-bottom:1px solid rgb(206, 212, 217);
	padding: 0;
}

thead th h4, tfoot td h4{

	font-size: 1em;
	display: block;
	line-height: 1.667em;
	padding:.8333em;
	
	text-shadow: rgb(250, 250, 250) 0px 1px;
}

thead th td.current{
	border:1px solid rgb(184, 202, 217);
	border-bottom:none;
	}

.title {
	color:rgb(32, 62, 86);
	font-weight:bold;
	white-space: nowrap;
}
.title h4{
	padding-left:.8333em;
}

td.title, tfoot.title{
	text-align: left;
	padding-left:1.667em;
}

tfoot{
	font-size: 1em;
	line-height: 1.667em;
	font-style: normal;
}

tbody td{
	border-top:1px solid rgb(250, 250, 250);
	border-bottom:1px solid rgb(209, 209, 209);
}

.title{text-align: left;}
td.title{padding-left:.8333em;}

/* table .row td{border-top:1px solid rgb(250, 250, 250); border-bottom:1px solid rgb(180, 180, 180); padding-top:.831em; padding-bottom: .831em;} */
.odd td{
	background: rgb(255,255,255);
}
.row.even td{}

/* -- Data Center Table :: CSS3 -- */
#datacenter table{
	text-align: center;
	border: 1px solid rgb(130, 130, 130);
}

#datacenter thead h4{
	background-color:rgb(246, 246, 246);
	background-image:url(../images/thead_gradBG.jpg);
	background-image:url(../images/grain.png),
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(204,204,204)),
			color-stop(1, rgb(247,247,247))
		);
	background-image:
		-moz-linear-gradient(
			center bottom,
			rgb(204,204,204) 0%,
			rgb(247,247,247) 100%
		);
	background-position:bottom left;
	text-transform: uppercase;
}

#datacenter tfoot td{
	background-color: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#cccccc', endColorstr='#999999'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #ccc,  #999); /* for firefox 3.6+ */
	border-bottom:none;
}

#datacenter thead th.current h4, #datacenter td.current
{
    background-color: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#cccccc', endColorstr='#999999'); /* for IE */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); /* for webkit browsers */
	background-image: -moz-linear-gradient(top,  #ccc,  #999); /* for firefox 3.6+ */
	background-position: center top;
    background-image: center top;
}

#datacenter thead th.current h4{
	border-top:1px solid rgb(184, 202, 217);
	border-right:1px solid rgb(184, 202, 217);
	border-bottom:none;
	border-left:1px solid rgb(184, 202, 217);
	}
	
#datacenter tbody .current{
	border-top:none;
	border-right:1px solid rgb(184, 202, 217);
	border-bottom:none;
	border-left:1px solid rgb(184, 202, 217);
	}

#datacenter tfoot .current{
	border-right:1px solid rgb(184, 202, 217);
	border-bottom:1px solid rgb(184, 202, 217);
	border-left:1px solid rgb(184, 202, 217);
}
	
th.current{
	border-bottom:none;
}

.statusicon{
	background-position:center center;
	background-repeat:no-repeat;
	border:1px solid transparent;
	display:block;
	text-indent:-1000em;
	padding: .867em 0;
}

.statusicon:hover{
	background-color:rgb(230, 235, 245);
	border-color:rgb(220, 220, 230);
}

.available{
	background-image:url(../images/available.png);
	cursor:default;
}

.available:hover{
	background-image:url(../images/available_hover.png);
}

.information{
	background-image:url(../images/information.png);
	cursor:pointer;
}

.information:hover{
	background-image:url(../images/information_hover.png);
}

.interruption{
	background-image:url(../images/interruption.png);
	cursor:pointer;
}

.interruption:hover{
	background-image:url(../images/interruption_hover.png);
}
/* !Data Center Legend */
/* -------------------------------------------------------------- */
#legend_datacenter{
	padding-bottom:1.677em;
}

#legend_datacenter dt, #legend_datacenter dd {float: left;}	
.legend_icon img{}
.legend_icon{
	
}
#legend_datacenter dd{margin-right:4.334em;}

/* !Data Center Controls */
/* -------------------------------------------------------------- */
#datacenter_controls{
	/*
	float:right;
	margin-top:-1.667em; 
	padding-top: .4166em;
	padding-bottom: .8333em;
	*/

	width:12em;
}

.button, .button:visited {
	background:  rgb(247,247,247) url(../images/alert-overlay.png) repeat-x; 
	background-image:url(../images/thead_gradBG.jpg);
	background-image:url(../images/grain.png),
		-webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(204,204,204)),
			color-stop(1, rgb(247,247,247))
		);
	background-image:
		-moz-linear-gradient(
			center bottom,
			rgb(204,204,204) 0%,
			rgb(247,247,247) 100%
		);
	display: inline-block;
	padding: 5px 10px 6px; 
	color: rgb(75, 88, 99); 
	text-decoration: none;
	
	-moz-box-shadow: 0 2px 2px rgba(255,255,255,.9);
	-webkit-box-shadow: 0 2px 2px rgba(255,255,255,.9);
	-webkit-background-clip: border-box;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border: 1px solid rgb(153,158,163);
	position: relative;
	cursor: pointer;
}

.button:hover{
	background-color: rgb(243, 115, 14);
	background-image:url(../images/grain.png),
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(41,92,129)),
			color-stop(.02, rgb(81,128,172)),
			color-stop(.98, rgb(42,75,113)),
			color-stop(1, rgb(30,50,85))
		);
	background-image:
		-moz-linear-gradient(
			center bottom,
			rgb(204,204,204) 0%,
			rgb(247,247,247) 100%
		);
		border: 1px solid rgb(45, 79, 117);
	color: rgb(255, 255, 255); }
.button:active{ top: 1px; }
.button, .button:visited{font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }

#newerBtn{
	float:left;
}
#olderBtn{
	float:right;
}

/* !Tooltip */
.tooltip {
	display:none;
	background:url(../images/black_arrow_big.png);
	height:163px;
	padding:40px 30px 10px 30px;
	width:310px;
	font-size:11px;
	color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}

.tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}