@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,700);

/* **********************************
			CSS Reset
   ******************************* */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   The purpose of this reset is to reduce inconsistencies between the default display of 
   various elements between browsers. It is intentionally very basic.
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img{ display: block;}


/*  This forces all modern browsers to use a more intuitive box-model. 
	It works on IE 8+ and all modern browsers. */
 *{
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 	}


 /* **********************************
			Base Page Styles
    ******************************* */

 html, body{
 	height:100%; /* neccessary for the footer to stay at the bottom of the viewport on short pages */
 	}

 .page{
 	min-height:100%;
 	/*margin-bottom:-136px;*/ /* should match the height of the footer */
 	}

 .page:after{
 	content: " ";
 	display:block;
 	/*height: 136px;*/ /* should match the height of the footer */
 	}

 footer{
 	/*height:136px;*/ /* this height is the one I'm talking about. Change this, change the above 2 */
 	overflow:hidden;
 	}

 .nav__corporate{
    height: 48px;
    width: auto;
    display: inline-block;
    margin-left: 20px;
    }

/* clearfix class. use this instead of overflow:hidden. add .cf to the container you need to clear it's children. */
.cf:before,
.cf:after {
    content: " ";
    display: table; }
.cf:after { clear: both; }

em{ font-weight:500;}



/* **********************************
			Base Typography
   ******************************* */


body{
 	background: rgb(241, 241, 241) url("../images/paper-alt2b.jpg");
 	color: rgb(88, 88, 88);
 	font-family:'Source Sans Pro';
 	font-size:87.5%;
 	font-weight:300;
 	line-height:1.3;
 	}


 .h1,
 .h1__alt{ 
 	border-bottom:2px solid black; 
 	position:relative;
 	font-style: italic;
 	font-weight:600;
 	font-size:1.3em;
 	padding:0 0 3px 0;
 	margin-top:20px;
 	}

 .h1:before,
 .h1__alt:before{ 
	content: " ";
	position: absolute;
	z-index: -1;
	left: 0;
	width:100%;
	bottom: 1px;
	border-bottom: 1px solid black;
	}

.h1__alt{
	border-bottom: 1px solid rgba(0, 0, 0, .3);
	border-top: 2px solid black;
	margin-top: 10px;
	padding:2px 0 2px 0;
	font-style: normal;
	}
.h1__alt:before{
	top: -4px;
	bottom: auto;
	border-bottom: 0;
	border-top: 1px solid black;
	}

.h2{ 
	font-weight:600; 
	font-size:1.2em;
	}

.h2__alt{
	text-align: center;
	font-style: italic;
	margin-bottom:20px;
	padding:10px 0;
	line-height: 0.5;
	position: relative;
	overflow: hidden;
	}
.h2__alt span{
	display: inline-block;
	position: relative;
	}
.h2__alt span:before,
.h2__alt span:after{
	content: "";
  	position: absolute;
  	height: 1px;
  	border-top: 1px solid rgb(88, 88, 88);
  	top: 50%;
  	width: 600px;
	}
.h2__alt span:before{
	right: 100%;
	margin-right: 15px;
	}
.h2__alt span:after{
	left: 100%;
	margin-left: 15px;
	}

.h3{ 
	font-size: 1.05; 
	font-weight:300; 
	}


 /* Links */

 a:link, a:visited{ 
	color: #337392;
	text-decoration: none;
	font-weight: 600;
 	}


 /* **********************************
			Structural
   ******************************* */

 .page{
 	padding-top:36px; /* top should = the height of the top bar */
 	padding-bottom:50px;
 	z-index:300;
 	}
 .page > .interior{ padding:10px; } /* allows us to set a max-width on the content but still have the ad blocks and bars be full-width */



 /* **********************************
			Navigation
   ******************************* */


.nav a:link, nav a:link{
	text-decoration:none;
	font-weight:300;
	}

.nav__network li, .nav__corporate li{ 
	display: inline-block;
	margin-right: 1em;
	vertical-align: middle;
	padding:6px 0;
	}

.nav__network a, .nav__corporate a{
	color:white;
  	}

 .prop-nav{
	font-size:1.15em;
 	}
 .prop-nav li{ margin-bottom: 7px;}
 .prop-nav .active a{ 
 	color: #333;
	font-weight:600;
 	}


 /* **********************************
			Buttons
   ******************************* */

button{ background: transparent; border: 0;}

.button{ /* the gray button */
	background: #343637;
	border: 1px solid #1D1F20;
	color: #FFF;
	cursor: pointer;
	font-size: 1.1em;
	font-weight: 500;
	padding:.5em .7em .8em .7em;
	position: relative;
	}
a.button{ color: #FFF;}

.button:after{ /* the buttom border of the button. IE8+ */
	display: block;
	content: " ";
	width:100%;
	background: rgba(255, 255, 255, .3);
	position: absolute;
	bottom: 0;
	left: 0;
	height:.3em;
	}

.button__alt{ /* the blue button */
	background: #327291;
	border:1px solid #214E63;
	}

.button__alt2{
	background: transparent;
	border:1px solid black;
	color: black;
	position: relative;
	height:30px;
	float:none;
	padding: 8px 10px 6px 40px;
	}

.button__alt2:after{
	display: block;
	content: " ";
	width:100%;
	background: black;
	position: absolute;
	bottom: auto;
	top:0;
	left: 0;
	height:.3em;
	}


 /* **********************************
			  Icons
   ******************************* */

/*  The entire site uses a single sprite sheet for icons. I was going to use an icon 
	font but we need to support IE7. */

/* all icons need to have this class */
.icon{ background: url('../images/lycos-network-sprite.png') no-repeat top left;}

/* these classes define the size of various types of icons */
.icon-small{ width:16px; height:16px; } /* for small, square icons */
.icon-logo{ width:140px; height:40px; } /* for property logos */
.icon-social{ } /* for social media icons */
.icon-carousel{ 
	width:10px; 
	height:10px;
	} /* for the carousel controls */
.more-articles .button__alt2 .icon{
	background-color:black;
	height:30px;
	width:30px;
	position:absolute;
	top:-1px;
	left:-1px;
	}

/* these help position the icons properly in navigation menu's */
.prop-nav li{ position: relative; padding-left:22px;}
.prop-nav .icon-small{ position:absolute; top:50%; left:0; margin-top: -8px;}

/* these define the position of the background for individual icons. you should never need to change these. */

	/* carousel control icons */
.icon-arrow-left{ background-position: -298px -144px;}
.icon-arrow-right{ background-position: -362px -144px;}
.icon-dot-full{ background-position: -340px -144px;}
.icon-dot-empty{ background-position: -320px -144px;}

	/* social media. use with .icon-social class */
.icon-facebook{ }
.icon-twitter{ }
	
	/* property logo's. use with icon-logo class */
.icon-logo-styleguide{ background-position: -10px -350px;}
.icon-logo__news{ background-position: -20px -50px; }

	/* 16x16px navigation icons. use with .icon-small class */
.icon-home{ background-position:-20px -142px; } /* house */
.icon-star{ background-position:-20px -172px; } /* star */
.icon-heart{ background-position:-20px -202px; }
.icon-film{ background-position:-20px -232px; }
.icon-sports{ background-position:-20px -262px; }
.icon-phone{ background-position:-20px -292px; }
.icon-camera{ background-position:-20px -322px; }
.icon-chart{ background-position:-20px -112px; }

	/* switch to black icon for active sidebar nav */
.active .icon-home{ background-position:-20px -142px; } /* house */
.active .icon-star{ background-position:-20px -172px; } /* star */
.active .icon-heart{ background-position:-20px -202px; }
.active .icon-film{ background-position:-20px -232px; }
.active .icon-sports{ background-position:-20px -262px; }
.active .icon-phone{ background-position:-20px -292px; }
.active .icon-camera{ background-position:-20px -322px; }
.active .icon-chart{ background-position:-20px -112px; }

	/* Network Navigation Icons */
.icon-menu{ background-position: -12px -10px;}
.icon-search{ background-position: -156px -110px;}
.icon-mail{ background-position: -156px -141px; background-color:#1FB880;}
.icon-entertainment{ background-position: -156px -170px; background-color:#54364A;}
.icon-news{ background-position: -156px -200px; background-color:#1B3B69;}
.icon-shopping{ background-position: -156px -230px; background-color:#70893F;}
.icon-games{ background-position: -156px -260px; background-color:#006838;}
.icon-weather{ background-position: -156px -290px; background-color:#3F92AB;}
.icon-domains{ background-position: -156px -320px; background-color:#484C4C;}
.icon-video{ background-position: -156px -350px; background-color:#343637;}
.icon-deals{ background-position: -156px -380px; background-color:#EB4741;}
.icon-angelfire{ background-position: -156px -410px; background-color:#D21F26;}
.icon-gamesville{ background-position: -156px -440px; background-color:#BD171B;}
.icon-hotbot{ background-position: -156px -470px; background-color:#C5000C;}
.icon-tripod{ background-position: -156px -500px; background-color:#53ADDA;}
.icon-weatherzombie{ background-position: -156px -530px; background-color:#53B847;}
.icon-whowhere{ background-position: -156px -560px; background-color:#7BA527;}

.icon-playVideo{ background-position: -300px -170px;}

.right {
    text-align: right;
}

/* Slider Arrows */

.controls .icon-slider.icon{
	width: 10px;
	height: 28px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -14px;
	margin-left: -5px;
	}

/* Slider Social Icons */

.icon-tweet{ }
.icon-facebook{ }
.icon-tweet{ }

.icon-slider-back{ background-position: -339px -104px; }
.icon-slider-forward{ background-position: -360px -104px; }
.dark .icon-slider-back  { background-position: -298px -104px;}
.dark .icon-slider-forward  { background-position: -322px -104px;}

/* ads. Movedc from ads.css */

/* Ads are styled based on their type */

.ad img{
	display:block;
	margin:0 auto;
	}

/* Type A */
/* Traditionally, a 728x90 banner ad. */

.ad__typeA{
	width:100%;
	background:black;
	text-align:center;
	padding:10px;
	}


a:hover{ text-decoration: underline!important;} /* quick and dirty hover style */