@charset "UTF-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
body  {
	font: 75% Arial, Helvetica, sans-serif;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #333;
	background: #f8981d url(../images/pageBuild/pageBg.gif) repeat-x left 105px;
	position: relative;
}
.bodyadmin {
	background: #f8981d;
}

/* the outer container surrounds EVERYTHING, including the footer. Serves as a hook for min-width on supporting browsers and to add a screened logo locked to the lower right of browser window */
#outerContainer {
	min-width: 800px;
	min-height: 100%;
	position: relative;
	background: url(../images/pageBuild/screenedLogo.png) no-repeat right bottom !important;
	background: url(../images/pageBuild/screenedLogo.gif) no-repeat right bottom; /* alternate image for browsers that don't support png transparency */
}
* html #outerContainer {
	height: 100%;
}

h1 {
	font-size: 1.33em;
	margin-bottom: .67em;
}
h2 {
	font-size: 1.2em;
}
h3 {
	font-size: 1.13em;
}
h4 {
	font-size: 1.07em;
}
h5 {
	font-size: 1em;
}
p {
	font-size: 1em;
	margin-bottom: 1em;
}
ul, ol {
	margin: 0 0 1em 2.67em;
	font-size: 1em;
}
/* ul li ul, ol li ul {
	font-size: 100%; overrides the reduced font size of the parent list 
}*/
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a img {
	border-color: #f8981d;
}
table {
	font-size: 1em;
	margin-bottom: 1em;
}
input:focus, textarea:focus {
	background: #ebe5df;
}

/* the mainContainer surrounds all content that goes above the footer */
#mainContainer { 
	text-align: left; /* this overrides the text-align: center on the body element. */
	min-height: 100%; /* creates a 100% height so that the footer remains at the bottom of the browser window */
	position: relative;
} 
* html #mainContainer {
	height: 100%;
}

/*begin branding div styles */
#branding {
	height: 105px;
	position: relative;
	text-align: left; /* resets text alignment of previous positioning elements */
	background-color: #FFF;
}
#branding h1 {
	font: 1em Arial, Helvetica, sans-serif;
	height: 95px;
	width: 335px;
	position: relative;
	left: 20px;
	top: 5px;
}
#branding h1 span { /* overlays logo image above h1 text */
	background: url(../images/pageBuild/netSpeedFTLogo.png) no-repeat left top;
	height: 100%;
	width: 100%;
	position: absolute;
}
#branding h2 {
	display: none;
}
#branding h3 {
	font: 1em Arial, Helvetica, sans-serif;
	height: 40px;
	width: 350px;
	position: absolute;
	left: 300px;
	top:5px;	
}
#branding h3 span {
	background: url(../images/pageBuild/officialLaunch.gif) no-repeat left top;
	height: 100%;
	width: 100%;
	position: absolute;
}
#searchArea {
	position: absolute;
	right: 0px;
	top: 65px;
	margin-right: 1.33em;
}
#searchArea  input#searchField {
	width: 200px;
	margin-right: .67em;
}
#searchArea input#search {
	color: #ebe5df;
	background: #7d6a55;
	width: 5em;
}
/* end branding div styles */

/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/

/* begin leftColumn div styles */
#leftColumn {
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 22%; /* since this element is floated, a width must be given */
	text-align: left; /* resets text alignment of previous positioning elements */
	display: inline;
	position: relative;
	padding-top: 50px;
}
#leftColumn  div, #rightColumn div {
	margin: 0 1.33em 1.33em;
}
#signIn {
	margin-bottom: 1.33em;
}
#signIn label {
	display: block;
	margin-bottom: .33em;
	color: #ebe5df;
	font-size: 1em;
}
#signIn input {
	width: 100%;
	max-width: 200px;
	margin-bottom: 1em;
	display: block;
}
* html #signIn input {
	width: 200px; /* fixes width issue in IE6 */
}
#signIn input#submit {
	width: 6.67em;
}
#signIn ul, #subscribeList {
	list-style: none;
	margin: 0; /* overrides default ul margin */
}
#signIn li, #subscribeList li {
	margin-bottom: .25em;
}
#signIn li a, #subscribeList   li  a {
	color: #ebe5df;
	text-decoration: none;
}
#signIn li a:hover ,#subscribeList li a:hover {
	color: #FFFFFF;
}

#leftColumn #getFirefox { /* get firefox message for all lt IE 7 users */
	max-width: 200px;
	line-height: 1.33em;
	margin-top: 0;
	background: #333;
	color: #ebe5df;
	padding: .67em;
}
#leftColumn #getFirefox a {
	color: #FFF;
	font-weight: bold;
	text-decoration: underline;
}
#leftColumn #getFirefox a:hover {
	text-decoration: none;
}
head:first-child+body #leftColumn #getFirefox { /* hides get firefox message from compliant browsers */
	display: none;
}
/* end leftColumn div styles */

/* begin rightColumn div styles */
#rightColumn {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 23%; /* since this element is floated, a width must be given */
	text-align: left; /* resets text alignment of previous positioning elements */
	display: inline;
	position: relative;
	padding-top: 50px;
}
#registerButton {
	background: #7d6a55;
	width: 6em;
	color: #ebe5df;
}
/* end rightColumn div styles */

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/

/* begin mainContent div styles */
#mainContent { 
	margin: 0 24% 0 23.5%; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	text-align: left; /* resets text alignment of previous positioning elements */
	min-height: 400px;
	position: relative;
	padding-top: 50px;
}
* html #mainContent {
	height: 400px;
}
#mainContent div {
	margin: 0 0 1.33em;
}
.containerBox {
	background: url(../images/pageBuild/containerBoxBg.png);
	border: 1px solid #ebe5df;
	padding: 2em 1.33em 1.33em;
	position: relative;
	margin-top: 2.67em;
	margin-bottom: 2.67em;
}
* html .containerBox {
	background: #efd4b1;
}
div.containerBox h6 {
	font-size: 0.87em;
	background: #7d6a55;
	padding: .67em;
	border: 1px solid #ebe5df;
	display: inline;
	position: absolute;
	left: 3.33em;
	top: -10px;
	color: #ebe5df;
}
* html div.containerBox h6 {
	left: 1.33em;
}
.containerBox a {
    color: #3e2c1d; /* #ebe5df; makes links inside of the containerBox 12.5% tint of the warm gray */
	text-decoration: underline; /* overrides default decoration of �none� and underlines all links inside of the containerBox */
}

.containerBox a:hover {
    color: #fff; /* makes links inside of the containerBox white when hovered over */
    text-decoration: none; /* overrides devault decoration of �underline� and removes underline on all links inside of the containerBox when hovered over */
}
.contentContainer, .podSpotContainer , .adminContainer{
	border: 1px solid #7d6a55;
	padding: 1.33em;
	background: #fff url(../images/podSpots/podSpotContainerBg.png) no-repeat left top;
	min-height: 120px;
	position: relative;
}
* html .contentContainer, * html .podSpotContainer, * html .adminContainer{
	height: 120px;
}
.podSpotContainer {
	padding: 1.33em 165px 1.33em 1.33em;  /* right value was 200px */
}
.adminContainer {
	background: #fff; 
}
.contentContainer h1, .contentContainer a, .podSpotContainer h1, .podSpotContainer a, .adminContainer h1, .adminContainer a {
	color: #f8981d;
}
.contentContainer a:hover, .podSpotContainer a:hover, .adminContainer a:hover {
    color: #7d6a55; /* #3e2c1d; /* #ebe5df12.5% tint of the warm gray */
	/* text-decoration: none; overrides devault decoration ofunderline and removes underline on all links inside of the containerBox when hovered over */
}
.avatarLink a img {
	border: 2px solid #f8981d;
}
.avatarLink a:hover img {
	border: 2px solid #ebe5df;
}
.avatarLink {
	background: url(../images/podSpots/avatarBg.gif) no-repeat left top;
	height: 150px; 
	width: 135px; /* was 166 */
	position: absolute;
	top: 1.33em;
	right: 1.33em;
	text-align: center;
}
.avatarLink h2 {
	color: #FFFFFF;
	margin: 0.5em 1em .5em;
	text-align: left;
}
.avatarFigure{
	height: 100px; 
	width: 133px; /* was 166 */
	position: absolute; /* was absolute */
	top: 1.33em;
	right: 1.33em;
	text-align: center;
}
.articleLead h1 span {
	font: normal 1em Arial, Helvetica, sans-serif;
	color: #333333;
}
.articleLead {
    border-top: 1px solid #7d6a55;
    /* padding-bottom: 1em;*/
    padding-top: 1.33em; 
	margin: 1.33em;
    min-height: 135px; /* was 115, but in Firefox, the rule (border-top) was not clearing the image if the text was short, which caused the next <li> to cascade indent. */
}
.articleLead:first-child {
    border-top: none;
}


* html .articleLead {
    height: 115px; 
}
.articleLead a img {
	float: left;
	display: inline;
	margin: 0 .67em .67em 0;
	border: 2px solid #7d6a55;
}
.articleLead a:hover img {
	border: 2px solid #f8981d;
}
#podSpotList {
	font-size: 100%;
	list-style: none;
	margin-left: 0;
}
#podSpotList li {
	margin-bottom: 2.67em;
}
#podSpotList li h1.premiumIcon {
	padding-left: 35px;
	background:url(../images/podSpots/premiumIcon.png) no-repeat left bottom !important;
	background:url(../images/podSpots/premiumIcon.gif) no-repeat left bottom;
	line-height: 20px;
}
#podSpotList li h1.memberIcon {
	padding-left: 35px;
	background:url(../images/podSpots/memberIcon.png) no-repeat left bottom !important;
	background:url(../images/podSpots/memberIcon.gif) no-repeat left bottom;
	line-height: 20px;
}
div.premiumText {
	background:url(../images/podSpots/premiumText.png) no-repeat left top !important;
	background:url(../images/podSpots/premiumText.gif) no-repeat left top;
}
div.memberText {
	background:url(../images/podSpots/memberText.png) no-repeat left top !important;
	background:url(../images/podSpots/memberText.gif) no-repeat left top;
}
div.premiumText h1, div.memberText h1 {
	padding-top: 2em;
}
#mainContent #signIn label {
	color: #7d6a55; /* overrides color of #signIn label from leftColumn */
}
#mainContent #signIn li a {
	color: #7d6a55; /* overrides color of #signIn links from leftColumn */
	text-decoration: underline;
	}
#mainContent #signIn li a:hover {
	text-decoration: none;
	}

#mainContentWide { 
	margin: 0 0 0 24%; /* Like mainContent except right margin is zero */
	text-align: left; /* resets text alignment of previous positioning elements */
	min-height: 400px;
	position: relative;
	padding-top: 50px;
}
* html #mainContentWide {
	height: 400px;
}
#mainContentWide div {
	margin: 0 0 1.33em;
}
.interviewClip{
	background: #f4e8d0;
}
.interviewClip a{
	margin: 0px; 
	padding: 0px;
	font-size: 1em;
	/* line-height: 0px; */
}
.interviewCallout {
	font-weight: bold;
	font-style: italic;
}
	
/* end mainContent div styles */

/* begin footer div styles */
#contentClear { /* clears floated elements above footer */
	clear: both;
	height: 45px;
}
#footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	min-height: 30px;
	margin-top: -45px;
	position:relative;
	text-align: left;
	border-top: 1px solid #ebe5df;
	padding-top: 10px;
}
* html #footer { 
	height: 30px;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-size: 0.87em;
	color: #7a3f0a;
}
#footer a {
	text-decoration: underline;
	color: #7a3f0a;
}
#footer a.external {
	text-decoration: none;
}
#footer a:hover {
	color: #fff;
	text-decoration: none;
}
#footer p.floatLeft a {
	padding: 0 .5em;
}
#avatarShell {
	margin: 0px;
	padding: 0px;
	background: #efd4b1;
	text-align: left; 
}
/* end footer div styles */
input[type="button"] {
	background: #7d6a55;
	color: #ebe5df;
}
/* begin miscellaneous classes for reuse */
.button6em {
	background: #7d6a55;
	width: 6em;
	color: #ebe5df;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.floatRight {
	float: right;
	display: inline;
	margin-left: 7px;
}
.floatLeft {
	float: left;
	display: inline;
	margin-right: 7px;
}
.orange {
	color: #e59504;
}
.errormessage {
	font-weight: bold;
	color: #E02020;
}
.successmessage {
	font-weight: bold;
	color: #2020E0;
}
.inline {
	display: inline;
}
.articleFloat{
	padding-left: 10px; 
	margin-left: 10px; 
	border: none; 
	width: 220px; 
	float: right; 
	display: inline;
}
.biobox{
	background: #ebe5df; 
	border: 1px solid #c9c1b9;
	color: #333;
	padding: 7px 10px 15px 10px;
	width: 200px;
	margin-left: 7px;
	/* clear: both;
	margin: 20px 100px 15px 100px;
	overflow: hidden; */
	float: right;
	display: inline;
}
.biobox img{
	margin: 5px .67em 0 0;
}

IMG.centered {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
.hilite-yellow{
	background: #ffff00; 
}

/* end miscellaneous classes for reuse */