/* Nos Encanta Chatear */ 
/* June 2007 edit */

body{ 
	margin: 0;
	background: #413c32 url(images/layout/bg-repeat.jpg) repeat-x;
	text-align: center; }

#wrap{ 
	margin: 0 auto;
	width: 750px;
	text-align: left; }


/* --------------------------------------*/
/* -- choose language links */
p#language{
	margin: 25px 0 5px 0;
	font: 8.5pt 'trebuchet ms', verdana, arial, sans-serif;
	text-align: right; }
p#language a img{ 
	border: none; } /* no border around linked img in ie/ff */
p#language a{ 
	margin: 0 0 0 2px; padding: 8px 12px 5px 12px;
	color: #fff;
	text-decoration: none;
	border-top: solid 1px #908879;
	background: #807665 url(images/layout/lang-bg.gif) repeat-x; }
p#language a.selected{ 
	background: #f5e7e9;
	border-top: solid 2px #908879;
	color: #2D2a23; }
p#language a:hover{ 
	text-decoration: underline;
	background: #f5e7e9;
	color: #f15e67; }
	

/* --------------------------------------*/
/* -- big header */
h1{ 
	margin: 0;
	width: 750px;
	height: 245px;
	background: url(images/layout/header.jpg) repeat-x; /* 750x245 image header */
	border-bottom: solid 3px #2d2a23;
	text-indent:-500em; overflow:hidden; /* image replacement */
	/* the image replacement allows you to have sensical html in the document, which is better for 
		search engines. eg: <h1>this is the site title</h1> .. vs. <h1><img src="sitetitle.jpg" /></h1>. 
		Search engines like the <h1> with text more :D */ }
h1 a{ 
	display: block;
	width: 750px; height: 245px; }
	

/* --------------------------------------*/
/* -- left+right (both left + right) */
#left, #right{ 
	font-family: 'trebuchet ms', verdana, arial, sans-serif; }
	
	
/* --------------------------------------*/
/* -- left sidebar (navigation + ads) */
#left{ 
	margin-right: -560px;
	width:200px;
	float: left;
	background: url(images/layout/left-topbg.jpg) no-repeat top; }
	
#navigation{
	margin-right: 13px; padding: 0 0 15px 0;
	background: #2d2a23 url(images/layout/left-bottombg.jpg) no-repeat bottom left;
	font-size: 10pt; }
	
#navigation ul{ 
	list-style: none;
	margin: 0; padding: 0;}
	
/* - left > top nav (home+tips) */
ul#top{ 
	margin: 0 0 15px 0; padding: 20px 0 0 0; }
#top li{ 
	display: inline; }
#top a{ 
	display: block;
	padding: 5px 15px;
	color: #ffebe8;
	text-decoration: none;}
#top a:hover{ 
	color: #fff;
	font-weight: bold;
	background: #592e26;
	text-decoration: underline; }
	
/* - left > sections (the types of dating websites) */
#sections{ 
	margin: 0; padding: 0; }
#sections li{ 
	display: inline; /*ie margin doubling bug */
	/* background: url(images/layout/nav-normalgradient.jpg) repeat-x; */
	margin: 0; padding: 0px; }
#sections a{ /* the link */
	background: url(images/layout/left-miniheart.gif) 10px no-repeat;
	display: block;
	color: #c2c1bf;
	text-decoration: none;
	padding: 9px 0 9px 35px; /* left padding of 35px so that the text doesn't overlap the image */
	border-top: solid 1px #3b3730; }
#sections a:hover{ /* hovering on the section */
	background: #322e27 url(images/layout/left-miniheart.gif) 12px no-repeat; /* 12px represents the x-value, makes it move to the right by 2px */
	padding-left: 40px; /* makes the text move to the right by 5px */
	color: #fff;
	font-weight: bold; }
	
/* - left > below nav (probably ads?) */
.belownav{ 
	font-size: 8.5pt;
	line-height: 1.5em;
	color: #f15e67;
	width: 185px;
	margin-top: 30px; }
	

/* --------------------------------------*/	
/* -- right content  (right column, content + sitelists appear) */
#right{ 
	text-align: justify;
	width: 525px;
	margin:25px 0 0 224px; }
#wrap > #right{ 
	margin-top: 0; }

#right h2{ 
	background: #533f37;
	color: #f15e67;
	padding: 8px 10px 3px 10px;
	border-bottom: solid 2px #6a443e; }
	
/* - content > blocks of text (for pages such as the legal page) */
.content{ 
	padding: 0 10px;
	color: #d9d8d6;
	font-size: 10pt;
	line-height: 1.4em; }
.content a{ 
	border-bottom: solid 1px #764642;
	color: #f15e67; }
.content a:hover{ 
	color: #fff;
	border-bottom: solid 1px #f15e67;  }
	
/* - right > list of sites */
ul#listofsites{ 
	margin: 0; padding: 0;
	list-style: none;
	color: #d9d8d6;
	font-size: 10pt;
	line-height: 1.4em; }
ul#listofsites li{ /* each site is in a list item tag */
	padding: 5px 10px;
	margin-bottom: 45px;
	border-bottom: solid 2px #49453b; }
ul#listofsites li.alt{ /* alternating background, this is set by javascript */
	border: solid 1px #5d5951;
	background: url(images/layout/right-altbg.jpg) repeat-x; }
ul#listofsites li:hover{ /* <-- doesn't work in IE6, but isn't major functionality :) */
	background: #49453b; }
ul#listofsites img{ /* the preview images are given a border and floated to the right */
	margin: 20px 0 10px 20px; padding: 1px;
 	float: right; 
	border: 4px solid #874a47; }
	
/* - subtitle (title of site you're linking to, or a subtitle for content (ex: legal page for the <h3>'s) */
.content h3,
#listofsites h3 a{
	padding: 2px 2px; 
	color: #fff;
	text-decoration: none;
	border-bottom: solid 1px #994d4d; }
#listofsites h3 a:hover{ 
	background: #533f37;
	border-bottom: solid 1px #be6868; }
	 
	 
/* --------------------------------------*/
/* -- footer */
#footer{ 
	clear: both;
	color: #fff; 
	font: 10pt/1.5 'trebuchet ms', verdana, arial, sans-serif; 
	border-top: solid 10px #fff;
	width: 750px;
	margin: 45px auto; }
#footer a{ 
	border-bottom: solid 1px #764642;
	color: #f15e67; }
#footer a:hover{ 
	color: #fff;
	border-bottom: solid 1px #f15e67;  }

/* - notice box at the bottom (gracias por tu visita [...], email link, legal link) */	
.primarynotice{
	padding: 4px;
	background: #49453b;
	border-top: solid 4px #67635b;
	border-bottom: solid 1px #67635b;  }
.primarynotice a{
	font-size: 9pt; }

/* - two columns for affiliates/other links */
.footcolumn{ 
	float: left;
	text-align: left;
	font-size: 8pt;
	border-top: solid 2px #67635b;
	background: #4b4539;
	padding: 2%;
	margin: 35px 0 0 0;
	width: 315px }
.footcolumn.left{ }
.footcolumn.right{ margin-left: 8%;}