/**************************************
 CSS for Above and Beyond TM club
 
 Dec 18, 2009
 Yayoi Akita-Brunet
 
 Colors:
 MidGrey: 535353
 MidBlue: 3399cc
 LtBlue: f1f2ed
 
***************************************/
@charset "utf-8";
/**************************************
      DEFAULT 
***************************************/
*{
	padding:0;
	margin:0;	/* clear out the defaults for padding and margin */
}
img {
    border:none;
}
html, body{
	/*background:greenyellow;	*/
    background:url(../images/bg_1px_x.gif) top repeat-x;
}
/**************************************
      FONT
***************************************/
body {
    font-size:62.5%; /* set 1em = 10px */
    font-family: Arial, Helvetica, sans-serif;
} 
h1 {font-size:2em}    /* = 20px */
h2 {font-size:1.8em}  /* = 18px */
h3 {font-size:1.6em}  /* = 16px */
h4 {font-size:1.4em}  /* = 14px */
p  {font-size:1.3em}  /* = 13px */

/**************************************
      LAYOUT
***************************************/
#wrapper{
	/*background:white;	*/
	width:800px;				/* this is our fixed width for the layout */
	margin:0 auto;		/* 10px top and bottom, centered left and right */
}

#nav{
	/* where the ul#menu is */
	/*background:#535353;*/
    /*background:#6b6b6b;*/
    background:#7e7e7e;
}

#header{
    background:url(../images/header_bg.jpg);
    height:135px;
}
#content_outer {
    background:#ffffff url(../images/content_bg_1px_y.jpg) repeat-y;
}
#content {
    background:transparent url(../images/content_top_bg.jpg) top left no-repeat;
    margin-bottom:40px; /* fixed margin to show content_bottom_bg.jpg in #footer span */     
}
#sidebar-outer {
    /*border:1px solid red;*/
    width:150px;
	float:left;
	margin-right:650px;
    margin-top:22px; /* fixed margin to show content_top_bg.jpg */
    
    background:url(../images/sidebar_bg_1px_y.gif) center repeat-y;
}
#sidebar-inner {
    /*border:1px solid green;*/
    background:transparent url(../images/sidebar_bg_bottom.jpg) center bottom no-repeat;
    padding-bottom:20px; /* fixed margin to show sidebar_bg_bottom.jpg */
}
#sidebar{
    /*background:lemonchiffon;*/
    background:transparent url(../images/sidebar_bg2.jpg) center top no-repeat;
}
#subcontent{
	/* the div that wraps around our main, secondary columns */
	/*background:#696;*/
	width:650px;
	float:right;
	margin-left:-650px;
	/* total width 750 - 750 = 0  */
    margin-top:22px; /* fixed margin to show content_top_bg.jpg */
}
#footer{
	/*background:firebrick;*/
    border-top:1px solid #535353;
	clear:both;	/* make the footer appear below ALL the columns */
    
    position:relative;
}
#footer span {
    position: absolute;
    width: 800px;
    height:22px;
    background:url(../images/content_bottom_bg.jpg) no-repeat;
	top:-40px;
	left:0px;
}
/*************************************
				FONTS
*************************************/
#footer {
    padding:7px;  
}
#footer p{
	text-align:left;
    color:#535353;
    font:normal normal 0.9em/1.2em Arial, Helvetica, sans-serif;
    padding-bottom:5px;
}
#content p{
	padding:5px 20px;
    color:#333;
}
#sidebar {  
    padding-top:200px;
}
#sidebar h4 {
    color:#fff;
    font:bold normal 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding-left: 25px;
}
#sidebar p {
    color:#fff;
    font:normal normal 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 20px 14px 25px;    
}
#sidebar a {
    text-decoration:none;
    color:#fff;
    font:bold normal 1.2em Arial, Helvetica, sans-serif;
    padding-left: 25px;  
}
#sidebar a:hover {
    color:#ffab55;
}
#subcontent h3 {
    /*padding:0px 20px;*/
    padding:0px 10px;
    color:#3399cc;
    /*font-family:Tahoma, Geneva, sans-serif;*/
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#subcontent ul {
    margin-top: 10px;
    margin-bottom:20px;
}
#subcontent ul li {
    /*border:1px solid red;*/
    list-style-type:none;
    color:#535353;
    font:normal normal 1.3em Arial, Helvetica, sans-serif;
    margin:4px 20px 4px 25px;
}
/*************************************
				NAV - HORIZONTAL
*************************************/
ul#menu {
	list-style:none;
}
ul#menu li {
	display: inline;
	float: left;
	width:100px;
}
ul#menu li a {
    /*background: wheat;*/
	text-decoration:none;
    display: block;
    text-align:center;
    border-right:1px solid #fff;
    
    padding: 6px;
    color:#fff;
    font:bold normal 1.2em/1.4em Arial, Helvetica, sans-serif;
}
ul#menu li a:hover{
	background-color: #535353;
}

ul#menu li.wide {
    width: 150px;
}
/*************************************
                 CLEARFIX
*************************************/
/* To make the background drop around the floated content */
.clearfix:after {
	content:'.'; /* adding a content using CSS. It appends to the content. */
	/* Now you force above content to appear below the floated objs by
	      -- clear: both;
		  -- display: block;
    */
	clear:both;
	display:block;
	visibility:hidden; /* the content not shown but still takes up space. */
	height:0; /* get rid of extra height caused by the "appended content" */
}
/* IE6 rule */
/*** always prefix the rule with "* html ..." */
* html .clearfix {
	height:1px;
}
/* IE7 rule */
/*** always prefix the rule with "*:first-child+html ... */
*:first-child+html .clearfix {
	min-height: 1px;
}

/*************************************
                 TEXT-IMAGE REPLACEMENT
*************************************/
#header h1 {
    text-indent: -1000px;
}