body,html {
	margin: 0;
	padding: 0;
	font-size: 1em;
}
body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 80%;
	margin: 0;
	padding: 0;
	background-color: #0088cf;
	overflow-x: hidden;
}

img {
	border: 0;
}

.wrapper {
	position: relative;
	z-index: 2;
	width: 1000px;
	margin: 0 auto;
}


div.header, div.menu, div.tiles, div.footer {
	position: relative;
	clear: both;
	z-index: 3;
}

/* Header */
div.header {
	padding-top: 10px;
}
div.header div.slogan {
	margin-top: 15px;
	float: left;
}
div.header div.logo {
	float: right;
    position: relative;
    z-index: 20;
    margin-top: -5px;
    margin-right: 30px;
}

/* Menu */
div.menu {
	
	position: absolute;
	top: 129px;
	overflow: visible;
	z-index: 5;
	
}
div.menu ul {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	overflow: visible;
}
div.menu ul li {
	float: left;
	width: 160px;
	text-align: center;
	position: relative;
	overflow: visible;
}
div.menu img {
	border: 0;
}
div.menu a {
	text-decoration: none;
}

div.menu li span strong {
	display: none;
}

div.menu li span {
	display: block;
	width: 144px;
	height: 40px;
	background-position: left top;
	background-repeat: no-repeat;
	background-color: red;
}

ul.submenu {
	position: absolute;
	left:-5px;
	top:122px;
	background: white;
	border: 4px solid #a1a3a6;
	list-style: disc;
	padding: 5px 3px;
	margin: 0;
	text-align: left;
	z-index: 7;
	line-height: 1.2em;
	font-size: 90%;
}
.menu ul ul li {
	float: none;
	display: block;
	text-align: left;
	padding: 5px 0;
}

.menu span.om-skolan {
	background-image: url('images/om-skolan.png') ;
}
.menu span.vara-program {
	background-image: url('images/vara-program.png') ;
}
.menu span.vi-tycker {
	background-image: url('images/vi-tycker.png') ;
}
.menu span.bildarkivet {
	background-image: url('images/bildarkivet.png') ;
}
.menu span.nyheter {
	background-image: url('images/nyheter.png') ;
}
.menu span.skrivet {
	background-image: url('images/skrivet.png') ;
}

/* Tiles */
.tiles {
	position: absolute;
	top: 160px;
}
.tile1 {
	float: left;
	clear: left;
	width: 458px;
}
.tile1 div {
	clear: none;
}
.tile1 .content {
	float: left;
	width: 240px;
	height: 190px;
	background: white;
	position: relative;
}
.tile1 .top {
	width: 458px;
	height: 119px;
	float: left;
	background: url('images/tile1-top.png') top left no-repeat;
}
.tile1 .left {
	width: 114px;
	height: 190px;
	float: left;
	background: url('images/tile1-left.png') top left no-repeat;
}
.tile1 .right {
	width: 104px;
	height: 190px;
	float: left;
	background: url('images/tile1-right.png') top left no-repeat;
}
.tile1 .bottom {
	width: 458px;
	height: 103px;
	float: left;
	background: url('images/tile1-bottom.png') top left no-repeat;
}
.tile2 {
	float: left;
	clear: right;
	width: 503px;
}
.tile2 div {
	clear: none;
}
.tile2 .content {
	float: left;
	width: 242px;
	height: 192px;
	background: white;
	position: relative;
}
.tile2 .top {
	width: 488px;
	height: 84px;
	float: left;
	background: url('images/tile2-top.png') top left no-repeat;
}
.tile2 .left {
	width: 107px;
	height: 192px;
	float: left;
	background: url('images/tile2-left.png') top left no-repeat;
}
.tile2 .right {
	width: 146px;
	height: 192px;
	float: left;
	background: url('images/tile2-right.png') top left no-repeat;
}
.tile2 .bottom {
	width: 503px;
	height: 119px;
	float: left;
	background: url('images/tile2-bottom.png') top left no-repeat;
}
.tile1 .content img, .tile1 .content span, .tile2 .content img, .tile2 .content span {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 80%;
	overflow: hidden;
	background-color: white;
}
.tile1 .content span {
	display: block;
	width: 230px;
	height: 180px;
	padding: 5px;
}
.tile2 .content span {
	display: block;
	width: 242px;
	height: 192px;
}

.content .slogan {
	opacity: 0;
	filter: alpha(opacity = 0);

}
#slogan_rotator1 {
	opacity: 1;filter: alpha(opacity = 100);

}

div.footer {
	position: absolute;
	top: 700px;
	padding-left: 35px;
	padding-bottom: 30px;
}

.footer .box {
	float: left;
	margin-right: 50px;
	width: 180px;
	height: 220px;
	font-size: 90%;
	border: 4px solid #a1a3a6;
	background-color: white;
	text-align: center;
}
.footer .box h2 {
	height: 58px;
	background: top left no-repeat;
	margin: 0;
	padding: 0;
}
.footer .box h2 strong {
	display: none;
}
.footer .box h2.youtube {
	background-image: url('images/youtube.png');
}
.footer .box h2.facebook {
	background-image: url('images/facebook.png');
}
.footer .box h2.ung-i-tanum {
	background-image: url('images/ung-i-tanum.png');
}
.footer .box h2.uf {
	background-image: url('images/uf.png');
}
.footer .box h2.tanum {
	background-image: url('images/tanums-kommun.png');
}
	
.footer .boxbox {
	padding: 5px;
}
.footer a {
	text-decoration: none;
}


/* Ribbon Styling */
.ribbon {
	
	width: 1000px;
	position: absolute;
	background: url('images/ribbon.png');
	height: 120px;
	left: 0;
	top: 73px;
	z-index: 1;
	
}
.ribbon-left, .ribbon-right {
	width: 100%;
	position: absolute;
	top: 0;
	background-color: white;
}
.ribbon-left {
	left: -49%;
	height: 82px;
}
.ribbon-right {
	left: 49%;
	height: 185px;
}


/* YouTube Box */
#youtube img {
	border: 1px solid silver;
	margin-bottom: 5px;
}
#youtube a {
	text-decoration: none;
}
.yt_title {
	clear: both;
	font-size: 80%;
}