/* GLOBALS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html {
    /* set the html document to be 100.1% of the height. we do this like that the scrollbar always appear in firefox and the content will not be jumping position when the scrollbar appear */
    height: 100.1%;
}

body {
    font-family: Verdana, Arial, Tahoma, sans-serif;
	font-size: 75%;
	background:url( ../images/body-bg.jpg ) repeat-x;
	background-color: #FFF;
	color: #595959;
}

/* MARGIN & PADDING RESET ON ALL ELEMENT */
* {
	margin: 0;
	padding: 0;
}

p {
	margin-bottom: 0.8em;
	line-height: 1.3em;
}

a   {
    text-decoration: none;
}

img {
	border:0;
}

/* DEFAULT ALL UL TO BE HORIZONTAL WITHOUT BULLET ALSO ANY A TAG IN A LI WILL BE DISPLAY:BLOCK */
ul {
	list-style: none;
}
ul li {
    float:left;
}
ul li a {
    display:block;
}

/*
css hack to fix floating issues in firefox & IE  view the full explanation for this hack at the url below
http://www.positioniseverything.net/easyclearing.html
*/
.floatContainer			{margin:0 auto 0 auto;}
.floatContainer:after	{content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.floatContainer			{display: inline-block;}
* html .floatContainer 	{height: 1%;}
.floatContainer			{display:block;}


/* GENERIC LAYOUT STYLES */
div.main-container {
	width: 1000px;
	margin: 0 auto;
}

a.green-buttons {
    float:left;
    background: url('../images/btn-green-left.gif') no-repeat top left;
    color:#FFF;
    font-weight:bold;
    text-decoration:none;
    padding:3px 0 3px 0;
}
a.green-buttons:hover  {
    text-decoration:none;
}
a.green-buttons span {
    padding:3px 20px 3px 0;
    margin:0 0 0 5px;
    background: url('../images/btn-green-right.gif') no-repeat top right;
}
a.buttons span:hover  {
    text-decoration:underline;
}

a.blue-buttons {
    float:left;
    background: url('../images/btn-blue-left.gif') no-repeat top left;
    color:#FFF;
    font-weight:bold;
    text-decoration:none;
    padding:3px 0 3px 0;
}
a.blue-buttons:hover  {
    text-decoration:none;
}
a.blue-buttons span {
    padding:3px 20px 3px 0;
    margin:0 0 0 5px;
    background: url('../images/btn-blue-right.gif') no-repeat top right;
}
a.blue-buttons span:hover  {
    text-decoration:underline;
}


/* HEADER STYLES */
div.header {
	height: 120px;
	position: relative;
   	/*background: url(../images/header-bg.jpg) no-repeat right 1px;*/
}

div.header a.logo {
    position: absolute;
    background: url(../images/header-tradefair-logo.jpg) no-repeat left top;
    width:210px;
    height:50px;
}

div.header a.logo span {
    display: none;
}

/* MAIN NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
div.main-nav {
    position:absolute;
    margin:69px 0 0 2px;
}

div.main-nav ul li {
    background: url(../images/main-tab-left-on.gif) no-repeat left top;
    height: 27px;
    margin:0 1px 0 0;
}

div.main-nav ul li a {
	color: #fff;
	font-weight: bold;
    background: url(../images/main-tab-right-on.gif) no-repeat right top;
    height: 27px;
    margin:0 0 0 6px;
    line-height:2.1em;
    padding:0 10px 0 3px;
}
/* HACK FOR IE : when apply display:block to a A tag it will then expand to 100% width in IE to follow IE Box model to fix this issue here we use IE only css selector "* html" to override the width of the A tag */
* html div.main-nav ul li a {
    width:1%;
}

/* main nav current link style */
div.main-nav ul li.current {
    background: url(../images/main-tab-left-on.gif) no-repeat left top;
}
div.main-nav ul li.current a {
	color: #fff;
    background: url(../images/main-tab-right-on.gif) no-repeat right top;
}

/* SUB NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.sub-nav {
    position:absolute;
    margin:98px 0 0 2px;
}
div.sub-nav ul li {
    background: url(../images/subnav-separator.png) no-repeat right 2px;
}
div.sub-nav ul li.no-bg {
    background: transparent;
}

div.sub-nav ul li a {
    color: #fff;
    font-weight: bold;
    padding:0 14px 0 14px;
}

/* LANGUAGE NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.language-nav	{
	position:absolute;
	margin:70px 0 0 600px;
}

/* SHORTCUT NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.shortcut-navigation	{
	position:absolute;
	margin:15px 0 0 835px;
}
div.shortcut-navigation	select { 
	margin:0 3px 0 0;
}

/* FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.footer {
	margin-top: 30px;
}

div.footer div.logos {
	width: 500px;
	margin: 0 auto;
}
div.footer div.logos ul {
	clear:both;
}
div.footer div.logos img {
	margin: 0 10px;
}

div.footer p {
	text-align: center;
	font-size: 0.9em;
}