/*  
Theme Name: ontheinside by The 7th Art
Theme URI: http://ontheinside.info
Description: Copyright (c) 2008 The 7th Art, Inc. All rights reserved.
Author: The 7th Art, Inc.
Author URI: http://ontheinside.info
Version: 1.0.0
.
Copyright (c) 2008 The 7th Art, Inc. All rights reserved.
.
*/

html * {
	margin: 0;
	padding: 0;
}
html body {
	background: #AAA;
	color: #888;
	font: 70% helvetica, arial, verdana, sans-serif;
	text-align: center;
	line-height: 1.2em;
	padding: 10px;
}
html body #container {
	margin: 0 auto;
	width: 1000px;
	text-align: left;
	position: relative;
}
html body ul, body ol {
	list-style: none;
}
html body img {
	border: none;
}
html body .relative {
	position: relative;
}
html body .clear {
	clear: both
}
html body .clear_left {
	clear: left;
}
html body .float_left {
	float: left;
}
html body .hidden {
	display: none;
}

/*- Headers */
h2, h3, h4, h5 {
	line-height: .9em;
	text-transform: uppercase;
	color: #000;
}
h2 {
	font-size: 2.9em;
	margin: 0 0 10px;
}
h3 {
	font-size: 4.1em;
	margin: 0;
	font-weight: 700;
	color: #AAA;
}
h4 {
	font-size: 1.9em;
	line-height: 1.2em;
	margin: 10px 0 0;
}
h5 {
	font-size: 1.2em;
	margin: 0 0 5px;
}
p {
	width: 350px;
	font-size: 1.3em;
	line-height: 1.4em;
	margin: 0 0 10px 220px;
	color: #000;
}
ol h4 {
	margin: 0
}
.more {
	white-space: nowrap;
}
.recommendation h3 {
	margin: 0 0 5px;
}

/*- Links - default*/
a:link, a:visited {
	color: #000;
	text-decoration: none;
}
/*- TOP BLUE */
ul.selectReplacement li, ul.selectReplacement li.default:hover, #top div.menu li a:hover, 
#info a:link, #info a:visited, #footer a:link, #footer a:visited, 
#loop .pagebar a:link, #loop .pagebar a:visited, #top #info_header a:link, #top #info_header a:visited {
	color: #FFF;
}

/*- TOP PINK */
ul.selectReplacementPink li, ul.selectReplacementPink  {
	color: #FFF;
}


#loop p a:link, #loop p a:visited, span.gray {
	color: #AAA;
}

#info #recent_personalities_title, #info #popular_personalities_title, #info #filter_personalities_title,
#loop .personality .button, #loop .personality .button a, #loop .personality a:link, #loop .personality a:visited, .pink, a.pink, a.pink:hover {
	color: #F09; /* pink */

}
#loop .personality .button a {
	color: #F09 !important;
}


/*- Links - hover */
/*- TOP PINK */
ul.selectReplacementPink li.default, ul.selectReplacementPink li:hover, ul.selectOpen li:hover, ul.selectReplacementPink li.selected, 
#info #recent_recommendations_title, #info #filter_recommendations_title, #loop .button a, a:hover, a:active, 
#info #recent_recommendations a:hover, #info #recent_recommendations a:active, #loop p a:hover, #loop p a:active, .blue, a.blue, a.blue:hover {
	color: #F09; /* blue */


}

#headerPersonalitiesBox .default, #headerPersonalitiesBox li:hover, #headerPersonalitiesBox ul.selectReplacement li.selected {
color: #f09;
}

/*- TOP BLUE */
ul.selectReplacement li.default, ul.selectReplacement li:hover, ul.selectOpen li:hover, ul.selectReplacement li.selected, 
#info #recent_recommendations_title, #info #filter_recommendations_title, #loop .button a, a:hover, a:active, 
#info #recent_recommendations a:hover, #info #recent_recommendations a:active, #loop p a:hover, #loop p a:active, .blue, a.blue, a.blue:hover {
	color: #09F; /* blue */

}

html body .navigation .title, #info #newsletter .title, #info #search_everything .title, #loop #header a:hover,
#loop #header a:active, #loop .pagebar a:hover, #loop .pagebar a:active, #info .page_item a:hover, 
#info .page_item a:active, #footer .page_item a:hover, #footer .page_item a:active {
	color: #FF0;  /* yellow */
}
#info #recent_personalities a:hover, #info #recent_personalities a:active, 
#info #popular_personalities a:hover, #info #popular_personalities a:active {
	color: #F09; /* pink */
	background:#000000;
}

#info #recent_recommendations a:hover, #info #recent_recommendations a:active {
	color: #09F; /* blue */
	background:#000000;
}


#loop .personality a:hover, #loop .personality a:active {
	color: #000;
}
#info a:hover, #info a:active {
	/*background: #000;*/
}


/*- Top */
#top {
	width: 1000px;
	height: 270px;
	text-transform: uppercase;
}
#top div.menu, #top div#filter_menu {
	height: 20px;
	margin-left: 190px;
}
#top div#filter_menu {
	z-index: 10;
	position: relative;
}
#top div.menu li {
	display: inline;
	font-size: 12.5px;
	font-weight: bold;
	margin-right: 10px;
}
#top .banner_top {
	float: left;
	width: 180px;
	height: 218px;
	margin-right: 10px;
}
#top #img_header {
	float: left;
	margin-right: 10px;
	border: 10px solid #FFF;
}
#top #info_header {
	position: absolute;
	top: 163px;
	left: 510px;
	width: 250px;
	font-weight: bold;
	color: #FFF;
}

#top div#filter_menu div, #top div#filter_menu ul {
	float: left;
	z-index: 10;
}
#top div#filter_menu li {
	/*margin-right: 20px;*/
	padding: 2px 15px 0px 2px;
}
#top ul#recommendations_select li {
	clear: both;
}
#top ul#recommendations_select li div {
	margin: 5px 0px 15px 12px;
}
#top span.filter_title, #top span#reset_link_personality a:link, #top span#reset_link_personality a:visited {
	font-size: 12px;
	color: #A9A9A9;
	display: block;
	margin-bottom: 5px;
}

#top div#headerSearchBox {
	position: absolute;
	top: 24px;
	left: 0px;
	width: 234px;
	padding: 15px 10px;
	background: #8F8F8F;
}

#top div#headerPersonalitiesBox {
	position: absolute;
	top: 24px;
	left: 107px;
	width: 185px;
	padding: 15px 10px;
	background: #7F7F7F;
}

#top div#headerRecommendationsBox {
	position: absolute;
	top: 24px;
	left: 284px;
	padding: 15px 10px;
	background: #555;
}

#top div#headerSignupBox {
	position: absolute;
	top: 24px;
	right: 200px;
	width: 210px;
	padding: 15px 10px;
	background: #3A3A3A;
}

#top input.input_text, #searchform select {
	border: none;
	padding: 2px;
	width: 180px;
	background: #E0E0E0;
	color: #333;
	font: 12px helvetica, arial, verdana, sans-serif;
}
#searchform select {
	width: 184px;
	margin-bottom: 10px;
}


/*- Navigation */
#info, #westsoho {
	float: left;
	width: 180px;
	text-transform: uppercase;
}
#info {
	margin-right: 10px;
}
#info ul li, #info ul li a, #westsoho ul li, #westsoho ul li a {
	padding: 4px 4px 2px;
	line-height: 15px;
}
#info ul li a, #westsoho ul li a {
	margin: -4px -4px -2px;
}
#info #recent_personalities_title, #info #recent_recommendations_title, #westsoho ul li.title {
	background: #000;
	padding: 5px;
}
#info input, #westsoho input {
	margin: 2px -1px 5px;
	width: 170px;
}
#info ul.navList {
	overflow: auto;
	height: 360px;
	margin-bottom: 10px;
}


/*- Recommendations */
#loop {
	float: left;
	width: 610px;
	margin-right: 10px;
}
#loop div {
	padding: 10px;
	margin: 0 0 10px;
}
#loop div.frame.personality {
	margin: 10px 0px 0px 0px;
}
#loop div.frame.personality.first {
	margin: 0px;
}
#loop div.recommendation {
	margin: 0px;
}
#loop div.frame, .pagebar {
	background: #FFF;
	width: 590px;
}
#loop div.pagebar {
	margin: 10px 0px 0px 0px;
}
#loop div.frame.ads {
	margin-top: 10px;
}
#loop .button	{
	float: left;
	margin-right: 10px;
	padding: 8px 15px 8px 0px;
	background: url(images/arrow_right_blue.gif) no-repeat right;
	cursor: pointer;
	color: #09F;
	font-size: 2em;
	font-weight: bold;
	text-transform: uppercase;
}
#loop .personality .button	{
	background-image: url(images/arrow_right_pink.gif);
}
#loop .details {
	float: left;
	width: 200px;
	text-transform: uppercase;
	margin: 1px 0 0;
	line-height: 1.3em;
}
#loop .teaser {
	background: #000;
	height: 150px;
	width: 570px;
	margin-bottom: 5px;
	overflow: hidden;
	position: relative;
}
#loop .credit {
	position: absolute;
	right: 17px;
	bottom: 13px;
	color: #FFF;
	z-index: 1;
}
#loop .content_heading {
	width: 285px;
	margin: 0 0 10px 220px;
}
#loop .post_footer li {
	width: 400px;
}
#loop #loop_info_header {
	display: none;
}
#loop div#emailprintshare_sep {
	width: 247px;
	height: 11px;
	padding: 0px;
	margin-bottom: 0px;
	clear: both;
	background: #CBCBCB;
}
.secondary_title {
	color: #CCC;
	/*color: #DE0;*/
}

.secondary_title:hover {
	/*color: #F09;*/
}

.secondary_title_arch {
	color: #CCC;
	/*color: #DE0;*/
}

.secondary_title_arch:hover {
	/*color: #09F;*/
}

/*- Pages */
#loop div#page p {
	margin: 0 0 10px;
	width: 450px;
}
#loop div#page h2 {
	margin: 30px 0 10px;
}


/*- Filter selectors */
ul.selectReplacement, ul.selectReplacementPink {
	cursor: pointer;
}
/*
ul.selectReplacement li {
	display: none;
	margin: 0 0 1px;
}
ul.selectReplacement li.selected, ul.selectReplacement li.default, ul.selectOpen li {
	display: block;
}
*/

/*- Newsletter */
html body #loop .required {
	display: none;
}
html body #loop #newsletter p {
	margin: 0 0 10px;
}
html body #loop #newsletter input {
	margin: 0 0 10px;
	width: 340px;
}
html body #loop #newsletter div {
	width: 550px;
}

/*- Comments */
#loop form .details {
	text-align: right;
	padding-top: 4px;
}
#loop input, #loop textarea {
	margin: 0 0 10px 20px;
	width: 340px;
}
#loop form .submit_button {
	margin: 0 0 0 220px;
}
#loop div.comments span.title {
	padding: 0px 12px;
	background: #FF0;
}
#loop div.comments h2 {
	margin: 10px 0px;
}

/*- Footer */
#loop .pagebar {
	font-size: 2em;
	line-height: 1em;
	text-transform: uppercase;
}
#loop #footer, #loop .pagebar div {
	background: #000;
	width: 570px;
	margin-bottom: 0;
}
#loop #footer_ads {
	background: #000;
	width: 570px;
	margin: 0;
}

/*- Slimbox */
html body #lbCloseLink:link, html body #lbCloseLink:visited, html body #lbCloseLink:hover, html body #lbCloseLink:active {
	color: #000 !important;
}
html body #lbOverlay {
	background: #000;
	cursor: pointer;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 10;
}
html body #lbCenter, html body #lbBottomContainer {
	background: #FFF;
	left: 50%;
	overflow: hidden;
	position: absolute;
	z-index: 10;
	text-align: left;
}
html body #lbImage {
	background-repeat: no-repeat;
	border: 10px solid #FFF;
}
html body #lbPrevLink, html body #lbNextLink {
	outline: none;
	position: absolute;
	top: 0;
	width: 50%;
}
html body #lbPrevLink {
	background: transparent url(images/prev.gif) no-repeat 0 75px;
	left: 0;
}
html body #lbNextLink {
	background: transparent url(images/next.gif) no-repeat 100% 75px;
	right: 0;
}
html body #lbBottom {
	border: 10px solid #FFF;
	border-top-style: none;
	font-size: 20px;
	line-height: 1.15em;
}
html body #lbCloseLink {
	float: right;
}
html body #lbCaption {
	color: #000;
}
html body #lbNumber {
	color: #888;
}
html body .lbLoading {
	background: #fff url(images/loading.gif) no-repeat center !important;
}