* { margin: 0; padding: 0; }

body {
	background: #000;
  font-family: Arial, Verdana, sans-serif;
  font-size: 75%;
  margin: 0;
}

#main_container { background: #fff; }

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table td { vertical-align: top; }

a { color: #f44; }

		.swatch1 { color: #f44 !important; }

		.swatch1_lighter { background-color: #FFDDDD; }

		.swatch2 { color: #0099FF !important }

		.swatch2_lighter { background-color: #D9F0FF; }

		.swatch2_lighter a { color: #0099FF; }
		
a img { border: none; }

h1, h2, h3, h4 {
  font-family: "Lucida Grande",Tahoma, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.4em;
}

h1 { font-size: 1.7em; }

h2 { font-size: 1.55em; } 

h3 { font-size: 1.35em; }

h4 { font-size: 1.15em; }

p { 
  margin: .25em 0 1em 0;
  line-height: 1.5em;
}

ul { 
  list-style-type: none;  
  margin: .5em 0; 
}
	ul.bulleted {
		list-style-type: disc;
		margin-left: 2em;
	}
	
ol { 
  margin: .5em 0 .5em 1em; 
  list-style-position: inside;
}
  
   li {  padding: 0 0 1em .5em; line-height: 1.5em; }
      
  .inline li {
    float: left; 
    margin-right: 2em;
  }

fieldset {
  border: 1px solid #ccc;
  padding: 1em 2em 1em 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

    legend {
      font-family: Tahoma, Arial, sans-serif;
      color: #333;
      font-size: 1.42em;
      padding: 0 .5em .2em .5em;
    }
    
option { padding-right: 1em; }

#main {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 1px;
  padding-top: 1px;
}

#header_container {
	background: #fff url(img/header_x.png) repeat-x;
  color: #fff;	
  height: 150px;
}
		
		#header {
			width: 800px;
			height: 151px;
		  margin: 0 auto;
		  background: url(img/header_bg1.jpg) no-repeat top left;
		}
		
		#header h1 { 
			float: left;
			margin-top: 30px;
		}
		
		#header h1 a { display: block; height: 80px; width: 230px;}
		
		#header h1 span { display: none; }
		
		#header #status {
		  padding-top: 8px;
		  font-size: .85em;
		  margin-left: 370px;
		}
		
				#header #status a { text-decoration:  none; }
		
				#header #status .swatch1 { padding-left: .85em; }
         

    #header #completely_free {
      font-size: 2em;
			margin-left: 330px;
			margin-top: 60px;
      color: #ccc;
    }
		
		#primary_nav {
			margin-top: 33px;
			float: right;
			padding-right: 50px;
			text-align: center;
			width: 490px;
		}
		
				#primary_nav li {
				  display: inline;
				  font-family: "Lucida Grande",Tahoma,Verdana,sans-serif;
				  font-size: 1.4em;
				  background: url(img/nav_arrow_right.png) no-repeat 0 6px;
				  text-align: center;
				}

				#primary_nav a { 
					text-decoration: none; 
					padding-right: 1em;
					color: #fff;
				}
		
				#primary_nav .active {
					background: url(img/nav_arrow_down.png) no-repeat 0 6px;
				}
		
				#primary_nav .active a { color: #f44; }
			  
			  #primary_nav .annotation { color: #f44; font-size: .8em; }
	
		#secondary_nav {
			margin-left: 260px;
			margin-top: 10px;
			padding-right: 50px;
			text-align: center;
			color: #f44;
		}
		
				#secondary_nav li {
					display: inline;
				}
		
				#secondary_nav a { padding-right: 1em; text-decoration: none;  }

		    #secondary_nav .active a { font-weight: bold; text-decoration: underline; }
	

#footer {
  background: #000 url(img/footer_bg_x.png) repeat-x top left;
  clear: both;
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 2px solid #fff;
}

		#footer div.linkbar {
		  margin-top: .5em;
		  padding-top: 4.3em;
		  padding-bottom: 1em;
		  text-align: center;
		  color: #666;
		}

				#footer div.linkbar a { color: #666; padding: 0 0.5em; ; }

				#footer div.copyright { color: #444; text-align: center; font-size: .95em; padding-bottom: 2em; }

#logged_out {
	text-align: center;
}

		#logged_out h2 {
			margin-top: 2em;
			padding-bottom: 2em;
		}


/* small inline user portrait / city / last time online */
/* TODO: remove this... (maybe put it in another .css) */
div.miniuser { font-size: .95em; overflow: auto; }

div.miniuser img {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 2px solid white;
}

div.miniuser p {
  padding-top: 0.25em;
  line-height: 1.25;
}

.miniuser .online_now { 
  font-size: .9em;
  text-decoration: none; 
}

.user_list { margin-left: 1em; }

  .user_list div.skyscraper_ad {
    width: 150px;
    float: right;
    margin: 0.5em;
    margin-left: 1em;
    margin-top: 0;
  }

	.user_list hr { border: 1px solid #ddd; background-color: #f8f8f8; padding: 1px; clear:left; width: 610px; text-align: left;}
	
	.user_list h4 { margin: 0.5em 0;}

.inline_user_profile {
  clear: left;
  overflow: auto;
  margin: 0.5em 0;
  padding: 0.1em;
}
  .recent_inline_user_profile {
    background-color: #ffd;
  }
  .inline_user_profile .user_thumbnail {
    float: left;
    border: 1px solid #f44;
    margin-right: 1em;
    margin-bottom: 0.5em;
  }
  .inline_user_profile .username {
    font-size: 2em;
  }
  .inline_user_profile a.remove_link {
    float: right;
    width: auto;
    margin-right: 1em;
  }
	.inline_user_profile .city_link {
		float: right;
		width: auto;
		margin-right: 1em;
		font-size: 0.9em;
	}
  .inline_user_profile .headline {
    font-size: 1.2em;
    color: #999;
    margin: 0.4em 0;
  }
  .inline_user_profile .summary {
    margin-top: 0.5em;
    color: #444;
    font-size: 1.2em;
  }

  .inline_user_profile .annotation { color: #666; margin-top: 0.25em; font-size: 1.2em; margin-top: 0.5em; }
  .inline_user_profile .online_now { display: inline; }


table.thumbnails td { width: 16%; }
table.thumbnails td img { border: 6px solid white; }
table.thumbnails td.current img { border-color: #ecc; }


.red_button a, .black_button a, .blue_button a, .red_submit_button {
  margin: .25em auto 0 auto;
  padding: 10px 25px;
  text-decoration: none;
  color: #fff;
  font-size: 1.5em;
  cursor: pointer;
}
		.red_submit_button { overflow: visible;}

		.red_button a, .red_submit_button {
		  background: #f44 url(img/button_red_x.png) repeat-x;
		  border: 1px solid #f44;
		}
    
    .black_button a {
			 padding: 10px 20px;
		   background: #333 url(img/button_black_x.png) repeat-x;
		   border: 1px solid #333;
     }
     
     .blue_button a {
		   background: #0099FF url(img/button_blue_x.png) repeat-x;
		   border: 1px solid #0099FF;
     }


.red_button a, .black_button a, .blue_button a { padding-top: 14px !important;}
.red_button:hover, .red_submit_button:hover { color: #fdd; }

div.red_button_bar { padding: 1em 0.25em 1.5em 0.25em; }
div.red_button_bar div.red_button { display: inline; margin-right: 1em;}

/* creates the black bar heading with a main h1 and a detailed description */
.large_heading {
  color: #f44;
  font-weight: normal;
  margin: 0;
  margin-top: 1em;
  padding: 0.25em 1em;
  background-color: #333;
  background-image: url(img/h1_bg_taller_x.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  font-size: 1.5em;
}


		.large_heading .heading_detail { 
		  display: block;
			font-size: .6em; color: #999; padding-bottom: 0.5em; 
			font-family: Arial, Verdana, sans-serif;
			padding-top: 0;
			margin-top: 0;
			line-height: 1em;
		}

    .large_heading a { color: #f44; }

/* black bar heading */
.black {
  color: #f44;
  font-weight: normal;
  margin: 0;
  margin-top: 1em;
  padding: 0.25em 1em;
  background-color: #333;
  background-image: url(img/h1_bg_x.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  font-size: 1.5em;
}

		.framed {
		  border: 1px solid #aaa;
		  border-bottom: none;
		}


		div.framed {
		  border: 1px solid #ccc;
		  border-top: none;
		  padding: 1em 1.5em;
			margin-bottom: 2em;
		}

    div.framed div.framed_section_content { padding: 0 1em; }

/* floating grey box on right of many pages */
div.floating_info {
  float: right;
  width: 200px;
  background-color: #eee;
  margin-right: 0;
  margin-left: 1em;
  padding: 2em;
}

input.textfield, select, textarea {
  background-color: white;
  border: 1px solid #666;
  padding: 0.1em 0.2em;
}


div.pagination span.page_label { padding-right: 0.5em; font-weight: bold; }
div.pagination a { color: #f55; padding: 0 0.2em; text-decoration: none; }
div.pagination a:hover { text-decoration: underline; }
div.pagination span.current { padding: 0 0.25em; color: black; font-weight: bold; }


/* validation errors, etc; usually displayed in a <ul> */
.errors {
  border: 2px solid black;
  margin: 1em 0;
  padding: 0.25em 1em;
  background-color: #fee;
	text-align: center;
}

.flash_notice {
  margin: 0.5em 0;
  font-weight: bold;
  color: #333;
  border: 1px solid #ccc;
  background-color: #fee;
  padding: 0.5em 1em;
}

.flash { 
	background: url(img/flash_bg.png) no-repeat 10px 10px;
	border: 1px solid #efefef;
	font-size: 2em !important;
	color: #f44;
	padding: 1em 1em 1em 75px;
	
}

.username a { display: inline; }
.username .online_now { margin-left: 0.5em;}

.user_thumbnail { border: 2px solid #fff; }


table.user_portrait {
  background-image: url(img/photo_frame.png);
  background-position: top left;
  background-color: white;
  background-repeat: 0;
  width: 316px;
  height: 317px;
}
		table.user_portrait td { vertical-align: middle; text-align: center; }
		table.user_portrait img.portrait { border: 2px solid white; }
		table.user_portrait p.no_photo { font-size: 1.5em; }


		table.simple_form td { padding-top: 0.5em; }
		table.simple_form td input.textfield { border: 1px solid #666; }
		table.simple_form td.label {
		  text-align: right;
		  color: #444;
		  padding-right: 1em;
		  width: 30%;
		}


/* ad styles */
div.ad_728x90 {
  margin: 0 auto;
  width: 728px;
  height: 90px;
  text-align: center;
}

div.ad_320x260 {
  margin: 0 auto;
  width: 320px;
  height: 260px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #f8f8f8;
  color: #ccc;
}

div.textlink_ads {
  margin: 0 auto;
  text-align: center;
  font-size: 1.1em;
  color: #ccc;
  text-align: center;
	padding: 1em;
}

div.textlink_ads a { padding: 0 0.5em; }

#adsenseholder { margin: 0.5em 0; }


.pagination {
  font-size: 1.2em;
  margin: 0.5em 0;
}


/* simulates <fieldset><legend> style on an element */
.boxed {
  border: 1px solid #ccc; 
  padding: 1em;
  margin-top: 35px;
  z-index: -99999; 
}

    .boxed .boxtop  {
      margin-top: -1.2em;
      background: #fff; 
      z-index: 1000000;
      float: left;
      padding: 0 .5em;
      line-height: 1.2em;
      margin-bottom: .5em;
    }
    
    .boxed > * { clear: left; }
		.boxed .next { clear: left;}

/* clearfix - put this on a containing element and the children will be cleared */
.cf { display:block; } 

		.cf:after {
		  content: ".";
		  display: block; 
		  height: 0; 
		  clear: both !important;
		  visibility: hidden;
		}

		.cf { display: inline-block; } 

		* html .cf {height: 1%;}

/* convenient clearing */
.clear { clear: both; }

/* adds a mouse cursor, useful for javascript powered onclicks */
.cursor { cursor: pointer; text-decoration: underline; }

/* makes forms a bit cleaner */
.pretty_form label { display: block; margin-bottom: .25em; }	

.pretty_form h4 label { color: #999; }

.pretty_form input[type=text], .pretty_form select, .pretty_form textarea { border: 1px solid #999; }

.cancel { margin-left: 2em; }

/* makes all the children inline elements */
.inline * { display: inline; }

/* hide element */		
.ghost { display: none; }

/* useful for creating two floated columns */
.col1, .col2 {
	width: 47%;
	float: left;
  margin-right: 1em;
}

/* apply this to a UL tag and all the children LI tags will have red arrows */
.arrow li { 
  background: url(img/arrow_right.png) no-repeat 0 7px;
  padding-left: 1em;
}

.ancillary {
	color: #444;
	text-align: center;
	padding: 1em 0;
}

/* quotation blocks in forum/inbox messages */
.quote_top {
  border-bottom: 1px solid #999;
  border-top: 1px dotted #666;
  border-left: 8px solid #f66;
  border-right: 1px dotted #666;
  background-color: #faa;
  padding: 0.25em 0.25em;
  margin-left: 0;
  clear: right;
}
.quote {
  background-color: #eee;
  margin-left: 0;
  border: 1px dotted #666;
  border-left: 8px solid #ddd;
  border-top: none;
  padding: 0.25em 0.25em;
}


/* admin reports / moderation log */
table.report {
  width: 100%;
  border: 2px solid #ccc;
}
table.report th { background-color: #ddd; }


/* move this elsewhere... (maybe just inline it into the html) */
table.friend_requests th { background-color: #eee; text-align: left; padding: 0.25em 0.5em; }
table.friend_requests td { vertical-align: top; padding: 0.5em; text-align: left; border-bottom: 1px solid #aaa;}
table.friend_requests td.from { width: 120px; }
table.friend_requests td.message { width: 500px; padding-top: 2em;}
table.friend_requests td.actions { vertical-align: middle;}


/* CSS for the jsh -> opu migration */
#header #jsh_header_note { padding-left: 2em; text-transform: uppercase;  } 

#jsh_signup_note { 
	text-align: center;
	padding: 1em;
	border:	1px solid #efefef;
}
#invitation_message {
	width: 98%;
	height: 150px;
}
#friend_message_header {
	margin-top: 1em;
}
#friend_add_form {
	font-weight: bold;
}