* {
	margin: 0;
	padding: 0;
	outline: none;
}

.imageLoader {
background: url(images/hov-back.jpg);
background: url(images/hov-home.png);
background: url(images/hov-services.png);
background: url(images/hov-portfolio.png);
background: url(images/hov-webdesign.jpg);
background: url(images/hov-animations.jpg);
background: url(images/hov-graphic-design.jpg);
background: url(images/hov-contact.jpg);
visibility: hidden;
}


body {
	width: 1000px;
	margin: auto;
	font: 70%/16px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	background: #022741 url(/images/bar.jpg) repeat-x;
}

a {
	color: #fff000;
	outline: none;
}

a:hover {
	text-decoration: none;
}

p { 
	margin: 5px 0 10px 0; 
	line-height:1.5em; 
	font-size:110%; 
}
	
p#about {
	width: 400px;
}

h1 { 
	font-family:'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
	font-size:2.2em;
	font-weight:normal;
	text-transform:uppercase;
	color: #fff200;
	margin-top: 100px;
	margin-bottom: 20px;
	}
	
h2 { 
	font-family:'Trebuchet MS',Verdana, Arial, Helvetica, sans-serif;
	font-size:1.7em;
	font-weight:normal;
	text-transform:uppercase;
	color: #fff;
	margin-top: 100px;
	margin-bottom: 20px;
	}
	
h4 {
	text-align: center;
	font-size: 1.2em;
}
	
h5 {
	margin-bottom: 5px;
}
	
	
h1#logo {
	Background: url(/images/logo-name.png) no-repeat;
	text-indent: -2000px; 
	height: 116px;
	width: 258px;
	position: absolute;
	margin-top: 3px;
	margin-left: -30px;
}


h1#moon {
	Background: url(/images/moon.png) no-repeat;
	text-indent: -2000px; 
	height: 108px;
	width: 109px;
	position: absolute;
	margin-top: 260px;
	margin-left: -30px;
}

h6#featured {
	background: url(/images/yfd-mov-feat.png) no-repeat;
	text-indent: -2000px;
	height: 205px;
	width: 350px;
}

h6#featured a {
	display: block;
	height: 205px;
	width: 350px;
}


/* @DIVISIONS */

#header {
	position: relative;
	width: 1000px;
	height: 100px;
	margin-top: 30px;
}

#master {
	width: 1000px;
	margin-bottom: 40px;
	border-bottom: solid 1px;
}

#container-top {
	width: 1000px;
	overflow: hidden;
}

.column-top {
 	float: left;
 	width: 500px;
}

.last {
	
}

#container-bot {
	width: 1000px;
	margin: auto; 
	overflow: hidden;
	border-top: solid 1px;
}

.column-bot {
 	float: left;
 	width: 333px;
}

.last {
	
}

.info {
	margin-top: 150px;
	margin-bottom: 100px;
	margin-left: 50px;
}

.fill {
	width: inherit;
	height: 250px;
}

.video-big {
	width: 557px;
	height: 320px;
	margin: auto;
}

.video-medium {
	width: 468px;
	height: 320px;
	margin: auto;
}

.video-medium2 {
	width: 512px;
	height: 320px;
	margin: auto;
}

.video-small {
	width: 400px;
	height: 320px;
	margin: auto;
}

.video-background {
	width: 600px;
	height: 322px;
	background: #161615;
	margin: 100px auto;
	padding-top: 1px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}


#footer {
	margin-top: -49px;
	clear: both;
}

/* @BOXES */

.box {
	background: #151515;
	width: 249px;
	height: 190px;
	margin: 50px auto;
	text-indent: -2000px;
	border-top: solid 16px #151515;
	border-bottom: solid 16px #151515;
	border-right: solid 2px #151515;
	border-left: solid 2px #151515;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.box a {
	display: block;
	width: 249px;
	height: 190px;
}

.box a:hover {
	
}

.box p {
	margin: 0
}

.box h3 {
	width: 249px;
	height: 190px;
	text-indent: -2000px;
}

h3#art-web-pbg { background: #fff url(/images/pbg-web.jpg) center no-repeat; }
h3#art-web-terapi { background: #fff url(/images/terapi-web.jpg) center no-repeat; }
h3#art-web-sarah { background: #fff url(/images/sarah-web.jpg) center no-repeat; }
h3#art-web-alex { background: #fff url(/images/alex-web.jpg) center no-repeat; }
h3#art-web-renande { background: #fff url(/images/renande-web.jpg) center no-repeat; }
h3#art-web-3d { background: #fff url(/images/3d-web.jpg) center no-repeat; }

h3#art-ani-rod { background: #000 url(/images/rodluvan-mov.jpg) center no-repeat; }
h3#art-ani-pbg { background: #000 url(/images/pbg-mov.jpg) center no-repeat; }
h3#art-ani-yfd { background: #000 url(/images/yfd-mov.jpg) center no-repeat; }
h3#art-ani-tvt { background: #000 url(/images/tvt-mov.jpg) center no-repeat; }
h3#art-ani-tra { background: #000 url(/images/tra-mov.jpg) center no-repeat; }
h3#art-ani-ctb { background: #000 url(/images/ctb-mov.jpg) center no-repeat; }
h3#art-ani-spa { background: #000 url(/images/space-mov.jpg) center no-repeat; }
h3#art-ani-met { background: #000 url(/images/metro-mov.jpg) center no-repeat; }

h3#art-gra-snow { background: #fff url(/images/snowman.jpg) center no-repeat; }
h3#art-gra-myth { background: #fff url(/images/myth-s.jpg) center no-repeat; }
h3#art-gra-milk { background: #fff url(/images/milk-s.jpg) center no-repeat; }
h3#art-gra-aztec { background: #fff url(/images/aztec-s.jpg) center no-repeat; }
h3#art-gra-bug { background: #fff url(/images/bug-s.jpg) center no-repeat; }
h3#art-gra-tree { background: #fff url(/images/tree-s.jpg) center no-repeat; }
h3#art-gra-dj { background: #fff url(/images/dj-s.jpg) center no-repeat; }
h3#art-gra-gavle { background: #fff url(/images/gavle-s.jpg) center no-repeat; }
h3#art-gra-room { background: #fff url(/images/room-s.jpg) center no-repeat; }
h3#art-gra-factory { background: #fff url(/images/factory-s.jpg) center no-repeat; }
h3#art-gra-hohlwein { background: #fff url(/images/hohlwein-s.jpg) center no-repeat; }




/* @MAIN NAV */

ul#nav {
	list-style: none;
	position: absolute;
	top: 50px;
	left: 400px;
	border-bottom: 1px solid;
}

#nav li {
	float: left;
	margin-right: 30px;
}

ul#nav a {
	display: block;
	height: 50px;
	width: 90px
}

#home:link {background: url(images/hov-home.png) no-repeat; text-indent: -2000px;}
#home {background: url(images/home.png) no-repeat; text-indent: -2000px;}
#djd #home, #home:hover {background: url(images/hov-home.png) no-repeat; text-indent: -2000px;}

#services:link {background: url(images/hov-services.png) no-repeat; text-indent: -2000px;}
#services {background: url(images/services.png) no-repeat; text-indent: -2000px;}
#serv #services, #services:hover {background: url(images/hov-services.png) no-repeat; text-indent: -2000px;}

#portfolio:link {background: url(images/hov-portfolio.png) no-repeat; text-indent: -2000px;}
#portfolio {background: url(images/portfolio.png) no-repeat; text-indent: -2000px;}
#port #portfolio, #portfolio:hover {background: url(images/hov-portfolio.png) no-repeat; text-indent: -2000px;}

#gra #portfolio, #portfolio:hover {background: url(images/hov-portfolio.png) no-repeat; text-indent: -2000px;}
#web #portfolio, #portfolio:hover {background: url(images/hov-portfolio.png) no-repeat; text-indent: -2000px;}
#ani #portfolio, #portfolio:hover {background: url(images/hov-portfolio.png) no-repeat; text-indent: -2000px;}

#swedish {
	background: url(/images/sweden.png) no-repeat;
	text-indent: -2000px;
	margin-top: 7px;
	margin-left: 100px;
	height: 38px;
	width: 38px;
}

#english {
	background: url(/images/usa.png) no-repeat;
	text-indent: -2000px;
	margin-top: 7px;
	margin-left: -25px;
	height: 38px;
	width: 38px;
}

/* @PORTFOLIO */


.portfolio-nav h2 {
	text-indent: -2000px;
	width: 249px;
	height: 49px;
	margin: 0 auto;
}

.portfolio-nav a {
	display: block;
	width: 249px;
	height: 49px;
}

.webdesign {background: url(/images/webdesign.jpg) no-repeat; text-indent: -2000px;}
.animations {background: url(/images/animations.jpg) no-repeat; text-indent: -2000px;}
.graphic-design{background: url(/images/graphic-design.jpg) no-repeat; text-indent: -2000px;}

/*
.webdesign:link {background: url(images/hov-webdesign.jpg) no-repeat; text-indent: -2000px;}

#web .webdesign, .webdesign:hover {background: url(images/hov-webdesign.jpg) no-repeat; text-indent: -2000px;}

.animations:link {background: url(images/hov-animations.jpg) no-repeat; text-indent: -2000px;}

#ani .animations, .animations:hover {background: url(images/hov-animations.jpg) no-repeat; text-indent: -2000px;}

.graphic-design:link {background: url(images/hov-graphic-design.jpg) no-repeat; text-indent: -2000px;}

#gra .graphic-design, .graphic-design:hover {background: url(images/hov-graphic-design.jpg) no-repeat; text-indent: -2000px;}
*/


.art-text {
	height: 40px;
	width: 249px;
	margin: -45px auto;
}

.art-text p {
	text-align: center;

}

.art-text a {
	color: #fff;
}


/* @SERVICES */



.serv {
	width: 249px;
	margin: 50px auto;
}

.serv p {
	margin: 0;
	padding: 0;
	display: inline;
}

/* @CONTACT ETC */

#contact {
	background: url(/images/contact.jpg) no-repeat;
	width: 249px;
	height: 49px;
	float: right;
	margin-right: 42px;
}


#contact a {
	text-indent: -2000px;
	display: block;
	width: 249px;
	height: 49px;
	text-decoration: none;
}

/*
#contact:hover {background: url(/images/hov-contact.jpg) no-repeat; text-indent: -2000px;}
*/

#back {
	background: url(/images/back.jpg) no-repeat;
	text-indent: -2000px;
	width: 249px;
	height: 49px;
	
	margin-left: 41px;
}

#back a {
	display: block;
	width: 249px;
	height: 49px;
}


.contact-info {
	margin-top: 150px;
	margin-bottom: 100px;
}

.contact-info p{
	font-size: 1.9em;
}

/*
#back:hover {background: url(/images/hov-back.jpg) no-repeat; text-indent: -2000px;}
*/

input {
	background: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none;
	height: 25px;
	margin-bottom: 10px;
	font-size: 1.5em;
}

input#sub {
	font-size: 1em;
	padding: 5px 5px;
	margin-left: 350px;
}

input#sub:hover {
	color: yellow;
}

textarea {
	background: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none;
	font-size: 1.5em;
}

label {
	font-size: 1.2em;

}