h2 
{
	font-size: 2em;
	font-weight: normal;
	margin: 1.5em 0 0.5em 0;
}

h3
{
	font-size: 1em;
	margin: 1.5em 0 0.5em 0;
}

img
{
	vertical-align: middle;
}

td img
{
	margin-right: 0.5em;	
}

a, a:visited
{
	color: #3366cc;
}
a:hover
{
	background: none;
}

hr 
{
	border: 0;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
}

span.light, td.light
{
	color: #898989;
}

.pad_left
{
	padding-left: 20px;
}

.hidden
{
	display: none;
}

.small
{
	font-size: 0.8em;
}

noscript p, #divNoScript p
{
	font-size: 2em;
	text-align: center;
	margin: 1em auto;
	max-width: 960px;
}

table.optionsTable 
{
	border-collapse: collapse;
	border: none;
	max-width: 100%;
	width: 100%;
}
	table.optionsTable td:first-child, table.optionsTable th:first-child
	{
		padding-left: 20px;
	}
	table.optionsTable td.force-left, table.optionsTable th.force-left 
	{
		padding-left: 0.5em;
	}
	tr.first td, tr.first th
	{
		border-top: 1px solid #ccc !important;
	}
	tr.last td, tr.last th
	{
		border-bottom: 1px solid #ccc !important;
	}
	table.optionsTable tr.alt td, table.optionsTable tr.alt th
	{
		background: #f7f7f7;
	}
	table.optionsTable td, table.optionsTable th
	{
		background: #fff;
		border-collapse: collapse;
		font-size: 1em;
		line-height: 1.5em;
		padding: 0.5em;
		vertical-align: top;
	}
	table.optionsTable th 
	{
		font-weight: bold;
	}
	table.optionsTable td.center, table.optionsTable th.center
	{
		text-align: center;
	}
	table.optionsTable td.right, table.optionsTable th.right
	{
		text-align: right;
	}

.bodyGradient 
{
	background: rgb(184,186,188); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(184,186,188,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,186,188,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(184,186,188,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(184,186,188,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(184,186,188,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(184,186,188,1) 0%,rgba(240,240,240,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8babc', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
}

/* override facelift css for sidebar */

html, body 
{
	background: #fff !important;
	margin: 0;
	padding: 0;
	height: 100%;
	min-width: 960px;
}
body
{
	font-size: 12px;	
	filter: none;
}
body.bodyGradient
{
	background: #fff;
	filter: none;
}
#MainForm 
{
	height: 100%;
	width: 100%;
}
.contentAreaRL 
{
	background: #fff;
	height: auto;
	margin: 0;
	max-width: 1900px;
	min-height: 100%;
	/* account for height of header bar */
	min-height: calc(100% - 35px);
	min-height: -moz-calc(100% - 35px);
	min-height: -webkit-calc(100% - 35px);
	padding: 0;
	position: absolute;
	width: 100%;
}

/**
 * MENU
 */
#resMenu
{
	display: block;
	background-color: #fff;
	border-right: 1px solid #636363;
	float: left;
	font-size: 3.5em;
	height: auto;
	left: 0;
	min-height: 100%;
	max-height: 100%;
	position: absolute;
	top: 0;
	width: 310px;
}
	#resMenu ul 
	{
		position: absolute;
		margin: 20px -1px 0 20px;
		padding: 1px 0 0 0;
		right: 0px;
		width: 290px;
	}
	#resMenu li
	{
		list-style: none;
		line-height: 1.75em;
		vertical-align: middle;
	}
	#resMenu li.selected {
		background: transparent url('nav_selected.png') no-repeat center right;
	}
	#resMenu a {
	   -moz-transition: color 0.3s linear;
	   -o-transition: color 0.3s linear;
	   -webkit-transition: color 0.3s linear;
	   transition: color 0.3s linear;
	   color: #4B4B4B;
	   text-decoration: none;
	   cursor: pointer;
	  }
  
  	#resMenu a:hover, #resMenu li.selected a {
	  background: none;
   		color: #3366cc;
  }
#resContent
{
	background: white;
	float: left;
	height: 100%;
	margin: 0 0 0 310px;
	min-width: 630px;
	padding: 0 0 20px 0;
	width: 65.625%;
	width: calc(100% - 310px);
	width: -moz-calc(100% - 310px);
	width: -webkit-calc(100% - 310px);
}
	#resContentInner 
	{
		margin: 0 auto;
		position: relative;
		width: 95.38461538461538%;
	}
	#resContentInner .left 
	{
		float: left;
		width: 47.61904761904762%; /* 300 / 620 */
	}
	#resContentInner div.right 
	{
		float: right;
		width: 47.61904761904762%; /* 300 / 620 */
	}
	
/**
 * BROWSER
 */
#tblBrowser td:first-child, #tblOS td:first-child
{
	width: 38.70967741935484%;
}
	
/**
 * DOWNLOADS
 */
#tblServerInfo td:first-child
{
	width: 38.70967741935484%; /* 240 / 620 */
}
#divDownloadsRP
{
	width: 100%;
}
	ul.tabs
	{
		border-bottom: 1px solid #ccc;
		margin: 0;
		max-width: 100%;
		padding: 1em 0 0 0;
	}
		ul.tabs li
		{
			background: #EBEBEB;
			border: 1px solid #ccc;
			border-radius: 0.5em 0.5em 0 0;
			-moz-border-radius: 0.5em 0.5em 0 0;
			-webkit-border-radius: 0.5em 0.5em 0 0;
			cursor: pointer;
			display: inline-block;
			*display: inline;  /* IE 7 fix */
			height: 31px;
			margin: 0 10px -1px 10px;
			text-align: center;
			line-height: 30px;
			vertical-align: middle;
			width: 140px;
			zoom: 1; /* IE 7 fix */
		}
		ul.tabs li:first-child
		{
			margin-left: 80px;
		}
		ul.tabs li.selected
		{
			background: #fff;
			border: 1px solid #ccc;
			border-bottom: 1px solid #fff;
			font-weight: bold;
			margin-bottom: -1px;
		}
		ul.tabs li.warning
		{
			margin-left: 20px;
			width: 40px;
		}
		ul.tabs li.warning img
		{
			vertical-align: middle;
		}
	#divDownloadsRP div.tab
	{
		display: none;
		padding: 1em 0 0 0;
	}
		#divDownloadsRP div.tab.selected
		{
			display: block;
		}
		#divDownloadsRP div.tab table td:last-child
		{
			width: 35.48387096774194%;
		}
	#divDownloads3P
	{
		padding: 1em 0 0 0;
	}
		#divDownloadsRP table.optionsTable td:first-child,
		#divDownloadsRP table.optionsTable td.first-child,
		#divDownloads3P table.optionsTable td:first-child,
		#divDownloads3P table.optionsTable td.first-child
		{
			width: 53.2258064516129%; /* 330 / 620 */
		}
		#divDownloadsRP table.optionsTable td:last-child,
		#divDownloadsRP table.optionsTable td.last-child,
		#divDownloads3P table.optionsTable td:last-child,
		#divDownloads3P table.optionsTable td.last-child
		{
			text-align: center;
			width: 35.48387096774194%; /* 220 / 620 */
			*width: 175px; /* IE 7 fix */
		}

/**
 * CONNECTION DETAILS
 */
#tblBandwidth td 
{
	vertical-align: middle;
	width: 14.91935483870968%;
}

#tblBandwidth td#bandwidth-img
{
	text-align: center;
	width: 20.16129032258065%; 
}

#tblBandwidth td#status-title
{
	width: 20.16129032258065%; 
}

#tblBandwidth td#status-download 
{
	width: 90px;
	max-width: 90px;
}

/**
 * SERVER CONNECTIVITY
 */
#divInfographic 
{
	position: relative;
	background: -moz-linear-gradient(top, rgba(204,244,204,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,244,204,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(204,244,204,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(204,244,204,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(204,244,204,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(204,244,204,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCF4CC', endColorstr='#ffffff'); /* IE6 & IE7 */
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	height: 155px;
	width: 100%;
}
	#divInfographic div 
	{
		float: left;
		height: 100%;
		position: relative;
		text-align: center;
		width: 25%;
		height: 100%;
		z-index: 2;
	}
		#divInfographic div img 
		{
			display: block;
			margin: 35px /* <- lower text below image */ auto 0.2em auto;
			padding: 0 0 2em 0;
		}
		#divInfographic div span
		{
			line-height: 1em;
		}
	#divInfographic #reach_computer
	{
		float: left;
		max-width: 16%;
		z-index: 10;
	}
	#divInfographic #reach_firewall
	{
		max-width: 16%;
		z-index: 5;
	}
	#divInfographic #reach_internet
	{
		width: 47%; /* fill remaining space */
	}
	#divInfographic #reach_servers
	{
		float: right;
		max-width: 20%;
		
	}
	#divInfographic div.pipebg
	{
		background: transparent url('reach_pipe.png') repeat-x center left;
		float: left;
		position: absolute;
		z-index: 50;
		top: 0;
		left: 0;
	}
	
	#divInfographic #reach_servers img
	{
		/* fix because this icon image is larger than the rest */
		margin-bottom: -10px;
	}
	#divInfographic #pipe1
	{
		height: 75%;
		left: 8%; /* offset halfway through computer */
		width: 15%; /* end just through the firewall */
		z-index: 7;
	}
	#divInfographic #pipe2
	{
		height: 75%;
		margin: 0 0 0 22%;
		width: 67%;
		z-index: 1;
	}
	#divInfographic #pipe2.faded
	{
		opacity: 0.25;
		filter: alpha(opacity=25);
	}
	#divInfographic div.connectivity
	{
		
		position: absolute;
		top: 0;
		left: 50%;
		margin: 8% 0 0 -50px;
		width: 45px;
		height: 45px;
	}
	#divInfographic div.connectivity.good
	{
		background: transparent url('reach_check_shadow.png') no-repeat top left;
	}
	#divInfographic div.connectivity.bad
	{
		background: transparent url('reach_x_shadow.png') no-repeat top left;
	}
	#divInfographic div.connectivity.okay
	{
		background: transparent url('reach_alert_shadow.png') no-repeat top left;
	}
	#divInfographic div.connectivity.working
	{
		background: transparent url('reach_spinner.gif') no-repeat top left;
	}
	
/**
 * APPLICATION CONNECTIVITY
 */
#tblAppStatuses #allgood td
{
	vertical-align: middle;
}
#tblAppStatuses td.server
{
	line-height: 35px; /* align server name with middle of icon */
}
#tblAppStatuses td, #tblAppStatuses th
{
	vertical-align: top;
}
#tblAppStatuses td, #tblAppStatuses th
{
	padding: 1em 3em;
}
#tblAppStatuses th:first-child, #tblAppStatuses td:first-child
{
	width: 9.67741935483871%; /* 60 / 620 */
}

div.clear 
{
	line-height: 0em;
	clear: both;
}

#divFooter
{
	border-top: 1px solid #CCCCCC;
	margin-top: 3em;
	padding-top: 0.5em;
}

.contentTab { display: none; }
#footer { display: none; }

@media (max-width: 975px), (max-device-width: 1200px) and (max-aspect-ratio: 1/1)
{
	html, body, .contentAreaRL
	{
		max-width: 100%;
		min-width: 100%;
		width: 100%;
	}
	body 
	{
		font-size: 16px;
	}
	#resMenu
	{
		border-right: 0px;
		border-bottom: 1px solid #636363;
		font-size: 2em;
		position: static;
		width: 100%;
	}
		#resMenu ul
		{
			position: static;
			display: table;
			margin: 0 auto;
			width: 100%;
		}
		#resMenu li 
		{
			display: table-cell;
			*display: inline;
			text-align: center;
		}
		#resMenu li.selected 
		{
			background: none;
		}
	#resContent 
	{
		margin: 0;
		width: 100%;
	}
	
	#divDownloadsRP ul li 
	{
		line-height: 3em;
		height: 3.1em;
		margin-bottom: -0;
		width: 12em;
	}
	#divDownloadsRP ul li.selected
	{
		margin-bottom: -1px;
	}
	#divDownloadsRP ul li.warning
	{
		width: 75px;
	}
	#divInfographic
	{
		height: 200px;
	}
	#divInfographic span
	{
		text-align: center;
		display: block;
		margin: 0 auto;	
		max-width: 110px;
	}
	#divInfographic div img
	{
		margin: 47px /* <- lower text below image */ auto 0.2em auto;
		padding-bottom: 10px;
	}
	#divInfographic div.connectivity
	{
		margin-top: 25px;
	}
}