/* First of all, we delete all margins and paddings from every item in this CSS document. */
* {
	margin: 0;
	padding: 0;
}

/* No outlines on linked images, ever. */
a img {
	border: 0;
}

/* Unordered lists should have no dots in front of them, ever. */
li {
	list-style: none;
}

/* The classes float-left and float-right can be used to align images in text either left or right, and left text wrap around them. */
.float-left {
	float: left;
	padding: 5px 10px 0 0;
}
.float-right {
	float: right;
	padding: 5px 0 0 10px;
}

/* HTML and BODY tag styling includes document height, font, fontsize, color and background. The repeated background-image is declared here. */
html, body {
	height: 100%;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #515151;
	background: #d3d3d3 url(images/wallpaper-repeat.jpg) repeat-x;
}

/* Headings are used for titles of pages and subtitles of paragraphs. */
h1,h2,h3,h4,h5,h6 {
	font-size: 11px;
	color: #5c5c5c;
	font-weight: bold;
}

/* Link styling. underline for normal links... */
a {
	color: #515151;
	text-decoration: underline;
}

/* ... but no underline and dark-red for hovered links. */
a:hover, a.activelink:hover {
	color: #851b25;
	text-decoration: none;
	background-color: #e6cfd0;
}

/* This is the styling of the link that's currently active by adding the class "activelink" to a link in the menu left. (See HTML) */
a.activelink {
	color: #cc2a38;
	text-decoration: underline;
}

/* Paragraphs should have a margin on the bottom to give texts some more space. Line-height is for the space between each line in a paragraph. */
p {
	line-height: 16px;
	margin-bottom: 10px;
}

p.last {
	line-height: 16px;
	margin-bottom: 10px;
}

p.img {
	margin-bottom: 90px;
}

p.imglast {
	margin-bottom: 100px;
}
/* -= END GENERAL STYLING =- */


/* The container centers the page and holds the background image on top of the page. */
#container {
	width: 760px;
	background: #d3d3d3 url(images/wallpaper.jpg) top center no-repeat;
	margin: 0 auto;
	min-height: 90%;
	_height: 90%;
}

/* Some divs contain same widths. To save lines, we all line-em-up here! */
#contents, #header-top, #header, #welcome, #core {
	width: 457px;
}

/* The div containing the actual website is smaller then the wallpaper used in #container. Therefore is another div used to determine and fix width and position. */
#contents {
	min-height: 100%;
	_height: 100%;
	margin-left: 294px;
	background: url(images/contents-repeat.jpg) top center repeat-y;
}

/* A dirty trick to the get the header to fit exactly on the wallpaper used in #container. This is the upper part of the template, above the logo */
#header-top {
	height: 33px;
	background: #d3d3d3 url(images/header-top.jpg) top center no-repeat;
}

/* The header contains the logo of the website. */
#header {
	height: 84px;
	background: #282828 url(images/header.jpg) top center no-repeat;
}

/* The headings h1 and h2 in the #header, are only visible for bots and textbrowsers. Normal browsers can display the logo. */
#header h1, #header h2 {
	display: none;
}

/* The navbar contains the menu on top, with the reflected links. */
#navbar {
	height: 36px;
	background: #282828 url(images/navbar.gif) top center no-repeat;
	text-align: center;
	position: relative;
}

/* The links in the menu on top are wrapped within a list and hovers are done with CSS, not with javascript image swapping. */
	#navbar ul {
		display: block;
		width: 400px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -18px;
		margin-left: -140px;
		text-align: center;
		height: 36px;
	}
	#navbar li {
		display: block;
		height: 36px;
		float: left;
		width: auto;
		margin: 0 5px;
		line-height: 36px;
		vertical-align: middle;
	}
	#navbar a {
		width: auto;
		float: left;
		margin: 0;
		padding: 0 10px;
		display: block;
		height: 36px;
		line-height: 36px;
		vertical-align: middle;
	}
	
	/* HOME */
	a#home {
		background: #1e1e1e url(images/button-home.jpg) center center no-repeat;
		text-decoration: none;
	}
	a#home:hover {
		background: #1e1e1e url(images/button-home-active.jpg) center center no-repeat;
	}
	
	/* ABOUT US */
	a#about {
		background: #1e1e1e url(images/button-about.jpg) center center no-repeat;
		text-decoration: none;
	}
	a#about:hover {
		background: #1e1e1e url(images/button-about-active.jpg) center center no-repeat;
	}
	
	/* PORTFOLIO */
	a#portfolio {
		background: #1e1e1e url(images/button-portfolio.jpg) center center no-repeat;
		text-decoration: none;
	}
	a#portfolio:hover {
		background: #1e1e1e url(images/button-portfolio-active.jpg) center center no-repeat;
	}
	
	/* CONTACT US */
	a#contact {
		background: #1e1e1e url(images/button-contact.jpg) center center no-repeat;
		text-decoration: none;
	}
	a#contact:hover {
		background: #1e1e1e url(images/button-contact-active.jpg) center center no-repeat;
	}
	
	
	
	
	a span {
		visibility: hidden;
	}

/* This div contains the "Welcome to Silkwebs" banner */
#welcome {
	height: 63px;
	background: #bdc0c3 url(images/welcome-to-silkwebs.jpg) top center no-repeat;
}

/* This div contains the core texts and left menu. */
#core {
	min-height: 280px;
	_height: 280px;
	background: url(images/contents-back.jpg) top center no-repeat;
}

#bottomLeft {
	float: left;
	width: 200px;
	margin: 0; padding: 0;
}

#bottomRight {
	float: right;
	width: 200px;
	margin: 0; padding: 0;
}

#bottomLeft h2 { color: #851b25; font-size: 11px; font-weight: bold; display: block; margin: 10px 0 0 20px; text-indent: 10px; background: url(images/menu-heading.gif) left center no-repeat; }
#bottomLeft ul { padding: 10px 0px 20px 20px; }
#bottomLeft li { line-height: 18px; }

#bottomRight h2 { color: #851b25; font-size: 11px; font-weight: bold; display: block; margin: 10px 0 0 20px; text-indent: 10px; background: url(images/menu-heading.gif) left center no-repeat; }
#bottomRight ul { padding: 10px 0px 20px 20px; }
#bottomRight li { line-height: 18px; }

/* The menu on the left */
#left {
	width: 1px;
	min-height: 280px;
	_height: 280px;
	float: left;
	margin-top: 10px;
}
/* The headings in #left differ from the standard styling */
	#left h2 {
		color: #851b25;
		font-size: 11px;
		font-weight: normal;
		display: block;
		width: auto;
		height: auto;
		margin: 10px 0 0 20px;
		text-indent: 10px;
		background: url(images/menu-heading.gif) left center no-repeat;
	}

/* The menu in #left should have some paddings */
	#left ul {
		padding: 10px 0px 20px 20px;
	}
/* The listitems should have some nice line-height to give them some vertical paddings */
	#left li {
		line-height: 18px;
	}
	
/* The right div holds all text and image in the core of the template */
#right {
	width: 415px;
	padding: 10px 20px 0px 10px;
	float: right;
	margin-top: 10px;
}
	
	
/* The footer. */
#footer {
	clear: both;
	height: 42px;
	background: #d1d1d1 url(images/footer.jpg) top center no-repeat;
	margin-left: 286px;
	color: #7b7b7b;
	text-align: center;
}
	#footer a {
		color: #7b7b7b;
	}
	#footer p {
		padding: 8px 0 0 0;
	}
	#footer span {
		margin-right: 20px;
	}
	#footer p img {
		margin-right: 3px;
		vertical-align: text-bottom;
	}