/* $Id: layout-fixed.css,v 1.1.2.7 2008/01/28 17:41:35 johnalbin Exp $ */

/*
 * LAYOUT STYLES
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Border Politics Layout Method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/** body **/
body {
	background: #F0F0F0 url(images/TF.org-bg_gradient_090509.jpg) repeat-x; /*#FFF url(images/TF.org-bg_080320.jpg) no-repeat fixed 0 0;*/
	/* background: #FFF url(images/Bliss.png) no-repeat fixed 0 0; */	
	color: #222;
	margin: 22px 22px 0 22px;
	min-width: 700px;
  /* 2x (left-side fullwidth + main padding) + right-side fullwidth */
}

#bg-cloud {
	background: url(images/TF.org-bg_cloud_090509.jpg) no-repeat 0 0;
	position: absolute;
	top: -22px;
	left: 579px;
	width: 424px;
	height: 250px;
	text-align: center;
}

#page {
	position: relative;
	width: 80em; /* page width - optional, 80em = 960px at font-size: 0.75em; */
	/*
	 * If you want to make the page a fixed width and centered in the viewport,
	 * this is the standards-compliant way to do that. See also the ie.css file
	 * for the necessary IE5 hack to center a div.
	 */
	margin-left: auto;
	margin-right: auto;
}

#navigation-top,
#navigation {
	position: absolute; /* Take the named anchors out of the doc flow    */
	left: -10000px;     /* and prevent any anchor styles from appearing. */
}

	.skip a, .skip a:hover, .skip a:visited {
		position: absolute;
		left: 0px;
		top: -500px;
		width: 1px;
		height: 1px;
		overflow: hidden;
  color: #FFF; /* Same as background color of page */
		}
 
	.skip a:active, .skip a:focus {
		position: static;
		width: auto;
		height: auto;
		color: #222;
		text-decoration: none;
		}


/** header **/
#header {
	position: relative;
	height: 90px;				/* 112px - body margin (22px) */
}

#personal-block,
#navbar {
	position: absolute;
	top: 16px;					/* starting from body margin (22px) */
	right: 10px;
	text-align: left;
	z-index: 999;
}
#personal-block {
	top: 47px;
	width: 400px; /* e|vo 081022: width:400px for default invisible login inputs */
	font-size: 95%;
	text-align: right;
}

#logo-title {
	position: relative;
}

#logo {
	display: none; /* e|vo 080907: display:none since Text-only-logo */
	width: 137px;
	height: 27px;
	vertical-align: middle;
}

 
#name-and-slogan {
  /*display: inline; e|vo 071025 in order of logo*/
	color: #222;
	position: absolute;
	display: block;
	width: 588px;
	top: 0;
	left: 0;
	z-index: 9999;
}

#site-name { /* On Startpage h1, everywhere else div */
	font-size: 2em;
	line-height: 1.3em;

	position: relative;
	width: 435px;
	height: 22px;
	margin: 0.5em 0; /* todo: photoshop? */
	text-indent: -999em; /* e|vo: problem of no pictures but CSS enabled! */
	}

	#site-name span {
		display: block;
		background: url(images/TF-logo-trans.png) no-repeat left top;
		position: absolute;
		top: 0;
		left: 0;
		width: 435px;
		height: 22px;
		z-index: 1;
	}

#site-slogan {
	position: relative;
	width: 290px;
	height: 18px;
	margin-left: 2px;
  	font-size: 120%;
	font-weight: bold;
	 text-indent: -999em; /* e|vo: problem of no pictures but CSS enabled! */
}
	#site-slogan span {
		background: url(images/bg-mastergrid-24bit.png) no-repeat scroll 0 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 290px;
	height: 18px;
	z-index: 1;
	}
#header-blocks {
  clear: both; /* Clear the logo */
}

/** main (container for everything else) **/
#main {
  /*position: relative; e|vo 081020: zen1.1: */
  margin-bottom: 1.5em;
}

#main-inner {
}

/** content **/
#content,
.two-sidebars #content {
  float: left;
  width: 560px;
  margin-left: 137px; /* The width of #sidebar-left */
  margin-right: -697px; /* Negative value of #content's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
}

.sidebar-left #content {
	background: url(images/bg-mastergrid-24bit.png) no-repeat -700px bottom;
	width: 53.5em; /* e|vo =642px; was 760px */
	margin-left: 11.5em; /* =137px; The width of #sidebar-left. */
	margin-right: -65em; /* =-897px; Negative value of #content's width + left margin. */
	padding-bottom: 35px;
}

.sidebar-right #content {
  width: 53.5em;
  margin-left: 0;
  margin-right: -53.5em; /* Negative value of #content's width + left margin. */
}
/*
.no-sidebars #content {
  width: 53.5em; 
  margin-left: 0;
  margin-right: -53.5em; / * Negative value of #content's width + left margin. * /
} */

body.front #content-top,
body.front #content-top-promo,
body.front #content-top-promo-news,
body.front #content-area,
body.not-front #content-inner { /* e|vo 081023: only for subpages, as we have problems with background on promo-news */
	padding: 0 20px 0; /* e|vo 090316: 20 instead of 14px || 21px! */
}
body.front #content-inner {
	position: relative;
}
body.front #content-top,
body.front #content-top-promo,
body.front #content-top-promo-news {
	margin-bottom: 20px;
}
	body.not-front #content-inner {
		padding-bottom: 20px;
	}

/** navbar **/
/* #navbar {
  float: left;
  width: 100%;
  margin-left: 0;
  margin-right: -100%; Negative value of #navbar's width + left margin. 
  padding: 0; / * DO NOT CHANGE. * /
  / * height: 3.6em; The navbar can have any arbritrary height. We picked one
                    that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
                    Set this to the same value as the margin-top below. * /
}*/

/*.with-navbar #content,
.with-navbar #sidebar-left,
.with-navbar #sidebar-right {
  margin-top: 3.6em;  Set this to the same value as the navbar height above. 
}*/

#search-box {
	/*position: absolute;
	top: 0px;
  	right: 0px;*/
	width: 175px;
	/*e|vo 081020: zen1.1: margin-right: -200px; Negative value of #search-box's width.
	float: left; */
}

/*#primary { // e|vo 081014: We don't have primary links
	margin-left: 200px;  Width of search-box 
}

#secondary {
  margin-left: 200px;  Width of search-box 
}*/

/* #navbar ul {} Primary and secondary links */ 

/** sidebar-left **/
#sidebar-left {
  float: left;
  width: 137px;
  margin-top: 10px; /* todo XBrowser test */
  margin-left: 0;
  margin-right: -137px; /* Negative value of #sidebar-left's width + left margin. */
  padding: 0; /* DO NOT CHANGE. */
}

/** sidebar-right **/
#sidebar-right {
	position: relative;
  float: left;
  width: 200px;
  margin-left: 760px; /* Width of content + sidebar-left. */
  margin-right: -960px; /* Negative value of #sidebar-right's width + left margin. */
  padding: 0; /* DO NOT CHANGE. */
}


/** footer **/
#footer {
	position: relative;
	width: 80em;
	margin: -30px auto 0 auto;
}

#footer-inner {
  padding-left: 147px;
  font-size: 90%;
}

#closure-blocks {}



/** Prevent overflowing content **/
#header,
#content,
#navbar,
#sidebar-left,
#sidebar-right,
#footer,
#closure-blocks {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}

/* #navbar {
  overflow: hidden; May need to be removed if using a dynamic drop-down menu
} */