@import "reset.css";

body {
	background: url(img/grain_bg.jpg);
	background-color: #e8e8e8;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	font-size: 13px;
	color: #4c4c4c
	min-width: 960px;
	text-align: center;
	}

#container { 
	margin: 0 auto;
	width: 960px;
	text-align: left;
	} 

#aboutContainer { 
	margin: 0 auto;
	padding: 25px 0 0 0;
	width: 720px;
	text-align: left;
	} 

#nav {
	height: 23px;
	margin: 32px 112px 30px 0;
	width: 960px;
	display: block;
	float: right;
	}

#navhold { 
	height: 23px;
	margin: 0;
	width: 294px;
	display: block;
	float: right;
	}

#header {
	background: url(img/header.png) no-repeat;
	display: block;
	float: left;
	height: 267px;
	margin: 0 0 -100px 0;
	width: 960px;
	}

#project01 {
	background: url(img/web_ecco.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	width: 960px;
	}

#projectinfo01 {
	background: url(img/web_ecco_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 930px;
	}

#project02 a {
	background: url(img/web_joof_sm.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo02 {
	background: url(img/web_joof_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 884px;
	}

#project03 {
	background: url(img/web_idag365.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo03 {
	background: url(img/web_idag365_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 869px;
	}

#project04 a {
	background: url(img/web_scipark.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo04 {
	background: url(img/web_scipark_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 942px;
	}

#project05 a {
	background: url(img/web_totiki+app.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo05 {
	background: url(img/web_totiki_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 922px;
	}

#project06 a {
	background: url(img/web_ls8_sm.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo06 {
	background: url(img/web_ls8_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 953px;
	}

#project07 a {
	background: url(img/web_skoljournalen.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo07 {
	background: url(img/web_skoljournalen_info.png) no-repeat;
	display: block;
	float: left;
	height: 64px;
	margin: 15px 0 60px 0;
	width: 682px;
	}

#project08 a {
	background: url(img/web_surfat.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo08 {
	background: url(img/web_surfat_info.png) no-repeat;
	display: block;
	float: left;
	height: 64px;
	margin: 15px 0 60px 0;
	width: 649px;
	}

#project09 a {
	background: url(img/web_nordea2.jpg) no-repeat;
	display: block;
	float: left;
	height: 620px;
	margin: 0 0 0 0;
	text-indent: -10000px;
	width: 960px;
	}

#projectinfo09 {
	background: url(img/web_nordea2_info.png) no-repeat;
	display: block;
	float: left;
	height: 96px;
	margin: 15px 0 60px 0;
	width: 939px;
	}

ul#navigation { background: url(img/navigation.jpg) 0 0 no-repeat; height: 23px; width: 376px; }
ul#navigation li { display: block; float: left; }
ul#navigation li a { background: url(img/navigation.jpg) no-repeat; display: block; height: 23px; text-indent: -10000px; }

ul#navigation li a#logotypes { background-position: 0px 0px; width: 84px; }
ul#navigation li a#logotypes:hover { background-position: 0px -23px; }
ul#navigation li.active a#logotypes { background-position: 0px -46px; }

ul#navigation li a#web { background-position: -84px 0px; width: 44px; }
ul#navigation li a#web:hover { background-position: -84px -23px; }
ul#navigation li.active a#web { background-position: -84px -46px; }

ul#navigation li a#print { background-position: -128px 0px; width: 48px; }
ul#navigation li a#print:hover { background-position: -128px -23px; }
ul#navigation li.active a#print { background-position: -128px -46px; }

ul#navigation li a#packaging { background-position: -176px 0px; width: 82px; }
ul#navigation li a#packaging:hover { background-position: -176px -23px; }
ul#navigation li.active a#packaging { background-position: -176px -46px; }

ul#navigation li a#about { background-position: -258px 0px; width: 54px; }
ul#navigation li a#about:hover { background-position: -258px -23px; }
ul#navigation li.active a#about { background-position: -258px -46px; }

ul#navigation li a#contact { background-position: -313px 0px; width: 63px; }
ul#navigation li a#contact:hover { background-position: -313px -23px; }
ul#navigation li.active a#contact { background-position: -313px -46px; }


a:link {
	color: #198dae;
	text-decoration: none;
	}

a:hover {
	text-decoration: dotted;
	color: #4c4c4c;
	}

a:visited {
	text-decoration: underline;
	color: #198dae;
	}

a:active {
	text-decoration: none;
	}

div#samples img {
	margin: 0 auto;
	padding: 25px 0 0 0;
	text-align: left;
	}

div#samples a img, div#samples a:link img, div#samples a:visited img {
	padding: 0;
	margin: 0 25px 25px 0;
	border: 6px solid #fff;
	background: #fff;
	text-decoration: none;
	}
	
div#samples a:hover img {
	border: 6px solid #2d3339;
	background: #fff;
	text-decoration: none;
	}

div#soundcloud {
	margin: 0 auto;
	padding: 0 0 35px 0;
	}