/*-----------------------------------------------------------------------------
We Heart Puzzles/Perplex City

author:		mind candy design
email:		marty@mindcandydesign.com
version:	0.8
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* @group General */

* {
	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}

.hide {
	display: none;
}

img {
	border: 0;
}

img.imgleft {
	float: left;
	padding-right: 10px;
}

img.imgright {
	float: right;
	padding-left: 10px;
}

ul {
	list-style: none;
}

#puzzle_bar cite {
	display: block;	
	font-style: normal;
}

body {
	font-size: small;
	background: #504e4f;
	text-align: center;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666;
}

/* AJAX loading image */

div#JSMX_loading {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	padding: 0;
	width: 81px;
	height: 21px;
	background: url(/images/loading.gif) no-repeat center center;
	z-index: 200;
	margin: 0 auto;
	text-align: center;
}

#beta {
	background: url(/images/beta.gif) no-repeat top left;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
	width: 66px;
	height: 65px;
}

/* @end */

/* =Typography
-----------------------------------------------------------------------------*/

#puzzle_bar p {
	margin-bottom: 1.1em;
}

#puzzle_comments span.comments_links {
	float: right;
	margin-bottom: 10px;
	font-size: 85%;
}

#puzzle_comments span.comments_links, 
#puzzle_comments span.comments_links a,
#puzzle_comments span.flag_inappropriate,
#puzzle_comments span.flag_inappropriate a {
	color: #999;
}

#puzzle_comments span.flag_inappropriate {
	float: left;
	margin-bottom: 10px;
	font-size: 85%;
}

#puzzle_comments p.comment-outer {
	background: #d6d6d6 url(/images/comment-outer.gif) no-repeat top left;
	color: #fff;
	line-height: 26px;
	padding-left:  7px;
	clear: both;
}

/* =Headings
-----------------------------------------------------------------------------*/

#header_wrapper h1 {
	width: 392px;
	height: 39px;
	text-indent: -9999px;
	background: url(/images/logo.gif) no-repeat top left;
	position: absolute;
	top: 38px;
}

#header_wrapper h1 a {
	display: block;
	width: 392px;
	height: 47px;
}

h2 {
	font-family: Helvetica, Arial;
}

#puzzle_bar h3.puzzle_bar_heading {
	margin-bottom: 1.1em;
	color: #777777;
	font-weight: normal;
	float: left;
	margin-bottom: 10px;
}

#puzzle_bar h3.puzzle_bar_heading em {
	font-size: 75%;
	background: #fff;
	font-style: normal;
	padding: 2px;
}

h3, h4 {
	margin-bottom: 1.0em;
}

h3 {
	color: #423f40;
	font-weight: normal;
	font-size: 120%;	
}

h4 {
	color: #4f4d4e;
	font-size: 100%;
	font-family: Helvetica, Arial;
}

#puzzle_bar h4 {
	color: #423f40;
	font-weight: normal;
	font-size: 120%;
	border-bottom: 1px solid #dbdbdb;
}

h5 {
	color: #4f4d4e;
	font-size: 100%;
	font-family: Helvetica, Arial;
	margin-bottom: 1.2em;
}

/* =Link Styles
-----------------------------------------------------------------------------*/

a:active {
	outline: none;
}

a:link, a:visited {
	color: #ca3f86;
}

a:hover {
	text-decoration: none !important;
}

/* User Colour Icons */

/*

a.user {
	background: url(/images/difficulty-square.gif) no-repeat left;
	padding-left: 13px;
}

a.user-red {
	background: url(/images/square-red.gif) no-repeat left;
	padding-left: 13px;
}

a.user-orange {
	background: url(/images/square-orange.gif) no-repeat left;
	padding-left: 13px;
}

a.user-yellow {
	background: url(/images/square-yellow.gif) no-repeat left;
	padding-left: 13px;
}

a.user-green {
	background: url(/images/square-green.gif) no-repeat left;
	padding-left: 13px;
}

a.user-blue {
	background: url(/images/square-blue.gif) no-repeat left;
	padding-left: 13px;
}

a.user-purple {
	background: url(/images/square-purple.gif) no-repeat left;
	padding-left: 13px;
}

a.user-black {
	background: url(/images/square-black.gif) no-repeat left;
	padding-left: 13px;
}

a.user-silver {
	background: url(/images/square-silver.gif) no-repeat left;
	padding-left: 13px;
}

*/

/* =Layout Styles
-----------------------------------------------------------------------------*/

#main_wrapper {
	background: #e2e2e2 url(/images/bground.jpg) repeat-x top left !important;
	width: 100%;
	height: auto;
}

#header_wrapper, 
#content_wrapper, 
#nav_wrapper, 
#bottom_wrapper, 
#footer_wrapper {
	text-align: left;
}

#header_wrapper {
	width:  900px;
	height: 150px;
	margin: 0 auto;
}
	
#content_wrapper {
	width:  900px;
	margin: 0 auto;
	background: #fff url(/images/content_top.gif) no-repeat top left;
}

#nav_wrapper {
	width:  900px;
	position: absolute;
	top:  113px;
}

#bottom_wrapper {
	background: #504e4f url(/images/bground_footer.jpg) repeat-x top left;
}

.inner {
	padding: 10px 10px 30px 10px;
}

/* Channel Layout */

#main_content {
	float: left;
	width: 659px;
	margin-right: 10px;
}

#main_content p {
	margin-bottom: 1.1em;
}

#puzzle_bar {
	float: left;
	width: 402px;
	margin: 10px 0 0 10px;
}

#puzzle_container {
	margin-bottom: 1.1em;
	clear: both;
	background: #fff;
	
	border: 1px solid #ccc;
}

#puzzle_container #puzzle_wrapper { /* padding for html puzzle container - see solveformselector.tag */
	padding: 10px;
}

/* Correct & Incorrect Divs */

.card-correct {
	background: #d0e2c1 url(/images/card-correct.gif) no-repeat top right;
	padding: 4px;
	color: #499011;
	margin-bottom: 10px;
}

.card-incorrect {
	background: #f1d7d7 url(/images/card-incorrect.gif) no-repeat top right;
	cursor: pointer;
	padding: 4px;
	color: #ac1212;
	margin-bottom: 10px;
}

/* Author Bar + Print Puzzle */

#author_bar {
	font-size: 85%;
	margin-bottom: 1.1em;
}

#author_bar a {
	color: #a5a5a5;
}

#author_bar span.author {
	float: left;
	line-height: 16px;
}

#author_bar span.print {
	float: right;
	line-height: 16px;
	padding-left: 20px;
	background: url(/images/icon_print.gif) no-repeat left;
}

#author_bar span.permalink {
	float: right;
	line-height: 16px;
}

/* */

#puzzle_ratings {
	border-top: 1px;
	border-bottom: 1px;
	border-right: 0;
	border-left: 0;
	border-style: solid;
	border-color: #cbcbcb;
	margin-bottom: 1.1em;
}

#puzzle_ratings .ratings, #puzzle_ratings .views {
	float: left;
	width: 50%;
	margin-top: 8px;
}

/* styles for the star rater */
	
.star_rating {
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 125px;
	height: 25px;
	position: relative;
	background: url(/images/alt_star.gif) top left repeat-x;		
}

.star_rating li {
	padding:0px;
	margin:0px;
	/*\*/
	float: left;
	/* */
}

.star_rating li a {
	display:block;
	width:25px;
	height: 25px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}

.star_rating li a:hover {
	background: url(/images/alt_star.gif) left bottom;
	z-index: 2;
	left: 0px;
}

.star_rating a.one_star {
	left: 0px;
}

.star_rating a.one_star:hover {
	width:25px;
}

.star_rating a.two_stars {
	left:25px;
}

.star_rating a.two_stars:hover {
	width: 50px;
}

.star_rating a.three_stars {
	left: 50px;
}

.star_rating a.three_stars:hover {
	width: 75px;
}

.star_rating a.four_stars {
	left: 75px;
}	

.star_rating a.four_stars:hover {
	width: 100px;
}

.star_rating a.five_stars {
	left: 100px;
}

.star_rating a.five_stars:hover {
	width: 125px;
}

.star_rating li.current_rating {
	background: url(/images/alt_star.gif) left center;
	position: absolute;
	height: 25px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}		

/* */

#puzzle_list {
	float: left;
	width: 226px;
	margin: 10px 0 0 10px;
	font-size: 85%;
}

#channel_bar {
	float: left;
	width: 211px;
	background: #f1f1f1;
}

/* =Login area
-----------------------------------------------------------------------------*/

#login {
	position: absolute;
	width: 220px;
	padding: 4px;
	background: url(/images/login.gif) right top;
	margin-left: 662px;
	top: 50px;
	color: #f7bcda;
	font-size: 85%;
	z-index: 50;
}

#logged {
	position: absolute;
	width: 220px;
	padding: 4px;
	background: url(/images/login.gif) right top;
	margin-left: 662px;
	top: 25px;
	color: #f7bcda;
	font-size: 85%;
	z-index: 50;
}

#logged p {	 
	margin-bottom: 0.4em;
}

#logged a, #login a {	 
	color: #f7bcda;
}

#logged div.horRule {
	height: 1px;
	border-top: 1px solid #b55788;
	margin-top: 3px;
	margin-bottom: 3px;
}

#logged div.horRule hr {
	display: none;
}

#logged img {
	position: absolute;
	margin: 3px 0 0 190px;
}

/* =Footer Styles
-----------------------------------------------------------------------------*/

#footer_wrapper:hover {
	color: #a1a1a1;
}

#footer_wrapper:hover a:link {
	color: #a1a1a1;
	text-decoration: underline;
}

#footer_wrapper:hover a:visited {
	color: #a1a1a1;
	text-decoration: underline;
}

#footer_wrapper:hover a:hover {
	color: #504e4f;
	text-decoration: none;
}

#footer_wrapper {
	width:  880px;
	margin: 0 auto;
	padding: 0px 10px 0px 10px;
	color: #a1a1a1;
	font-size: 85%;
	line-height: 18px;
}

#footer_wrapper ul {
	float: left;
	margin: 0 60px 0px 0 !important;
	padding: 20px 0 20px 0;
}

#footer_wrapper a {
	color: #a1a1a1;
	text-decoration: none;
}

#footer_wrapper a:hover {
	color: #504e4f;
	background: #a1a1a1;
	text-decoration: none;
}

#footer_wrapper p.copyright {
	clear: both;
	padding-bottom: 20px;
}

#footer_wrapper span {
	display: block;
}

/* =Nav Styles
-----------------------------------------------------------------------------*/

#nav {
	float: left;
	width: 100%;
	line-height: normal;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#nav a {
	float: left;
	background: url(/images/nav_left.gif) no-repeat left top;
	margin: 0 3px 0 0;
	padding: 0 0 0 15px;
	text-decoration: none;
	color: #fff;
	height: 37px;
	overflow: hidden;
}

#nav li.current a {
	background-position: 0% -76px;
}

#nav li.current a:hover {
	background-position: 0% -76px;
}

#nav a span {
	float: left;
	display: block;
	background: url(/images/nav_right.gif) no-repeat right top;
	padding: 13px 20px 11px 5px;
	font-weight: normal;
	font-size: 85%;
	text-transform: uppercase;
	color: #fff;
}

#nav li.current a span {
	background-position: 100% -76px;
	color: #8b305e;
}

#nav li.current a:hover span {
	background-position: 100% -76px;
	color: #8b305e;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {
	float: none;
}
/* End IE5-Mac hack */

#nav a:hover span {
	color: #f3cadc;
}

#nav a:hover {
	background-position: 0% -38px;
}

#nav a:hover span {
	background-position: 100% -38px;
}

/* =Puzzle List - Third Level Nav
-----------------------------------------------------------------------------*/

#puzzle_list div {
	background: #fff;
	padding: 10px;
	margin-top: 7px;
}

/* =Channel Bar
-----------------------------------------------------------------------------*/

#channel_bar h3 {
	background: #dfdfdf url(/images/channel-heading-channels.gif) no-repeat top left;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 130%;
	line-height: 40px;
	padding-left: 15px;
	margin: 0;
	font-family: Helvetica, Arial;
	text-shadow: #bbbbbb 2px 2px, yellow -2px -2px
}

#channels {
	/* padding: 10px 0 0 0; */
	position: relative;
	left: 10px;
	top: 10px;
	margin-bottom: 20px;
}

#channel_extra {
	background: url(/images/channel_extra.gif) no-repeat top left;
	margin: 0 0 10px 10px;
	padding: 4px;
	font-size: 85%;
	line-height: 17px;
}

#channel_extra a {
	color: #818181;
}

#channel_extra a:hover {
	color: #818181;
	text-decoration: none;
}

/* Search Box */

#search { 
	height: 24px; 
	width: 211px;
	padding: 0;
	margin: 0;
} 

#searchform { 
	 background: #fff; 
	 border: 0;  
	 width: 129px;
	 margin: 0px; 
	 padding-top: 4px;
	 padding-bottom: 4px;
	 padding-left: 4px;
	 padding-right: 0;
	 overflow: hidden;
	 color: #8f8f8f;
	 font-size: 100%;
} 

#search p {
	 margin: 0;
	 padding: 0;
}

#search input { 
	float: left;
}

/* =Top Level Channel Image Replacements
-----------------------------------------------------------------------------*/

#channels a {
	text-decoration: none;
	font-size: 85%;
	text-transform: uppercase;
	width: 186px;
	font-weight: normal;
	display: block;
}

#channel_pxc-cards,
#channel_japanese,
#channel_wordplay,
#channel_eye-candy,
#channel_flash,
#channel_slamboozle,
#channel_pxc {
	text-indent: -9999px;
	line-height: 23px;
	padding-left: 4px;
	margin-top: 1px;
}

#channel_pxc-cards {
	background: #932b61 url(/images/channel_small-pxc-cards.gif) no-repeat top left;
}

#channel_japanese {
	background: #18d1d8 url(/images/channel_small-japanese.gif) no-repeat top left;
}

#channel_wordplay {
	background: #6b6868 url(/images/channel_small-wordplay.gif) no-repeat top left;
}

#channel_eye-candy {
	background: #4e941a url(/images/channel_small-eye-candy.gif) no-repeat top left;
}

#channel_flash {
	background: #eab015 url(/images/channel_small-flash-games.gif) no-repeat top left;
}

#channel_slamboozle {
	background: #3392c2 url(/images/channel_small-slamboozle.gif) no-repeat top left;
}

#channel_pxc {
	background: #420e2a url(/images/channel_small-pxc.gif) no-repeat top left;
}

#channel_tag {
	background: #420e2a url(/images/channel_small-pxc.gif) no-repeat top left;
}

/* =Table Styles
-----------------------------------------------------------------------------*/

#mytable {
	width: 639px;
	padding: 0;
	margin: 0;
	border: 0px;
	font-size: 85%;
}

#puzzle_bar #mytable { /* for Profile page */
	width: 402px;
	padding: 0;
	margin: 0 0 10px 0;
	border: 0px;
	font-size: 85%;
}

#puzzle_bar #mytable caption { /* for Profile page */
	display: none;
}

caption {
	display: none;
}

th {
	color: #fff;
	border: 0px;
	border-right: 1px solid #eeeeee;
	text-align: center;
	padding: 11px 6px 11px 12px;
	background: #cecdce url(/images/leaderboard_bground.gif) repeat-x;
	font-weight: normal;
}

td {
	border: 0px;
	border-right: 1px solid #eeeeee;
	background: #ededed;
	padding: 6px 6px 6px 12px;
	text-align: center;
}


td.alt {
	background: #dbdbdb;
	border-right: 1px solid #eeeeee;
	text-align: center;
}

td.alt-left {
	background: #dbdbdb;
	border-right: 1px solid #eeeeee;
	text-align: left;
}

td.alt-left-lighter {
	background: #ededed;
	border-right: 1px solid #eeeeee;
	text-align: left;
}

/* users icons */

img.user-icon {
	vertical-align: middle;
	padding-right: 5px;
}

/* =Forms - Signin, Error reporting etc...
-----------------------------------------------------------------------------*/

/* Background image for form feilds */

#firstname, 
#lastname, 
#password, 
#confirmpassword, 
#email, 
#username, 
#town, 
#quote, 
#howhear,
#avatar,
#tagName,
#enteruid,
#bio,
#puzzlesolveform input,
#instructions-btn,
#comment-btn {
	background: url(/images/form-shadow.gif) no-repeat top left;
}

.btn, #puzzlesolveform .btn {
	background: url(/images/form-shadow.gif) no-repeat top left;
}

/* Error message */

span.form_error {
	background: url(/images/icon_error.gif) no-repeat;
	padding-left: 20px;
	color: #c36c06;
	border: 0px;
}

p.form_error {
	background: url(/images/icon_error.gif) no-repeat;
	padding-left: 20px;
	color: #c36c06;
	border: 0px;
}

/* */

.form-main, .form-search {
	margin-bottom: 30px;
}

.form-main fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.form-main legend {
	display: none;
}

.form-main label {
	float: left;	
	width: 7em;
}

.form-search label {
	float: left;	
	width: 15em;
}

#firstname,
#lastname, 
#password, 
#confirmpassword, 
#email, 
#username, 
#town, 
#quote, 
#howhear,
#avatar,
#tagName,
#enteruid,
#instructions-btn,
#comments-btn,
#searchterms,
#commentContent {
	width: 200px;
	border: 1px solid #c0c0c0;
	padding: 3px;
	color: #4d4b4c;
	background: url(/images/form-shadow.gif) no-repeat top left;
}

#country {
	color: #4d4b4c;
	width: 210px;
}

#bio {
	width: 200px;
	height: 100px;
	border: 1px solid #c0c0c0;
	padding: 3px;
	color: #4d4b4c;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

#date01, #date02, #date03 {
	color: #4d4b4c;
	width: 40px;
}

#firstname:hover, 
#lastname:hover, 
#password:hover, 
#confirmpassword:hover, 
#email:hover, 
#username:hover,
#town:hover, 
#quote:hover, 
#howhear:hover,
#bio:hover,
#avatar:hover,
#tagName:hover,
#enteruid:hover,
#puzzlesolveform input:hover,
#instructions-btn:hover,
#comments-btn:hover,
#searchterms:hover,
#commentContent:hover {
	border: 1px solid #939393;
}

.btn, #card-search #submitbtn {
	color: #4d4b4c;
	border: 1px solid #c0c0c0;
	padding: 2px;
	background: url(/images/form-shadow.gif) no-repeat top left;
}

.btn:hover, #card-search #submitbtn:hover {
	border: 1px solid #939393;
}

#editform .btn {
	margin-left: 7em;
}

#editform a {
	display: block;
	margin-left: 7em;
}

#avatarform span img {
	padding: 10px;
	border: 1px solid #dbdbdb;
	background: #fff;
	margin: 0 10px 10px 0;
}

#avatarform span input {
	display: block;
	margin-bottom: 10px;
}

/* =Puzzle Solve Forms
-----------------------------------------------------------------------------*/

#puzzle_wrapper table {
	margin-bottom: 10px;
}

#puzzle_wrapper table#fivetimesfive, #puzzle_bar table#fivetimesfive {
	width: 372px !important;
}

#puzzle_wrapper table#fivetimesfive input,  #puzzle_bar table#fivetimesfive input {
	width: 20px !important;
}

#puzzlesolveform {
	
}

#puzzlesolveform select {
	margin-bottom: 10px;
	/* width: 372px; */
}

#puzzlesolveform input {
	color: #4d4b4c;
	border: 1px solid #c0c0c0;
	padding: 3px;
	margin-bottom: 10px;
	/* width: 372px; */
}

#puzzlesolveform input#radio {
	width: 10px;
}

#puzzlesolveform div.answer-label p {
	
}

#puzzlesolveform .btn {
	width: 100px;
	display: block;
}

/* =Fansites
-----------------------------------------------------------------------------*/

#fansites img {
	border: 1px solid #c0c0c0;
	padding: 3px;
	float: left;	
	margin: 0 10px 10px 0;
}

#fansites p {
	clear: left;
}

/* =Tags Popup
-----------------------------------------------------------------------------*/

#puzzle_tag {
	border: 1px solid #c5c5c5;
	width: 382px;
	background: #f5f5f5;
	padding: 10px 10px 0 10px;
	margin: 0 0 10px 0;
}

#puzzle_tag p {
	font-size: 85%;
}

/* =Sidebar
-----------------------------------------------------------------------------*/

div#sidebar {
	background: #fff url(/images/user_bground.gif) no-repeat top right;
	float: left;
	width: 206px;
	margin: 10px 0 0 10px;
	font-size: 85%;
	padding: 10px 10px 0 10px;
}

div#sidebar ul {
	margin-bottom: 1.2em;
}

div#sidebar li.spacer {
	padding: 0 0 1em 0;
}

div#sidebar li {
	font-weight: bold;
	color: #717171;
	margin-bottom: 0.5em;
}

div#sidebar li span {
	font-weight: normal;
	display: block;
	color: #999;
}

div#sidebar h3 {
	font-size: 110%;
	color: #717171;
	font-weight: normal;
}

div#sidebar h3 span {
	font-size: 85%;
	display: block;
}

div.pxcsitelist li, div.flashlist li {
	font-weight: normal !important;
}

/* =Search Results
-----------------------------------------------------------------------------*/

#search-results ol {
	margin: 0 0 20px 30px;
}

#search-results img {
	padding: 10px;
	border: 1px solid #dbdbdb;
	background: #fff;	
}

/* =Daily Puzzles
-----------------------------------------------------------------------------*/

div.daily-puzzles {
	border-bottom: 1px solid #c0c0c0;
	padding: 5px 2px 5px 2px;
	margin-bottom: 10px;
}

div.daily-puzzles span {
	font-weight: bold;
}

/* =High Scores Tables
-----------------------------------------------------------------------------*/

table.highscores {
	/* width: 372px !important; */
	width: 402px;
	margin-bottom: 10px;
	border-bottom: 1px solid #c0c0c0;
}

table.highscores td { 
	border-top: 1px solid #fff;
}

table.highscores caption {
	display: block;
	text-align: left;
	margin: 0 0 5px 0;
	padding-top: 5px;
}
table#minirank {
	text-align: left;
	width: 100%;
	border: 0px;
	font-size: 85%;
}

table#minirank td {
	text-align: left;
	border-bottom: 1px solid #fff;
}

table#minirank a {
	background: none;
	padding: 0;
	margin: 0;
}

table#minirank td.td-right {
	text-align: right;
}