@import url("reset.css");
@import url("typography.css");

/*_________________________________________ MAIN LAYOUT ___*/

/* mac hide \*/
html, body {height:100%}
/* end hide*/

body {
	text-align: center;}
	
div#outer, div#outer2 {
	min-height: 100%;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -170px;
  background: url('../images/outer_bg.gif') repeat-x;}
  
div#outer2 {
  background: url('../images/outer_bg2.gif') repeat-x;}

div#clearheader {
	height: 360px;}
	
div#outer2 div#clearheader {
  height: 204px;}
	
div#clearfooter {
	clear: both;
	height: 170px;}
	
div#header {
	width: 100%;
  position: absolute;
	top: 0px;}	
	
div#footer {
	width: 100%;
	height: 170px;}
	
div.leftcol {
	width: 606px;
	padding: 0 1em;
	float:left;
  text-align: left;}
  
div#outer2 div.leftcol {
  padding: 0 0.5em;}
  
div.rightcol {
	width: 252px;
	padding: 0 0.75em;
	float:right;
  text-align: right;}

div.leftcol div.leftcol{
	width: 180px;
	padding: 0;
	float:left;}
  
div.leftcol div.rightcol{
	width: 390px;
	padding: 0 1em;
	float: right;
  text-align: left;}
	
div#footer div.leftcol {
  width: 180px;
  float: left;
  padding-right: 19px;
  border-right: solid 1px #E3D7BF;
  margin-top: 50px;}
  
div#footer div.rightcol {
  width: 660px;
  padding-left: 20px;
  float: right;
  margin-top: 50px;}
  		
div#content {
  padding-top: 2em;
  z-index: 1000;}
	
div.centered {
	width: 900px;
	margin-left: auto;
	margin-right: auto;}
/*_________________________________________ GENERAL  ___*/
.left {float: left;}
.right {float: right;}
.noborder {border: none;}
.clear {
  clear: both;
  height: 1px;
  overflow:hidden;}
.red {color: #f00;}
  
/*_________________________________________ HEADER:MENU  ___*/
div#menu {
  height: 36px;
  overflow: hidden;
  padding-bottom: 10px;
  background: url('../images/menu_bg.gif') no-repeat bottom;}

div#menu ul {
  margin: 0px;
  list-style-type: none;}
    
div#menu ul li {
  float: left;
  padding: 0.75em 1em;}
  
div#menu ul a, div#menu ul span.active {
  font-weight: bold;
  color: #79B7DE;
  text-decoration: none;
  border-bottom: solid 3px #CCDAE0;}
  
div#menu ul span.active {
  color: #aaa;
  border-width: 11px;}
  
div#menu ul a:hover {
  color: #666;
  border-bottom: solid 3px #45526B;}
  
div#menu form {
  color: #666;
  height: 30px;
  margin-top: 6px;
  overflow: hidden;}
  
div#menu form input {
  margin-left: 0.5em;}
  
div#menu form input.submit {
  border:none;
  vertical-align: middle;}

/*_________________________________________ HEADER:INTRO  ___*/  
div#intro {
  height: 250px;
  background: url('../images/slide_bg.jpg') no-repeat right;
  color: #fff;
  font-size: 1.5em;
  padding-left: 2em;
  overflow: hidden;}
  
div#intro a {
  color: #fff;}
  
div#topbar, div#topbar_404 {
  height: 94px;
  color: #fff;
  font-size: 1.5em;
  padding-left: 2em;
  overflow: hidden;
  background: url('../images/slogan.gif') no-repeat bottom right;}
  
div#topbar_404 {
  background: url('../images/errorimg.gif') no-repeat bottom right;}
  
div#intro a img, div#topbar a img, div#topbar_404 a img {
  float: left;
  margin: 1.5em 0;}
  
div#intro p {
  width: 500px;
  clear: left;}
  
div#intro a#brag_now, div#topbar a#brag_now {
  display: block;
  width: 90px;
  height: 90px;
  float: right;
  margin-top: -80px;
  position: relative;
  background: url('../images/brag_now.png') no-repeat top;}
  
div#topbar a#brag_now {
  margin: 0 10px;}
  
div#intro a:hover#brag_now, div#topbar a:hover#brag_now {
  background: url('../images/brag_now.png') no-repeat bottom;}
  
div#intro a#brag_now span, div#topbar a#brag_now span {
  display:none;}
  
div#intro object {
  float: right;
  margin: 20px 35px 0 0;}
  
 
/*_________________________________________ HEADER:TOOLBAR ___*/
  
div#toolbar{
  height: 64px;
  padding-left: 1em;
  background: url('../images/toolbar_l.gif') no-repeat left;}
  
a#br_brags, a#br_users, a#br_comments {
  display: block;
  width: 152px;
  height: 39px;
  float: left;
  margin: 20px 5px 0 0;}
  
a#br_brags span, a#br_users span, a#br_comments span {
  display: none;}
  
a#br_brags {
  background: url('../images/br_brags.png') no-repeat bottom;}
  
a#br_users {
  background: url('../images/br_users.png') no-repeat bottom;}
  
a#br_comments {
  background: url('../images/br_comments.png') no-repeat bottom;}
  
a:hover#br_brags {
  background: url('../images/br_brags.png') no-repeat top;}
  
a:hover#br_users {
  background: url('../images/br_users.png') no-repeat top;}
  
a:hover#br_comments {
  background: url('../images/br_comments.png') no-repeat top;}
  
div#toolbar form{
  height: 64px;
  float: right;
  width: 360px;
  margin: 0;
  font-size: 11px;
  color: #666;
  background: url('../images/toolbar_r.gif') no-repeat right;}
  
p#error_msg {
  height: 40px;
  width: 100%;
  padding-top: 24px;
  float: right;
  background: url('../images/toolbar_r.gif') no-repeat right;
  font-size: 18px;
  color: #444;}
  
div#toolbar p#user_menu{
  height: 40px;
  padding: 24px 12px 0 0;
  float: right;
  width: 368px;
  margin: 0;
  font-size: 11px;
  line-height: 13px;
  color: #444;
  background: url('../images/toolbar_r.gif') no-repeat right;}
  
div#toolbar form p {
  width: 110px;
  float: left;
  margin-right:5px;
  padding-top: 15px;}
  
div#toolbar form input {
  height: 18px;
  padding-top: 2px;
  width: 100px;}

div#toolbar form input.submit {
  height: auto;
  width: auto;
  border: none;
  padding-top: 0;}  
/*_________________________________________ CONTENT ___*/
span.aux {
  display: block;
  color: #555;
  margin-bottom: 1.5em;
  text-align: left;
  font-size: 11px;
  line-height: 1.5em;}
  
div#browsebysize {
  float: left;
  padding-right: 1em;
  margin-right: 1em;}
  
div#browsebysize ul {
  margin-left: 0;}
  
div#browsebycat a {
  display: block;
  float: left;
  width: 150px;
  line-height: 1.5em;}
  
div#outer div#browsebycat {
margin-left: 150px;}

div#outer2 div#browsebycat {
margin-left: 0;}
    
/*Bigger headings for brags on homepage*/
div#outer div#content div.leftcol h1 {
  font-size: 3em;}
  
div#outer div#content div.leftcol h2 {
  font-size: 2.5em;}
  
div#outer div#content div.leftcol h3 {
  font-size: 1.8em;}

/*Cancel lineheight and marginbottom of some headings*/  
div#outer div#content div.leftcol h1,
div#outer div#content div.leftcol h2,
div#outer div#content div.leftcol h3,
div#topbrags h2,
div#content div.brag h1,
div#content div.user h1,
div#content div.comment h1,
div.info h1{
  line-height: 1em;
  margin: 0;}

/*make some headings smaller*/  
div#topbrags h1,
div#outer div#content div.leftcol div#browsebysize h1,
div#outer div#content div.leftcol div#browsebycat h1,
div#outer2 div#content div.leftcol div#browsebysize h1,
div#outer2 div#content div.leftcol div#browsebycat h1 {
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 0.5em;}
  
div#topbrags h2, div.brag h2 {
  font-size: 1.2em;}
  
div.share {
padding-bottom: 1em;
border-bottom: solid 1px #ccc;
margin-bottom: 1em;}

div.info {
border-bottom: solid 5px #79B7DE;
margin-bottom: 1em;
padding-bottom: 0.5em;}

p.pagination a, p.pagination span.active {
  border: solid 1px #5E9CF2;
  padding: 2px 4px;
  text-decoration: none;
  font-weight: bold;
  margin: 4px;}
  
p.pagination span.active {
  background: #445169;
  color: #fff;
  border-color:  #445169;}
  
div.user img.avatar {
  float: left;
  margin-top: 1em;}
  
div.user p.aux {
  margin-left: 125px;
  margin-top: 1em;
  font-size: 11px;
  min-height: 100px;
  line-height: 1.5em;}
  
p#statistics {
  float: left;
  width: 125px;
  clear: left;}
  
a.rss {
  padding-left: 20px;
  background: url('../images/rss.gif') no-repeat left;}
  
img.photo {
  float: left;
  margin: 0 1em 1em 0;}

div.comments {
  clear: left;}
    
div.comments h2{
  font-size: 1.2em;
  color: #258;}
  
div.comments h3 {
  font-size: 1em;
  color: #258;}
  
div.comments li.c1, div.comments li.c2 {
  color: #444;
  padding: 0.75em;
  margin-bottom: 0.75em;}
  
div.comments li.c1 {
  background: #F0EEE7;
  border: 1px solid #DBCCAE;}

table.ifriends {
  color: #555;}
  
td.address {
  color: #445169;
  font-size: 11px;}
  
table.ifriends td.address {
  color: #666;}
    
tr.row1 td {
  background: #F0EEE7;}
  
p#user_message {
  background: #F0EEE7;
  border: 1px solid #DBCCAE;
  padding: 1em;}
/*_________________________________________ FORMS___*/
#content form input, #content form textarea, #content form select {
  width: 360px;
  margin-bottom: 1em;}
  
#content form input.nowidth {
  width: auto;
  margin-bottom: 0;}
  
#content form input.submit, #toolbar form input.submit {
  width: auto;  }
  
/*_________________________________________ FOOTER ___*/
	
div#footer div.centered {
	background: #f80;
	height: 170px;
  background: url('../images/footer_bg.gif') repeat-x;}
  
div#footer div.leftcol, div#footer div.leftcol p{
  text-align: right;
  font-size: 11px;
  color: #666;
  line-height: 1.2em;}
  
div#footer div.leftcol img {
  margin-bottom: 1em;}
  
div#footer div.rightcol {
  text-align: left;
  line-height: 1.5em;}