/* This Stylesheet is meant to be used as the base stylesheet across the entire Lycos Network of sites. */

/* CSS RESET */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}

/* Universal border-box box model */

*{ 
	box-sizing: border-box; 
	-moz-box-sizing: border-box;
	}
	
/* Other Resets and Overrides */

input:-webkit-autofill{ /*revisit this when we have registration and login forms. for now it's not needed on search */
	background: white;
	}

/* Base Type & Color */
/* 
	Brand Colors:

	- White: 		#FFFFFF 	255,255,255 	Backgrounds & Text on Dark Colors
	- Black  	 	#000000 	0,0,0 			Logo's and Critical Information
	- Dark Grey   	#686868 	104,104,104 	Titles & Text
	- Light Gray  	#8C8C8C 	140,140,140 	Footers and Unimportant Text
	- Light Blue  	#6D8AC6 	109,138,198 	Calls to Action & Buttons (Also Links)

	– There are additional variations on gray used throughout the network. I will attempt to standardize 
	  them here as pages are built.

	Other Colors (derivitives of brand coors for interaction, error messaging, etc.)

	– Red 			#dc6851 	11,77,78,1 		Error Messages, use sparingly
	– Green 		#b8cb78 	35,10,76,0 		Success Messages, use sparingly

	Fonts:

	- Proxima Nova 300 		Body Copy
	- Proxima Nova 700 		Titles
	- Proxima Nova 600 		Subtitles

	- Lycos Custom Font 	For Logo's. Will Never Appear in CSS as the 
							glyphs do not exists as a useable font file.

*/


/* Contents */
/*

	1. Base Styles
		HTML & Body Styles
		Overal Typography - links, footers, paragraph text
		Buttons
		Helper Classes (ie 16:9 aspect ratio, etc)
	2. Search Boxes
	3. Network Panel
	4. Top Bar
	5. Footer Bar
	6. Pagination

*/


html, body{
	height:100%;
	margin: 0;
	padding: 0;
	}

body, input, textarea{
	font-family: proxima-nova, "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
	font-weight: 300;
	color: #686868;
	text-rendering: optimizelegibility;
	line-height: 1.3;
	}

.title{ /* Bold Weight, for Titles */
	font-weight: 700;
	letter-spacing: .5px; /* give the heaver fonts some breathing room */
	}

.subtitle{ /* Semi-Bold Weight, for Titles */
	font-weight: 600;
	letter-spacing: .5px; /* give the heaver fonts some breathing room */
	}

.fine-print{ /* for footers and less important text */
	color: #8c8c8c;
	}

a:link, 
a:active,
a:visited,
a:hover{
	color: #6d8ac6; /* Light Blue for Links */
	text-decoration: none;
	border-bottom: 1px solid #8faae0; /* slightly lighter underline */
	}

/* 	Add this class to any block that needs to have a 16:9 aspect ratio. 
	It's width must be defined by that of it's parent in order for the 
	aspect ratio to be maintained. */

.ar-16-9{ 
	height: 0;
	padding: 56.25% 0 0 0;
	display:block;
	position: relative;
	overflow:hidden;
	width: 100%;
	}

/* Buttons */

.button{ /* all buttons */
	border: 0;
	padding: 5px;
	cursor: pointer;
	}
.button-primary{ /* blue background, white text */
	background: #6D8AC6;
	color: #FFF;
	}
.button-secondary{ /* gray background, white text */
	color: #FFF;
	background: #8C8C8C;
	}
.button-clear{ /* white background, gray text */
	color: #686868;
	background: #FFF
	}
.button-disabled{
	}	

b{ font-weight: 700; }

/*************************************
 			Search Boxes 
 *************************************/

/* HTML Structure: 

	<div class="search search-full">
		<form class="search-form">
    		<fieldset class="search-fieldset">
        		<input class="search-input" type="text" placeholder="Search...">
        		<button class="button button-clear button-search"><span class="icon icon-search"></span></button>
    		</fieldset>
		</form>
	<div class="search-options">Search Web</div>

	</div><!-- end search-full -->

	All search boxes are in a container called .search, al of these containers 
	have a modifying class of either .search-full, .search-simple, or .search-micro 
	according to their usage.

	.search-options should only be included in search modules with the .seach-full class.

	.search-full is for seach bars in site headers.

	.search micro is for search boxes in the site headers of secondary properties where the 
	search is for within that property, rather than the web as a whole.

*/

.search{	
	display: inline-block;
	vertical-align: middle;
	position: relative;
	}

.search input{
	width: auto;
	color: #000;
	font-weight: 600;
	border: 4px solid #FFF;
	}

.search input:focus{
	border:4px solid black;
	outline: 0;
	}

::-webkit-input-placeholder{ font-weight: 300; }
:-moz-placeholder{ font-weight: 300; }
::-mox-placeholder{ font-weight: 300; }
:-ms-input-placeholder{ font-weight: 300; }

.search-full,
.search-full input{ 
	height: 40px; 
	font-size:1.1em;
	padding:0 0 0 10px;
	line-height: 40px;
	} 
.search-simple,
.search-simple input{ 
	height: 34px; 
	font-size:1.2em;
	line-height: 34px;
	}
.search-full input,
.search-simple input{ 
	border: 2px solid #686868; 
	}

.search-full .search-form{
	padding:0;
	}
.search-full .search-form{
	display: table-cell;
	width:100%;
	}
.search-full input{ width: 100%; }
.search-full .search-options{
	display: table-cell;
	padding:0 15px;
	position: relative;
	}

.search-options a{ color: #696868; }

.so-submenu{ 
	display: none;
	background: #FFF;
	min-width: 100%;
	position: absolute;
	left: 0;
	text-align: left;
	font-size: .9em;
	}

.so-submenu-list{
	background: #FFF;
	min-width: 100%;
	margin-top: 16px;
	padding: 0 15px;
	border: 1px solid #8C8C8C;
	border-top: 1px solid #FFF;
	}

.search-options:hover .so-submenu{ display: block;}

.search-micro, .search-micro input.search-input {
	width: 100%;
	height: 50px;
	line-height: 32px;
	padding: 0;
	font-size: 1.05em;
	}
.search-micro form.search-form{ height:50px;}
.search-micro input.search-input:focus{
	border: 4px solid #686868;
	}

.search-micro input.search-input{
	padding:5px 10px; 
	border: 2px solid #686868;}
.search-micro input::-ms-clear { display: none;}

.search-micro button{
	width:50px!important; /*override jquery ui */
	height: 50px;
	position: absolute;
	top:0;
	right:0;
	margin: 0!important;
}


.search-micro .button-search{
	background: url(http://ly.lygo.com/ly/LycosTV/img/search.png) no-repeat 9px 10px;
}

.search-micro .button-clear{
	background: url(http://ly.lygo.com/ly/LycosTV/img/search-clear.png) no-repeat 9px 10px;
}



.search-simple .button-search{
	width:40px;
	height: 40px;
	position: absolute;
	top:0;
	right:0;
	background: url(http://ly.lygo.com/ly/LycosTV/img/search.png) no-repeat 7px 6px;
	}

.search-options{
	display:inline-block;
	font-weight: 600;
	text-transform: uppercase;
	color: #696868;
	}

.search-numbers{
	display: inline-block;
	font-weight: 600;
	color:#8C8C8C;
	color: #afafaf;
	letter-spacing: 1px;
	text-transform: uppercase;
	}	


/*************************************
 			Network Panel 
 *************************************/

/* This is the panel that slides in from the side on sites that share the main Lycos look-and-feel, 
   but that do not use the Network top bar and footer. There are a couple variations on the content 
   of the panel, but the style is generally the same.*/

.network-toggle{
	}

.network-panel .cta{ font-size: .9em; padding:20px 0 0 0;}

.network-panel{
	position:fixed;
	top:0;
	left:-245px;
	width: 250px;
	height: 100%;
	background: #000;
	color: #FFF;
	z-index: 200;
	white-space: normal;
	padding:0 10px;
	transition: left .3s ease;
	}

.network-panel .logo{
	border-bottom:1px solid #8C8C8C;
	}

.network-panel.active{
	left:0;
	transition: left .3s ease;
	overflow: auto;
	}

.nw-properties{
	margin-top: 20px;
	padding: 0 0 20px 0;
	}
.nw-properties li{
	padding:5px 0 5px 10px;
	font-weight: 600;
	cursor: pointer;
	}

.nw-footer{
	font-size: .8em;
	position: absolute;
	padding:10px 0 0 0;
	margin-right: 10px;
	bottom:10px;
	text-align: center;
	border-top:1px solid #8C8C8C;
	}

.nw-footer-nav{ 
	text-align: justify;}

.nw-footer-nav a{ color: #FFF;}

.nw-footer li{ 
	display: inline-block;
	padding: 5px;
	width:30%;}

.network-panel a,
.network-panel a:link,
.network-panel a:active,
.network-panel a:visited,
.network-panel a:hover{
	border: 0;
	text-decoration: 0;
	color: #FFF;
	}
	
.network-panel a:hover{
	color: #6d8ac6; /* Light Blue for Links */
	}

li.nw-copyright{ width: 100%; padding:5px 0 0 0;}

/* Icons */

.network-panel .icon{
	display: inline-block;
	vertical-align: middle;
	margin-right:5px;
	width: 30px;
	height:30px;
	background: url('http://ly.lygo.com/ly/LycosTV/img/lycosPopertyIcons-30.png') no-repeat top left;
	}
	
.network-panel .icon.icon-lycos{ background-position:0 0; }
.network-panel .icon.icon-mail{ background-position:0 -278px; }
.network-panel .icon.icon-news{ background-position:0 -313px; }
.network-panel .icon.icon-entertainment{ background-position:0 -380px; }
.network-panel .icon.icon-chat{ background-position:0 -485px; }
.network-panel .icon.icon-shopping{ background-position:0 -416px; }
.network-panel .icon.icon-gamesville{ background-position:0 -105px; }
.network-panel .icon.icon-tripod{ background-position:0 -175px; }
.network-panel .icon.icon-domains{ background-position:0 -243px; }
.network-panel .icon.icon-weather{ background-position:0 -451px; }
.network-panel .icon.icon-whowhere{ background-position:0 -71px; }
.network-panel .icon.icon-hotbot{ background-position:0 -37px; }
.network-panel .icon.icon-angelfire{ background-position:0 -210px; }
.network-panel .icon.icon-lycostv{ background-position:0 -520px; }


/*************************************
 			Top Bar
 *************************************/

/* There are a few basic variations on the site header. All of them have a white background and are 
   fixed at the top of the viewport.

   1. Home Page Header (.header-home)
   		- 70px high
   		- No bottom border
   		- Contains a simple list of properties

   	2. Interior Lycos.com Header (.header-primary)
   		- 70px high
   		- 1px bottom border
   		- three columns, layed out using CSS Tables
   			- Column 1: Logo
   			- Column 2: Search
   			- Column 3: Flex (search numbers, products link, etc. varies by page)

   	3. Secondary Product Header (.header-secondary)
   		- 50px high
   		- 1px bottom border
   		- four columns
   		   	- Column 1: Network Panel Toggle
   			- Column 2: Logo
   			- Column 3: Property Navigation
   			- Column 4: Property Search

*/

.header-home{ /* hh- */
	height: 70px;
	}

.header-primary{ /* hp- */
	height: 70px;
	border-bottom:1px solid #8C8C8C;
	display: table;
	padding: 0;
	}

.header-secondary{ /* hs- */
	height: 50px;
	border-bottom:1px solid #8C8C8C;
	display: table;
	padding: 0;
	}

.header-cell{ /* Add this class to each 'column' in a header */
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	white-space:nowrap;
	}

.header{ 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFF;
	z-index: 100;
	}

.header a{ text-decoration: none; border-bottom:0;}

/* Primary Header Columns */

.hp-logo{
	width: 215px;
	padding:0 10px;
	}

.hp-logo img{ 
	display: inline-block;
	vertical-align: middle;
	margin: 15px 0;
	}

.hp-search{
	max-width: 450px;
	padding:0 20px;
	}

.hp-flex{ 
	padding:0 30px;
	font-weight: 600;
	color:#8C8C8C;
	color: #afafaf;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: right;	
	}	

/* Secondary Header Columns */	

/* Network Panel Access Icon */

.menu-icon{
	display: inline-block;
	width: 70px;
	height:70px;
	position: relative;
	vertical-align:middle;
	margin-right: 10px;
	transition: all .3s ease;
	cursor: pointer;
	}
.menu-icon .line1,
.menu-icon .line2,
.menu-icon .line3{
	width: 25px;
	height:4px;
	display: block;
	opacity: 1;
	background: #000;
	position: absolute;
	left: 22px;
	transition: all .3s ease;
	}
.menu-icon .line1{ top: 25px; }
.menu-icon .line2{ top: 33px;}
.menu-icon .line3{ top: 41px;}

/* Network Panel Access Icon Active */
.menu-icon.active{
	background: #000;
	transition: all .3s ease;
	-webkit-transition-delay: .3s; /* Safari */
	}
	
.menu-icon.active .line1,
.menu-icon.active .line2,
.menu-icon.active .line3{
	background: #FFF;
	transition: all .3s ease;
	}
	
/* Need an image fallback for IE8. Will look the same, but lack the transition animation */	
.menu-icon.active .line1{
	-moz-transform: rotate(45deg) translateY(4px) translateX(3px);
	-webkit-transform: rotate(45deg) translateY(4px) translateX(3px);
	-o-transform: rotate(45deg) translateY(4px) translateX(3px);
	-ms-transform: rotate(45deg) translateY(4px) translateX(3px);
	transform: rotate(45deg) translateY(4px) translateX(3px);
	transition: all .3s ease;
	}
.menu-icon.active .line2{
	opacity: 0;
	transition: all .3s ease;}
.menu-icon.active .line3{
	-moz-transform: rotate(-45deg) translateY(-9px) translateX(7px);
	-webkit-transform: rotate(-45deg) translateY(-9px) translateX(7px);
	-o-transform: rotate(-45deg) translateY(-9px) translateX(7px);
	-ms-transform: rotate(-45deg) translateY(-9px) translateX(7px);
	transform: rotate(-45deg) translateY(-9px) translateX(7px);
	transition: all .3s ease;
	}

 /* ***** */


.hs-logo{
	width: 179px;
	padding:0 10px 0 0;
	}

.hs-logo img{ 
	display: inline-block;
	vertical-align: middle;
	margin: 20px 0;
	height: 29px;
	}

.hs-central{
	width: 100%;
	text-align: center;
	}

.hs-flex{ 
	padding:0 30px;
	font-weight: 600;
	color:#8C8C8C;
	color: #afafaf;
	letter-spacing: 1px;
	text-transform: uppercase;	
	}	

/* Logo Variations */

.logo-full-small{
	width: auto;
	float:left;
	}
.logo-full-small img{
	height: 40px;
	}

/* Override jQuery UI CSS */

.ui-input-text, .ui-input-search {
	margin: 0!important;
	border-width: 0!important;
	border-style: transparent!important;
	}
	


/*************************************
			Footer Bar 
*************************************/

/* Like the Network Panel, there are some variations here but the base styling is fairly consistent. */

.network-footer a{ border-bottom: 0; text-decoration: none;}


/*************************************
			Pagination
*************************************/

.pagination{
	width: 100%;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
	}

.pagination li{
	display: inline-block;
	padding: 2px 1%;
	}

.pagination a{ 
	text-decoration: none; 
	padding:0 5px;
	border: 1px solid transparent;
	transition: border .8s ease;
	}

.pagination a:link,
.pagination a:active{ color: #686868; }
.pagination a:visited{ color: #8C8C8C; }

.pagination a:hover{ 
	color: #000; 
	border: 1px solid #8C8C8C;
	transition: border .3s ease;
	}

.pagination .active span{  
	cursor: default;
	color: #DADADA; }
.pagination .active span:hover{
	border-color: #FFF;
	}