@charset "utf-8";
/* CSS Document */

#container {
	position: relative; 
	width: 320px; height: 814px; padding-top: 20px;}
	
#navigation {
    width: 320px; height: 319px;
    background: url(images/Front_page_menu_items.png);
    padding: 0;
    position: relative; top: 15px}

#menu li {
    margin: 0; padding: 0; list-style: none;
    position: absolute;}
#menu li, #menu a {
    height: 144px; width: 144px; display: block;}

#icon1 {
	top: 0px;
	left: 0px;
}
#icon2 {
	top: 0px;
	left: 176px;
}
#icon3 {
	top: 175px;
	left: 0px;
}
#icon4 {
	top: 175px;
	left: 176px;
}

#icon1 a:hover {
    background: transparent url(images/Front_page_menu_items.png)
    -354px 0px no-repeat;}

#icon2 a:hover {
    background: transparent url(images/Front_page_menu_items.png)
    -530px 0px no-repeat;}

#icon3 a:hover {
    background: transparent url(images/Front_page_menu_items.png)
    -354px -175px no-repeat;}

#icon4 a:hover {
    background: transparent url(images/Front_page_menu_items.png)
    -530px -175px no-repeat;}
	
#contact {
	background-color: #b2b2b2;
	width: 144px; height: 144px;
	position: absolute; top: 546px; left:0px;
	
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	-webkit-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;}
#contact:hover {
	width: 320px; height: 144px;}
	
#contactimage {
	position: absolute; right: 0px;}
	
#contactdetails {
	height: 100%; width: 97%;
	text-align: right; font-family: Calibri; color: #ffffff; font-size: 20px;
	padding-top: 70px;

	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;}
#contactdetails:hover {
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;}
#contactdetails a:link {
	text-decoration: none;
	color: #ffffff;}
#contactdetails a:visited {
	text-decoration: none;
	color: #ffffff;}
#contactdetails a:hover {
	text-decoration: underline;}
#information {
	width: 100%;}
#white {
	position:relative;
	background-color:#FFF;
	color: #FFF;
	top: -3em;
	width: 100%;}