Hej

css/style.css

@@ -7,10 +7,63 @@ body {
 
 header {
   height:100px;
-  background:#dbdbdb;
+  background:white;
   width:100%;
   z-index:10;
   position:fixed;
+  border-bottom:1px groove;
+}
+
+
+/***** Text *****/
+p {
+	line-height:150%;
+}
+
+h1 {
+	font-size:48pt;
+	font-family: Museo-500;
+	margin:0 0 40px 0;
+	width:50%;
+	padding-top:50px;
+	color:#DFFOD8 !important;
+}
+
+h2 {
+	font-size:48pt;
+	font-family: Museo-500;
+	margin:0 0 40px 0;
+	width:150%;
+	padding-top:50px;
+}
+
+h3 {
+	font-size:48pt;
+	font-family: Museo-500;
+	margin:0 0 40px 0;
+	width:50%;
+	padding-top:50px;
+	color:#ffffcc;
+}
+
+h4 {
+	font-size:20pt;
+}
+
+a {
+	line-height:150%;
+	color:white;
+	font-family:text;
+}
+
+/****** Fonts ******/
+@font-face {
+  font-family: 'Museo-500';
+  src: url('http://www.fontsaddict.com/fontface/museo-500.otf');
+}
+@font-face {
+	font-family:'text';
+	src: url(../fonts/OpenSans-Regular.ttf);
 }
 
 
@@ -32,61 +85,192 @@ header {
   background:#ebebeb;
   height:300px;
 }
+#welcome {
+	margin-left:18%; 
+	margin-top:10%
+}
 
 
 /***** Header *****/
 #logo {
 	float:left;
-	height:100%;
-	width:20%;
-	margin-left:0.5%;
+	height:90%;
+	width:371px;
+	margin-left:10%;
+	margin-top:0.2%;
 }
 
 #nav {
-	float:right;
+	float:left;
+	display:block;
+	margin:50px 0 0 50px;
 }
 
 #nav a {
 	text-decoration:none;
-	color:#fff;
+	color:#000;
+	font-family:text;
 }
 
 #nav li {
 	list-style:none;
 	float:left;
-	margin-left:15px;
+	margin-left:65px;
 	padding-top:15px;
 }
 
+#link {
+	float:left;
+	display:block;
+}
+#link li {
+	list-style:none;
+	float:left;
+	margin-right:15px;
+}
+#link a {
+	text-decoration:none;
+	color:white;
+	font-family:text;
+}
+
 
 /***** Area ID *****/
 #area1 {
-	background:red;
+	background-image:url(../img/4.jpg);
+	background-size:cover;
+	background-position:center;
 	width:100%;
-	height:100%;
+	height:350%;
+	color:white;
+	font-family:text;
+	border-top:1px groove white;
 }
 
 #area2 {
-	background:green;
+	background:url(../img/5.jpg);
+	background-size:cover;
+	background-position:center;
 	width:100%;
-	height:100%;
+	height:250%;
+	color:#404040;
+	font-family:text;
 }
 
 #area3 {
-	background:blue;
+	background:url(../img/2.jpg);
+	background-size:cover;
+	background-position:center;
 	width:100%;
-	height:100%;
+	height:250%;
+	color:white;
+	font-family:text;
+	border-top:1px groove white;
 }
 
 #area4 {
-	background:yellow;
+	background:url(../img/6.jpg);
+	background-size:cover;
+	background-position:center;
+	width:100%;
+	height:250%;
+	color:white;
+	font-family:text;
+}
+
+#footer {
+	background:#262628;
 	width:100%;
-	height:100%;
+	height:85%;
+	color:white;
+	font-family:text;
+}
+
+
+/***** General ID's *****/
+#responsive {
+	position:relative;
+	top:0;
+	vertical-align:top;
+	left:100px;
 }
 
 
 /***** Main Classes *****/
 .content {
 	width:960px;
 	margin:0 auto;
-}
+}
+
+
+/***** Small classes *****/
+.footerTd {
+	width:320px;
+	font-size:10pt;
+	text-align:center;
+}
+
+.userPic {
+	width:250px;
+	height:auto;
+}
+
+.userAndKontaktTd {
+	width:480px;
+}
+
+.contactPic {
+	width:100px;
+	height:auto;
+} 
+
+.contactTd {
+	width:240px;
+}
+
+
+/***** Animations *****/
+
+
+
+
+/***** Referencer *****/
+#outerwrapper {
+	height:250px;
+	width:90%;
+	overflow:hidden;
+}
+
+#innerwrapper {
+	height:250px;
+	width:4000px;
+}
+
+.inner-slide {
+	height:250px;
+	width:350px;
+	float:left;
+}
+
+#left, #right {
+	cursor:pointer;
+	position:relative;
+}
+
+#left {
+	left:-424px;
+	top:23px;
+}
+
+#right {
+	left:434px;
+	top:23px;
+}
+
+.odd {
+	background:red;
+}
+
+.even {
+	background:gray;
+}