/*---------CSS for www.FreeUKDating.org------------------*/
 
/*---------Omnipresents--------------------*/
* { margin: 0; padding: 0; }

body
{
	font: 76% "Lucida Grande", Arial, Helvetica, sans-serif;
        line-height: 1.4em;
	text-align:  center; 
       background:url(../img/bodybg.jpg) repeat-x 0px 0px;       
}

ul,ol {list-style-position:inside; }
ul {list-style-image:url(../images/5.png); }

img {border:none;}
img a {text-decoration:none; border:none;}

a:link {color:#a96566; text-decoration:none}
a:visited {color:#cb8788; text-decoration:none;}
a:hover {color:red;text-decoration: none;}
a:active {color: red;}

h1 {font-weight:normal; font-size:1.8em; color:#000; font-weight:bold; font-family:georgia, times, verdana, sans-serif; font-variant:small-caps; }
h2 {color:#000; font-size:1.2em; font-weight:bold; font-family:georgia, times, verdana, sans-serif; font-variant:small-caps;}
h3 {color:#000; font-size:1em; font-family:georgia, times, verdana, sans-serif; font-variant:small-caps;}
h5 {color:#000; font-size:0.7em; line-height:0em; font-family:georgia, times, verdana, sans-serif; font-variant:small-caps;}

input, textarea {font-family: Verdana, Arial, Helvetica, sans-serif;}

strong {}

ul.lpsectionlist {background:url(../images/1.gif) no-repeat center bottom; padding:20px 43px 25px 10px ; font-size:0.85em; line-height:1.3em; list-style:none; text-align:center; }
ul.lpsectionlist li { display:inline; margin-left:15px; }

li a.active {color:red; background:#ffd; }

/*--------Website Structure-----------------*/

#wrapper
{
	text-align:  left;
	margin: 0 auto ;
	clear: both;
	width:  776px;
 }

/*----Space at Top for Logo and Graphics-----*/

#top, #lptop
{
	width:  776px;
	clear:both;
	float:left;
	position:relative;
	overflow:hidden;
	height: 286px;
        background:url(../img/webpage.jpg) no-repeat 376px 37px; 
}

.logo a img {border:none; text-decoration:none;}

.logo { margin:20px 0 0 45px;
padding-right:62px; display:block; float:left; background:url(../img/heart.gif) no-repeat 170px 0; width:auto; height:50px;}
.logo:hover {background-position:170px -50px;}
.logo img {margin:15px 0 0 0;}

#top ul {position:absolute; top:124px; left:5px; list-style:none; text-indent:-9999px;}
.one {background:url(../img/tosp.gif) no-repeat 0 0; height:90px; width:380px; }
.two {background:url(../img/tosptop.gif) no-repeat 0 0; height:66px; width:380px; }
.three {background:url(../img/bullet3.gif) no-repeat 0 0; height:42px; width:380px; }

#lptop ul {position:absolute; top:102px; left:5px; list-style:none; text-indent:-9999px;}
.lptitle{height:35px; width:500px; text-indent:0px;}
.lptitle img {margin-left:4px;}
.lp1 {background:url(../img/lp1.gif) no-repeat 0 0; height:51px; width:323px; }
.lp2 {background:url(../img/lp2.gif) no-repeat 0 0; height:49px; width:350px; }
.lp3 {background:url(../img/lp3.gif) no-repeat 0 0; height:37px; width:304px; }

#lptop img {float:left;}


#top p, #lptop p
{
	margin:34px 150px 0 24px;
/*--The Right Margin here is set to keep the #topcorner away in opera.  If you change the text here, you should also adjust the value for margin-right------*/
	color:#666;
	float:left;
	font-size:0.7em;
}


/*-----Div for Logo and Nav Elements---------*/

#banner
{
	clear: both;
	width: 755px;
	height: 140px;
}

#graphic
{
	width: 568px;
	height: 140px;
	float:left;
	background:url(../img/graphic.jpg)  no-repeat 5px center;
	text-indent:-9999px;
}

#nav
{
	width:187px;
	height:140px;
	float:left;
        text-indent:-9999px;
}

#nav li {list-style: none;
	display: inline; }

.home,.about,.faq,.journal,.contact
{
	height: 28px;
	width: 187px;
	cursor:pointer;
	float:left;
}

/*---Settings For Default (off) Navigational States----*/
.home  {background:url(../img/home_off.jpg) no-repeat;}
.about  {background:url(../img/about_off.jpg) no-repeat;}
.faq  {background:url(../img/faq_off.jpg) no-repeat;}
.journal  {background:url(../img/journal_off.jpg) no-repeat;}
.contact  {background:url(../img/contact_off.jpg) no-repeat;}

/*---Settings for On and Hover States---------*/
#home .home  {background:url(../img/home_on.jpg) no-repeat;}
#about .about  {background:url(../img/about_on.jpg) no-repeat;}
#faq .faq  {background:url(../img/faq_on.jpg) no-repeat;}
#journal .journal  {background:url(../img/journal_on.jpg) no-repeat;}
#contact .contact  {background:url(../img/contact_on.jpg) no-repeat;}

.home:hover {background:url(../img/home_on.jpg) no-repeat;}
.about:hover   {background:url(../img/about_on.jpg) no-repeat;}
.faq:hover  {background:url(../img/faq_on.jpg) no-repeat;}
.journal:hover  {background:url(../img/journal_on.jpg) no-repeat;}
.contact:hover  {background:url(../img/contact_on.jpg) no-repeat;}



/*-----TagLine - I added this section to add pertinent text below the banner-----*/

#tagline
{
	height:30px;
	clear:both;
	float:left;
        position:relative;
}

/*-----Main Content Section--------------*/

#content
{
	width: 776px;
	position: relative;
	clear: both;
	float: left;
	height: auto;
	overflow: hidden;
        background:url(../img/content_top.jpg) no-repeat 0 0;
	color:#222;
	line-height:1.4em;
        margin-bottom:50px;
        text-align:center;
}

/*------Left Side of the Content------------*/

#left
{
	width:410px;
	height: auto;
	float: left;
	clear: none;
        position:relative;
        overflow:hidden;
        text-align:left;

	}

#wideleft
{
	width:570px;
	height: auto;
	float: left;
	clear: none;
        position:relative;
        overflow:hidden;
text-align:left;

	}

.frontbutton {text-align:center; float:left; width:130px; margin:20px 0 0 0;}
.frontbutton img {border:none; margin-top:10px;}

.frontbutton:hover h2 {color:red;}

.article {padding:20px; }

.salescopy {background-color:#fff;float:left; margin:20px 50px 20px 30px; color:#666; border:1px dashed #ffc7ff; padding:20px; font-size:0.8em; line-height:1.3em;}
.salescopy p{margin-top:5px;}

.salesblurb { margin:26px 30px 0px 20px; background-color:#fff;  border:1px dashed #d62994; padding:20px;}
.salesblurb img {float:right; margin:0 0 0px 20px; }
.salesblurb p {clear:left; color:#333; font-size:1.1em; font-weight:normal; }
.salesblurb h1 {line-height:1.1em; font-size:1.3em; letter-spacing:-0.5px; width:320px; float:left; margin-bottom:10px; font-family:Arial, Verdana, san-serif; font-variant:normal;}

.label {margin:20px 0 20px 97px;}
.rightlabel {margin:20px 0 50px 0;}

.homebutton {margin:30px auto;}
.lpbutton {margin:50px 0 0 20px; float:left;}





/*-------------Right Side of Content---------------*/

#right
{
	width:360px;
	height: auto;
	float: left;
	clear: none;
        text-align:center;
}

#narrowright
{
	width:190px;
	height: auto;
	float: left;
	clear: none;
text-align:left;
}

#right li {list-style:none; width:220px; margin:3px auto; border-top:1px dashed #fb94db; padding:6px 0 2px 0;}

#narrowright img{margin:20px 0 0 5px; }

.email {font-size:0.8em; padding:15px; line-height:1.4em; text-align:center; color:#4dc5d6; }

.instruction {border-left:1px solid #ccc; line-height:1.2em; margin:20px 10px 0 0; padding-left:13px; font-size:1em; color:#666; }

.instruction img {float:left; margin:10px 10px 10px 0;}
.instruction p img {margin:0 10px 20px 0; }
.instruction p {margin-bottom:10px;}
.instruction strong {background-color:#fff;}

.comment {margin:10px 0 0 5px; padding-top:12px; background:url(../img/topcomment.gif) no-repeat top left;}
.midcomment {color:#d52490; font-style:italic; padding:10px 38px 5px 15px; font-size:0.9em;background:url(../img/midcomment.gif) repeat-y top left;}
.botcomment {background:url(../img/botcomment.gif) no-repeat top left; padding:13px 0 0 27px; height:30px; font-weight:bold; color:#4dc5c6; font-variant:small-caps;}

/*----------Footer Layout and Formatting--------------*/

#footer
{
	clear:  both;
	width:  100%;
        height: 225px;
	position:  relative;
	margin: 30px auto 0 auto;
	overflow:  hidden;
	text-align:center;
	font-size:0.8em;
        background:url(../img/footer_bg.jpg) repeat-x 0 30px;
}

#footer_top
{
        background:url(../img/footer_top.jpg) no-repeat center 30px;
        width:776px;
        height:100px;
	margin: 0 auto;
        clear:both;   
  
}

#footer p {
        margin:0px 20px; 
        color:#000;
        
}

#footer a {
        color:#000;
        text-decoration:none;
}

#footer a:hover {color:red;}

#footer ul {width:750px; margin:auto; }
#footer li {display:inline; margin-left:20px; }

.zemcontactform {}
fieldset {border:none; text-align:left;}
fieldset p {display:inline; float:left; width:100px; }
fieldset input {display:inline; float:left; width:75%; margin:0 30px;}
.zemsubmit {width:100px; }

.footer_toptext {float:left; display:block; text-align:left; width:400px;}
.footer_toptext h1 {margin-left:20px; color:#d9349a; font-size:1.2em;}

/*-------------Article Formatting-------------*/

.promotion {font-size:0.9em; line-height:1.4em; word-spacing:1px; clear:both; display:block; float:left; margin:0; padding:30px 0 20px 20px ; background:url(../images/1.gif) no-repeat center bottom; width:100%;}
.promotiontext h2 {border-bottom: 1px dashed #ddd; font-size:1.2em; padding-bottom:3px; margin:0 15px 2px 0; }
.promotiontext {width:240px; float:left; display:block;}
.promotiontext p{margin:0 10px 5px 0;}
.promotionpic {float:left;  display:block;}
.promotionpic img {margin-right:10px; padding:2px 10px 2px 2px;}
.promotionbutton {cursor:pointer; display:block; overflow:hidden; float:left; background:url(../img/button.gif) no-repeat 0 -1px; width:130px; height:40px;}
.promotionbutton h2 {text-indent:-9999px;}
.promotionbutton:hover {background-position:0 -38px;}
.footnote {display:block; overflow:hidden; float:left; width:130px; text-align:center; line-height:1.1em; font-size:0.8em; color:#888;}
.footnote p {margin:15px; }
.promotion li {margin-bottom:5px; list-style-image:url(http://www.freeukdating.org/images/23.gif); color:#d52490; font-size:0.9em;}
.promotion li strong {color:#000; font-size:1.1em;}

/*-------------RATING STARS-----------------*/

/*  styles for the unit rater     */
.ratingblock {
	width: 60%;
	display:block;
	padding-bottom:8px;
	margin:15px auto;
	}

.loading {
	height: 15px;
	background: url('../images/working.gif') 50% 50% no-repeat;
	}
	
.unit-rating { /* the UL */
	list-style:none;
	margin: 0px;
	padding:0px;
	height: 15px;
	position: relative;
	background: url('../images/starrating.gif') top left repeat-x;		
	}

.unit-rating li{
    text-indent: -90000px;
	padding:0px;
	margin:0px;
	/*\*/
	float: left;
	/* */
	}
	
.unit-rating li a {
	outline: none;
	display:block;
	width:15px;
	height: 15px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	}
	
.unit-rating li a:hover{
	background: url('../images/starrating.gif') left center;
	z-index: 2;
	left: 0px;
	}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:15px;}
.unit-rating a.r2-unit{left:15px;}
.unit-rating a.r2-unit:hover{width: 30px;}
.unit-rating a.r3-unit{left: 30px;}
.unit-rating a.r3-unit:hover{width: 45px;}
.unit-rating a.r4-unit{left: 45px;}	
.unit-rating a.r4-unit:hover{width: 60px;}
.unit-rating a.r5-unit{left: 60px;}
.unit-rating a.r5-unit:hover{width: 75px;}
.unit-rating a.r6-unit{left: 75px;}
.unit-rating a.r6-unit:hover{width: 90px;}
.unit-rating a.r7-unit{left: 90px;}
.unit-rating a.r7-unit:hover{width: 105px;}
.unit-rating a.r8-unit{left: 105px;}
.unit-rating a.r8-unit:hover{width: 120px;}
.unit-rating a.r9-unit{left: 120px;}
.unit-rating a.r9-unit:hover{width: 135px;}
.unit-rating a.r10-unit{left: 135px;}
.unit-rating a.r10-unit:hover{width: 150px;}

.unit-rating li.current-rating {
	background: url('../images/starrating.gif') left bottom;
	position: absolute;
	height: 15px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
        left:0px;
	}

.voted {color:#999;}
.thanks {color:#36AA3D;}

.article {margin: 40px 10px 10px 20px;}
.article h1 {color:#0152e2; font-size:1em; margin: 0 0 15px 0}
.article h5 {color:#0152e2; font-size:1em; margin: 0 0 15px 0}
.article p {margin-bottom:15px; color:#444;}