/* The final stylesheets consists of two files: the first will contain the core Netscape styles 
(As you may see, I tried to use as many CSS1 as possible, but Netscape still renders the
whole site badly), and a second stylesheet imported with an @import-rule (Netscape doesn't 
understands @import), holding the real styles which will overwrite the Netscape styles. */

body {
	background-image: url(images/backg.gif);
	background-position: top center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	text-align: center;
	margin: 0;
	padding: 0;
}

#main {
	background: none;
	width: 600px;
	height: 100%;
	padding: 0px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

#head {
	width: 600px;
	height: 138px;
	margin-top: 0;
	margin-left: 1px;
	font-family: "century gothic", arial, verdana, helvetica, sans-serif;
	font-variant: small-caps;
}

	/* I was too tired to spot where I screwed up, or I came across a stupid IE bug: the "head" 
	container slided one pixel to the left. This small hack fixed it, and it displays perfectly. */

#main > #head {
	margin-left: 0;
}

#nav {
	width: 600px;
	height: 138px;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #5e5e5e;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}	

#nav ul li {
	padding: 0;
	float: left;
	width: 120px;
	height: 138px;
}

#nav ul li a {
	text-decoration: none;
	text-align: center;
	color: #5e5e5e;
}
	
	/* nav list. I could have used separate images as background, but the Opera (7&8, Opera 6 
	screwed up the whole design, though the text remained legible, and the links worked well)
	browsers displayed	a weird flicker on "hover" state: i had to hover twice every button to 
	see the background, so I decided to use only one image for every list element. Btw, that's 
	Pixy's "Fast rollover, no preload"-method. www.pixy.cz */
		/* item: home */

#nav ul li.home {
	display: block;
	width: 120px;
	height: 138px;
}
		
#nav ul li.home a {
	display: block;
	width: 120px;
	height: 138px;
	color: #fff;
	background-color: #1b42b2;
}
	
#nav ul li.home a:hover {
	color: #000;
	background: url(images/menu.gif) center left;
}
	
#nav ul li.home a:active {
	background: url(images/menu.gif) bottom left;
	color: #000;
}	

#nav ul li.home span {
	display: block;
	padding-top: 40px;	
}

		/* item: about */ 
	
#nav ul li.about a {
	display: block;
	width: 120px;
	height: 138px;
	color: #fff;
	background-color: #1bb21b;
}
	
#nav ul li.about a:hover {
	background: url(images/menu.gif) center left;
	color: #000;
}

#nav ul li.about a:active {
	background: url(images/menu.gif) bottom left;
	color: #000;
}	
	
#nav ul li.about span {
	display: block;
	padding-top: 40px;
}

		/* item: services */
	
#nav ul li.services a {
	display: block;
	width: 120px;
	height: 138px;
	background-color: #f9ce08;
}
	
#nav ul li.services a:hover {
	background: url(images/menu.gif) center left;
}

#nav ul li.services a:active {
	background: url(images/menu.gif) bottom left;
}	
	
#nav ul li.services span {
	display: block;
	padding-top: 40px;
}

		/* item: portfolio */
	
#nav ul li.portfolio a {
	display: block;
	width: 120px;
	height: 138px;
	background-color: #f97f08;
	color: #fff;
}
	
#nav ul li.portfolio a:hover {
	background: url(images/menu.gif) center left;
	color: #000;
}

#nav ul li.portfolio a:active {
	background: url(images/menu.gif) bottom left;
	color: #000;
}	
	
#nav ul li.portfolio span {
	display: block;
	padding-top: 40px;
}

		/* item: contact */
	
#nav ul li.contact a {
	display: block;
	width: 120px;
	height: 138px;
	background-color: #ccc;
}

#nav ul li.contact a:hover {
	background: url(images/menu.gif) center left;
}
	
#nav ul li.contact a:active {
	background: url(images/menu.gif) bottom left;
}	
	
#nav ul li.contact span {
	display: block;
	padding-top: 40px;
}

	/* attributes of the block "content" */

#content {
	margin: 0;
	padding: 0;
	width: 600px;
	text-align: left;
	font-size: 0.9em;
}
	
	/* hyperlink attributes for "content" */

#content a {
	font-family: verdana, lucida, arial, helvetica, sans-serif;
	line-height: 1.2em;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9em;
}

#content a:hover {
	text-decoration: underline;
}

#content a:active {
	color: #acacac;
	text-decoration: underline;
}

#content a:visited {
	color: #000000;
	tect-decoration: none;
}

	/* paragraph and heading styles for "content" */
	
#content p {
	font-family: verdana, lucida, arial, helvetica, sans-serif;
	font-size: 0.9em;
	text-indent: 1em;
	padding: 0 1em;
}

#content h1, h2, h3, h4, h5, h6, #sider h1 {
	font-family: "Century Gothic", arial, sans-serif;
	font-weight: normal;
	letter-spacing: 0.05em;
	font-size: 2em;
	color: #acacac;
	font-variant: small-caps;
	padding: 0 1em;
	margin: 0.5em;
}

	/* the block of the main text, called "words" */

#words {
	float: left;
	width: 400px;
	padding: 1.1em 0.2em 1.1em 1.1em;
	margin-top: 0;
	border-right: 1px solid #000;
}

#words.broad {
	float: left;
	width: 580px;
	padding: 1.1em 0.2em 1.1em 1.1em;
	margin-top: 0;
	
}
	
	/* list styles for "words" */
	/* ordered lists first */
	
#words ol {
	font-family: verdana, lucida, arial, helvetica, sans-serif;	
	font-size: 0.9em;
}

#words ol li {
	padding: 0 1em;
	line-height: 1.7em;
}
	
	/* unordered list follows */
	
#words ul {
	font-family: verdana, lucida, arial, helvetica, sans-serif;	
	font-size: 0.9em;
}

#words ul li {
	padding: 0 1em;
	line-height: 1.7em;
	list-style: none;
	background: url(img/list.gif) center left no-repeat;
}
	
	/* that was it. now for the sider */
	/* Usually, designers has to set the width of floated elements twice because IE has a 3px float
	bug. Now, I doesn't felt for it, because i got no right border or what i could have disrupted, and 
	my content is relatively small too. */
#sider {
	float: left;
	padding:1.1em 0 1.1em 0em;
	width: 180px;
}

#sider ul {
	text-indent: -0.5em;
	font-family: verdana, lucida, arial, helvetica, sans-serif;	
	font-size: 0.9em;
	padding: 1.5em;
}

		/* list-style-image displays the small arrows on the left */

#sider ul li {
	display: list-item;
	line-height: 1.7em;
	text-indent: 1em;
	list-style: none;
	/*background: url(images/arrow.gif) center left no-repeat;*/
}

	/* footer. at last! */

#footer {
	clear: both;
	width: 100%;
	height: 50px;
	border-top: 1px solid #5e5e5e;
	background: #5e5e5e;
	font-family: verdana, lucida, arial, sans-serif;
	font-size: 0.7em;
	color: #ccc;
	padding: 0.5em;
}

#footer a {
	color: white;
}

	/* From here: Jano's list separation without images. In his article the hungarian CSS expert 
	showed two alternatives: one with first-child selector, and one with the use of a class. The
	second one is idiot proof, so i used that one. http://www.hszk.bme.hu/~hj130 */

#footer ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

#footer li {
	display:inline;
	border-left:1px solid white;
	padding: 0.5em;
}

#footer li.first {
	border:none;
}


/* Table with trips */

.trips table{
	width: 99%;
	
	
}



.trips table th,
table.acco-list th{
	font-weight: bold;
	font-family: Georgia, Helvetica, Verdana;
}

.trips table td,
table.acco-list td{
	font-size: 0.9em;
	border: 1px solid #ccc;
	padding: 1px;
}

.trips table td a,
table.acco-list td a{
	font-weight: normal;
}

table.acco-list td{
	border: none;
	padding: 2px;		
}

table.acco-list th,
table.acco-list td{
	border: 3px solid #fff;	
}

table.acco-list tr.highlight,
div.trips table tr.highlight{	
	background-color: #1B42B2;
	color: #fff;
	cursor: pointer;	
}

#content tr.highlight td a,
#content tr.highlight td a:hover
{
	color: #fff;
}

#content table.acco-list tbody tr.highlight td a,
#content table.acco-list tbody tr.highlight td a:hover{
	color: #fff;
}

/* pager */

div.pager{
	clear: both;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	font-size: 0.9em;
}

div.pager div.pagination .disabled{
	color: #ccc;
	border: 1px solid #ccc;
	padding: 2px 3px 2px 3px;
}

div.pager div.pagination .current{
	background-color: #000;
	border:1px solid #000000;
	color:white;
	font-weight:bold;
	padding:2px 3px;
}


#content div.pager div.pagination a,
#content #words div.pager div.pagination a{
	background-color:#CCCCCC;
	border:1px solid #000000;
	color:#333333;
	padding:2px 3px;
	font-weight: normal
}

/* Woordenboek */

#words dt{
	font-weight: bold;
}

#words dt,dd{
	padding-bottom: 0.5em;
}

div.contact-form{
	padding:1em 1em;
	width: 450px;
	float: left;
	background-color: #fff;
}

#sider dl{
	padding: 1.5em;
}


#sider dt{
display: inline;
font-size: 0.8em;

}

#sider dd{

}

#sider dd img{
	padding-left: 0.5em;
}


#sider h2 {
color:#ACACAC;
font-family:"Century Gothic",arial,sans-serif;
font-size:2em;
font-variant:small-caps;
font-weight:normal;
letter-spacing:0.05em;
margin: 0.5em 0em 0.5em 0.5em;
padding:0 1em;
}

#sider .blogs ul li h3{
color:#ACACAC;
font-family:"Century Gothic",arial,sans-serif;
font-size:0.9em;
font-variant:small-caps;
font-weight:normal;
padding:0 1em;
display: inline;
text-indent: 0;
margin: 0;
}

#sider .blogs ul,
#sider .blogs ul li{
	text-indent: 0;	
}

#sider .blogs ul li{
	list-style: square;	
}

.stars-wrapper {
	float:left;
	margin-top:14px;
}

#words.broad h1 {
	float:left;
	margin-right:0;
	padding-right:5px;
}

div#tabs p img{
	float: left;
	margin-right:0.5em;
	margin-bottom: 0.5em;
}

#words.broad div#tabs.ui-tabs .ui-tabs-panel{
	background-color: #fff;
}

#words.broad div#tabs.ui-tabs li.ui-state-active{
	background-color: #fff;
}

#words.broad div.back a
{
	color: #333;
	font-weight: normal;
}

div.add{
	padding: 0.5em;
}

#content div.wiki {
	font-family: sans-serif;	
}

#content div.wiki strong{
	font-weight: bold;	
}

#content div.wiki em{
	font-style: italic;	
}

#content div.wiki{
	clear:both;
	padding-top: 1em;
}

#content div.wiki a{
	color:#002BB8;
	text-decoration: none;
	font-weight: normal;
}

#content div.wiki p{
	line-height:1.5em;
	margin:0.4em 0 0.5em;
}

#content div.wiki span.source,
#content div.tweets span.source,
#content div#words span.source,
#sider div.weather span.source,
#sider div.youtube span.source,
#sider div.blogs span.source{
	color:#ACACAC;
	display:block;
	float:right;
	font-size:0.8em;
	padding:0.5em;
}


#content div.tweets a{
	color:#002BB8;
	text-decoration: none;
	font-weight: normal;
}

#content div.weather p span.temp{
	font-size: 1.3em;
	font-weight: bold;
	padding: 0.5em;
}

#content div.toc{
padding: 1em;
}
#content div.toc a{
color:#002BB8;
display:block;
float:left;
font-weight:normal;
padding:0.2em;
text-decoration:none;
border: 1px solid #002BB8;
margin: 0.2em;
line-height: 1.2em;
}


#content div.photos img{
	float:left;
	margin-bottom:0.4em;
	margin-left:0.4em;
	position:relative;
}

br.clear{
	clear: both;
}