/*
| -------------------------------------------------------------------
| FILENAME:			home.css
| DESCRIPTION:		Additional Style Sheet for Shipdock
| CREATED:			19/08/2009
| INITIAL AUTHOR:	Ronald ter Neuzen, Elma Smit, Martijn ter Hellen
| UPDATED BY:		Ronald ter Neuzen, 19/08/2009
| 
| Copyright (c) 2009 KeyAgency
| http://www.keyagency.nl/
| -------------------------------------------------------------------
| Basic colors used for website:
|
| gray: #485156;
| gray dark: #606970;
| blue: #3496d1;
| orange: rgb(248,160,58);
| -------------------------------------------------------------------
*/

html,
body
{
	margin:0;
	padding:0;
}

body
{
	background-image: url('../gui/home/homepage.jpg');
	background-repeat: no-repeat;
	background-position: center -12px;
	background-color: rgb(81,90,97);
	
	font-family: Lucida,"Lucida Grande",'Lucida Grande',Helvetica,"Helvetica Neue","Microsoft Sans Serif","Trebuchet MS",Trebuchet,Verdana,Tahoma,Arial,"Gill Sans",sans-serif;
	
	font-size: 80%;
	line-height: 170%;
	color: #FFF;
}

#header
{
	position: absolute;
	width: 100%;
	height: 70px;
	top: 0px;
	left: 0px;
	background-color: rgb(246,246,246);
	overflow:hidden;
}

#header div.company
{
	position: absolute;
	display: block;
	height: 56px;
	width: 760px;
	left: 50%;
	margin: 11px 0 0 -390px;
	padding-top:3px;
	color: rgb(67,77,83);
	background-color: rgb(246,246,246);
}

#header div.company img
{
	margin-top:-3px;
}

#header div.company p
{
	font-size: 85%;
	line-height: 130%;
	display:block;
	float:right;
	height:56px;
}

#header div.company p b
{
	color: rgb(0, 151, 211);
	font-weight: normal;
}


#outer
{
	width: 826px;
	margin: 0 auto 0 auto;
	padding-top:105px;
}


/* -----------------------------------------------------------------
content
------------------------------------------------------------------*/
#content
{
	margin: 0 0 0 25px;
	width:232px;
}

#content,
#content h2,
#content div,
#content div strong
{
	font-style: normal;
	font-weight: normal;
}

#content h2
{
	display:inline;
}

#content div
{
	font-size: 85%;
	line-height: 170%;
}

#content h2,
#content div b,
#content div strong b
{
	font-size: 140%;
	color:rgb(248,160,58);
}

#content h2
{
	display: inline-block;
	font-size: 154px;
	line-height: 172px;
	margin: -34px 0 0px 0;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------
content list
------------------------------------------------------------------*/

ul
{	
	color: rgb(248,160,58);/*rgb(0,151,211);*/
	margin: 0 0 0 25px;
	padding-left:22px;
	width:216px;
}

ul li
{
	font-size: 130%;
	line-height: 100%;
	list-style-type: square;
	list-style-position: outside;
	margin:0 0 10px 0;
}

ul li span
{
	font-size: 65%;
	
	color: rgb(255,255,255);
}

ul li span b
{
	font-size: 140%;
	color: rgb(248,160,58);/*rgb(0,151,211);*/
}


/* -----------------------------------------------------------------
panels
------------------------------------------------------------------*/
#panels
{
	position:relative;
	background-image: url('../gui/home/panels.png');
	background-repeat: no-repeat;
	background-position: left top;
	width:806px;
	height:225px;
}

#panels .panel
{
	width: 220px;
	height: 160px;
	position: absolute;
	top: 33px;
	left: 33px;
	background-image: url('../gui/home/Amsterdam_02.jpg');
	background-position: left top;
	overflow:hidden;
}

#panels .panel.harlingen
{
	left:294px;
	background-image: url('../gui/home/Harlingen_02.jpg');
}

#panels .panel.niron
{
	left:554px;
	background-image: url('../gui/home/Niron_01.jpg');
}

#panels .panel h3
{
	padding: 0;
	/*margin: 132px 0 0 0;*/ /*info is verborgen*/
	margin: 0 0 0 0; /*info is zichtbaar*/
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
}

#panels .panel h3 a
{
	display:block;
	height:22px;
	overflow:hidden;
	color:rgb(255,255,255);
	background-image: url('../gui/home/blue.transparent.png');
	padding:3px 0 3px 8px;
	text-decoration: none;
}

#panels .panel .info
{
	position: relative;
	display: block;
	height: 116px;
	padding: 8px;
	color: rgb(67,77,83);
	/*background-image: url('../gui/home/white.transparent.png');*/
	background-image: url('../gui/home/white.transparent.block.png');
	background-repeat: no-repeat;
	background-position: center bottom;
}

#panels .panel.niron .info
{
	background-image: url('../gui/home/white.transparent.png');
	background-repeat: repeat;
}

#panels .panel .info a.readmore
{
	position: absolute;
	font-size: 85%;
	line-height: 170%;
	text-transform: uppercase;
	color: rgb(67, 77, 83);
	font-weight: bold;
	text-decoration: none;
	margin-top: 3px;
	padding-right: 16px;
	background-image: url('../gui/home/readmore.arrow.gif');
	background-repeat: no-repeat;
	background-position: right center;
	right: 8px;
	bottom: 4px;
	background-color: rgb(224,225,222);
}

#panels .panel .info h4
{
	font-size: 85%;
	line-height: 170%;
	text-transform: uppercase;
	color: rgb(0,151,211);
	margin-bottom:4px;
}

#panels .panel .info table
{
	width: 204px;
}

#panels .panel .info table,
#panels .panel .info table tr,
#panels .panel .info table tr td
{
 	padding:0;
 	margin:	0;
 	border: none;
}

#panels .panel .info p,
#panels .panel .info table tr td
{
	font-size: 85%;
	line-height: 130%;
}

#panels .panel .info table tr td
{
	padding: 2px 8px 1px 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px #c1c4c6 solid;
	border-left: 0;
}

#panels .panel .info ul
{
	width:190px;
	margin:12px 0 0 18px;
	padding:0;
}

#panels .panel .info ul li span
{
	color: #606970;
}