/**************************************************************
   AUTHOR:    Webjuice sagl (webjuice.ch) - roger@webjuice.ch
   DATE:      2007.02.09
   PURPOSE:   Styles for the layout
	CUSTOMER:  Mary Ann McCormick	
 **************************************************************/

/**************************************************************
TOP FRAME: div to make space to the whole CONTENT DIV
***************************************************************/
#topframe {
	width: 960px;
	height: 157px;
	background-image: url(../graphics/top_header.jpg);
	background-repeat: no-repeat;
}
	#topframelang {
		width: 97px;
		height: 32px;
		margin-top: 54px;
	}
	
	
/**************************************************************
WRAPPER: wrapper to the whole DIV's
***************************************************************/
#wrapper {
	width:960px;
}
#leftwrapper {
	float: left;
	width:416px;
	height: 507px;
	background-image: url(../graphics/left_pic.jpg);
	background-repeat: no-repeat;	
}
#leftwrapper .menu {
	width:154px;
	height:385px;
}
#rightwrapper {
	float: left;
	width:544px;
	background-image: url(../graphics/bg_contents.jpg);
	background-repeat: repeat-y;	
}
/**************************************************************
CONTENT: 3 layers for the content section of the website
***************************************************************/

#topContent{
	width:544px;
	height: 36px;
	background-image: url(../graphics/titles/title_aboutme_en.jpg);
	background-repeat: no-repeat;
}
#contentPage{
	width:520px;
	padding-left: 10px;
	padding-bottom: 10px;
}
#contentPage img{
	padding: 4px;
}
#bottomContent{
	width:544px;
	height: 44px;
	background-image: url(../graphics/bottom_contents.jpg);
	background-repeat: no-repeat;
}
/**************************************************************
FOOTER
**************************************************************/	
#footer {
	margin-top: 20px;
	width:960px;
	clear: both;
}
#footerCredits {
 	padding-top: 3px;
	color: #373737; 
	margin: auto;
	width:955px;
	font-size: 9px;
	height: 20px;
	text-align: center; 
}

/**************************************************************
Width classes used by the site columns
**************************************************************/
.width100 {
	width: 100%;
}
.width75 {
	width: 74%;
}
.width50 {
	width: 47%;
}
.width33 {
	width: 32.7%;
}
.width25 {
	width: 24.7%;
}

/**************************************************************
Alignment classes
**************************************************************/
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.alignCenter {
	text-align: center;
}
.alignLeft {
	text-align: left;
}
.alignRight {
	text-align: right;
}
.clear {
	clear: both;
}