/**************************************************************
   AUTHOR:    Amila Productions SA (amila.ch) - roger@amila.ch
   DATE:      2006.11.09
   PURPOSE:   Styles for the layout
	CUSTOMER:  Ion Marin 
 **************************************************************/

/**************************************************************
TOP FRAME: div to make space to the whole CONTENT DIV
***************************************************************/
#topframe {
	margin:auto;
	width: 990px;
	height: 43px;
	background-image: url(../graphics/bg_top.jpg);
}
	#topframelang {
		margin-top: 10px;
		width: 105px;
	}
	#topframelang img {
		padding: 5px;
	}
	
/**************************************************************
CONTENT: wrapper to the whole DIV's
***************************************************************/
#content {
	margin:auto;
	width:990px;
	height:560px;
	background-image: url(../graphics/bg_long.jpg);
	background-repeat: repeat-y;
	background-position:center;
}
#header {
	margin:auto;
	width:955px;
	height: 140px;	
	padding: 0px;
}
#headerlogo {
	width: 215px;
	height: 140px;
	padding-left: 45px;
	background-image: url(../graphics/logo_ionmarin.gif);
	background-repeat: no-repeat;
	background-position:right;
}
#headerpicture {
	width: 650px;
	height: 140px;
	background-image: url(../graphics/pictures/top_picture01.jpg);
	background-repeat: no-repeat;	
}
/**************************************************************
TICKER: ticker DIV
***************************************************************/
#ticker {
	clear: both;
	width:955px;
	margin:auto;
	height: 20px;
	background-color:#440808;
	text-align:center;
	color:#FFFFFF;
}
#ticker a:link, #ticker a:visited {
	color: #FFFFFF;
	text-decoration: none;
} 
#ticker a:hover {
	color: #E5D9B3;
	text-decoration: underline;	
} 
marquee {
	margin: auto;
	padding-top: 3px;
	width:864px; 
	height:20px;
}

/**************************************************************
CONTENTPAGE: wrapper of the content
***************************************************************/
#contentPage {
	margin: auto;
	width: 865px;
	padding: 0px;
}
/**************************************************************
CONTENTPAGELEFT: where the menu is present
***************************************************************/
#contentPageLeft {
	width: 215px;
}
	#contentPageLeftPicture {
		width: 215px;
		height: 140px;
		background-image: url(../graphics/pictures/nav_picture01.jpg);
		background-repeat:repeat-x;
	}
	#contentPageLeftMenu {
		width: 215px;
		background-image: url(../graphics/bg_nav.jpg);
		background-repeat:repeat-x;	
		background-color: #811418;
	}
	
	#contentPageLeftMenu a {
		color: #FFFFFF;
	}
	#contentPageLeftMenu a:hover, #contentPageLeftMenu a:visited  {
		color: #FFFFFF;
	}

/**************************************************************
CONTAIN THE WHOLE MENU
***************************************************************/
		div.tmtHierbar {
			float: left;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			font-variant: small-caps;
			padding-top: 10px;
			padding-bottom: 10px;	
		}
		/* Links, all levels */
		div.tmtHierbar li a,
		div.tmtHierbar li a:link
		div.tmtHierbar li a:visited {
			border: 0px;
			color: #FFFFFF;
			display: block;
			padding-bottom: 5px;
			padding-left: 7px;
			padding-right: 0px;
			padding-top: 5px;
			text-decoration: none;
			width: 102px;
			border: 0px;
		}
		/* Links, all levels, hover */
		div.tmtHierbar li a:hover {
			background-color: #47090A;
			color: #FFFFFF;
		}
		/* Main list inside tmtHierbar */
		div.tmtHierbar ul {
			border: 0px;
			margin: 0px;
			padding: 0px;
		}
		/* First level */
		div.tmtHierbar li {
			/*line-height: 1em;*/
			list-style: none;
			margin: 0;
			position: relative;
			width: 106px;
		}
		/* Both second and third level */
		div.tmtHierbar ul li.tmtHiermenu ul {
			display: none;
			left: 106px;
			position: absolute;
			top: 0px;
			width: 107px;
			background-color: #610F11;
		}
		/* First level, only if contains second level */
		div.tmtHierbar ul li.tmtHiermenu,
		/* Second level, only if contains third level */
		div.tmtHierbar ul li.tmtHiermenu ul li.tmtHiermenu {
	
		}
		/* Show second and third level items on hover IE doesn't understand this, but the Javascript code will takes care of it */
		div.tmtHierbar ul li.tmtHiermenu:hover ul,
		div.tmtHierbar ul li.tmtHiermenu ul li.tmtHiermenu:hover ul{
			display: block;
		}
		
/**************************************************************
LEFT BAR Images inside the #contentPageLeftLogo
**************************************************************/
	#contentPageLeftLogo {
		width: 215px;
	}
	#contentPageLeftLogo img {
		padding: 0px;
		padding-left: 7px;
		padding-top: 10px;		
	}

/**************************************************************
CONTENTPAGERIGHT: where the iframe is located
**************************************************************/
#contentPageRight {
	background-color: #FFFFFF;
	width: 650px;	
	height: 400px;
}
/**************************************************************
FOOTER
**************************************************************/	
#footer {
	margin: auto;
	width: 990px;
	background-image: url(../graphics/bg_long_footer.jpg);
	background-repeat: no-repeat;
	clear: both;
}
#footerPlayer {
	margin:auto;
	width:955px;
	height: 20px;
}
#footerCredits {
 	padding-top: 3px;
	color: #9B6D68; 
	margin:auto;
	width:955px;
	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;
}