/*-------------------------------------------------------------

	Stylesheet for NiceNailsVaxjo.com

	

	Author:		Gabriel Svennerberg

	Email:		gabriel@svennerberg.com

	Website:	http://www.svennerberg.com

	Create:		2007-09-11

-------------------------------------------------------------*/



body {

	font-family: Verdana, Arial, Sans-Serif;

	font-size: .7em;

	background: #fff;

	margin: 0;

}

h2 {

	font-size: 140%;

	margin: 0 0 .5em;

}

h3 {

	font-size: 110%;

	font-weight: bold;

	margin: 1em 0 .1em;

}

h4 {



}

p {

	margin: .1em 0 1em;

}



.ingress {

	font-weight: bold;

}

.time {

	margin: 0;

}





a:link,

a:visited {

	color: #c00;

}

a:hover,

a:active {

	color: #f00;

}





input,

select, 

textarea {

	font-family: Verdana, Arial, Sans-Serif;

	font-size: 100%;

}



hr {

	height: 1px;

	color: #eee;

	background: #eee;

	border: none;

	margin: 1em 0;

}





/* Wrapper

-------------------------------------------------------------*/

#wrapper {

	width: 875px;

}





/* Navigation

-------------------------------------------------------------*/

#navigation {

	margin: 0;

	padding: 0;

	list-style: none;

	height: 132px;

	background: url(../img/navigation/bg.jpg) bottom left no-repeat;

}

#navigation li {

	display: block;

	float: left;

	height: 126px;

	width: 113px;

}

#navigation a {

	display: block;

	height: 126px

}

#navigation span {

	position: absolute;

	left: -200px;

	top: -200px;

}





#navigation .start {

	background: url(../img/navigation/start-img.jpg) top left no-repeat;

	width: 106px;

}

#navigation .start a {

	background: url(../img/navigation/start.gif) top right no-repeat;

}

#start .start a {

	background: url(../img/navigation/start-on.gif) top right no-repeat;

}





#navigation .sortiment {

	background: url(../img/navigation/sortiment-img.jpg) top left no-repeat;

}

#navigation .sortiment a {

	background: url(../img/navigation/sortiment.gif) top right no-repeat;

}

#sortiment .sortiment a {

	background: url(../img/navigation/sortiment-on.gif) top right no-repeat;

}





#navigation .behandlingar {

	background: url(../img/navigation/behandlingar-img.jpg) top left no-repeat;

}

#navigation .behandlingar a {

	background: url(../img/navigation/behandlingar.gif) top right no-repeat;

}

#behandlingar .behandlingar a {

	background: url(../img/navigation/behandlingar-on.gif) top right no-repeat;

}





#navigation .prislista {

	background: url(../img/navigation/prislista-img.jpg) top left no-repeat;

}

#navigation .prislista a {

	background: url(../img/navigation/prislista.gif) top right no-repeat;

}

#prislista .prislista a {

	background: url(../img/navigation/prislista-on.gif) top right no-repeat;

}





#navigation .bildarkiv {

	background: url(../img/navigation/bildarkiv-img.jpg) top left no-repeat;

}

#navigation .bildarkiv a {

	background: url(../img/navigation/bildarkiv.gif) top right no-repeat;

}

#bildarkiv .bildarkiv a {

	background: url(../img/navigation/bildarkiv-on.gif) top right no-repeat;

}





#navigation .kontakt {

	background: url(../img/navigation/kontakt-img.jpg) top left no-repeat;

}

#navigation .kontakt a {

	background: url(../img/navigation/kontakt.gif) top right no-repeat;

}

#kontakt .kontakt a {

	background: url(../img/navigation/kontakt-on.gif) top right no-repeat;

}





/* Branding

-------------------------------------------------------------*/

#branding {

	background: #000 url(../img/nn.gif) top right no-repeat;

	height: 79px;

}

#branding h1 {

	position: relative;

	height: 79px;

	top: 20px;

	left: 20px;

	color: #fff;

	margin: 0;

	font-size: 100%;

}

#branding h1 span {

	position: absolute;

	width: 100%;

	height: 100%;

}

#start #branding h1 span {

	background: url(../img/heading/start.gif) no-repeat;

}

#sortiment #branding h1 span {

	background: url(../img/heading/sortiment.gif) no-repeat;

}

#behandlingar #branding h1 span {

	background: url(../img/heading/behandlingar.gif) no-repeat;

}

#prislista #branding h1 span {

	background: url(../img/heading/prislista.gif) no-repeat;

}

#bildarkiv #branding h1 span {

	background: url(../img/heading/bildarkiv.gif) no-repeat;

}

#kontakt #branding h1 span {

	background: url(../img/heading/kontakt.gif) no-repeat;

}





/* Content

-------------------------------------------------------------*/

#content {

	margin: 40px 0 0 25px;

	float: left;

	clear: both;

	padding-bottom: 1em;

	width: 820px;

	min-height: 418px;

}











/* Start

-------------------------------------------------------------*/

#start #content {

	width: 540px;

	padding-right: 300px;

	background: url(../img/hand.jpg) bottom right no-repeat;

}



.columns {

	width: 535px;

	float: left;

}

#openhours {

	float: left;

	width: 300px;

}

#links {

	float: left;

	width: 200px;

	margin-left: 35px;

}

.columns div {

	float: left;

	width: 250px;

	margin-left: 35px;

}

.columns div {

	margin: 0;

}



.links {

	margin: 0 0 1em;

	padding: 0;

	list-style: none;

}



/* Behandlingar

-------------------------------------------------------------*/

#behandlingar #content {

	width: 520px;

	padding-right: 300px;

	background: url(../img/ballong.jpg) right top no-repeat;

}



/* bildarkiv, kontakt, sortiment

-------------------------------------------------------------*/

#bildarkiv #content,

#sortiment #content,

#kontakt #content {

	width: 560px;

	padding-right: 260px;

	background: url(../img/vitt.jpg) right top no-repeat;

}





/* Sortiment

-------------------------------------------------------------*/

#sortiment .main {

	float: left;

	width: 370px;

}

#sortiment .images {

	float: right;

	width: 150px;

	margin-left: 20px;

	text-align: center;

}

#sortiment .images img {

	margin-bottom: 20px;	

}





/* Bildarkiv

-------------------------------------------------------------*/

#bildarkiv .images div {

	float: left;

	width: 150px;

	margin-right: 20px;

	margin-bottom: 20px;

}

#bildarkiv .images img {

	border: 2px solid #fff;

}

#bildarkiv .images a:hover img {

	border-color: #000;

}





/* Kontakt

-------------------------------------------------------------*/

#kontakt .vcard {

	width: 220px;

	float: left;

}

.vcard .adress {

	margin-bottom: 1em;

}

.vcard .epost {

	margin-top: 1em;

}

#contact {

	float: right;

	width: 300px;

	margin: 0 0 0 40px;

	padding: 0;

}

#contact fieldset {

	margin: 0;

	padding: 0;

	border: none;

}

#contact label {

	display: block;

	width: 94px;

	float: left;

}

#contact #name,

#contact #phone,

#contact #message {

	width: 200px;

	margin-bottom: 5px;

}

#contact #message {

	height: 100px;

}

#contact #submit {

	margin-left: 94px;

}

#contact h3 {

	margin-top: 0;

}



/* Prislista

-------------------------------------------------------------*/



#pricelist {

	margin: 1em 0 2em;

	border-collapse: collapse;

	width: 100%;

}

#pricelist td {

	border-top: 1px solid #e8e8e8;

	padding: 5px;

	vertical-align: bottom;

	

}

#pricelist tr.first td {

	border: none;

}

col.price {

	width: 90px;

}





.pricelist {

	margin: 10px 0;

	border-collapse: collapse;

	width: 540px;

}

.pricelist .last td {

	border-bottom: 1px solid #e8e8e8;

	padding-bottom: 20px;

}

.pricelist td {

	padding: 5px 0;

	vertical-align: top;

	

}

.pricelist tr.first td {

	border: none;

}

.pricelist h3,

.pricelist p {

	margin: 0 0 .2em;

}

.price  {

	width: 6em;

	text-align: right;

	font-weight: bold;

}



/* Validationerrors

-------------------------------------------------------------*/

.validationerrors {

	border: 1px solid #f00;

	padding: 10px;

	background: #ffc;

	margin-bottom: 1em;

}

.validationerrors ul {

	margin: 1em 0 0 1.5em;

	padding: 0;

}



.validationerror label {

	font-weight: bold;

	color: #f00;

}





/* Footer

-------------------------------------------------------------*/

#footer {

	background: url(../img/bottom.jpg) top left no-repeat;

	float: left;

	padding: 3px 25px 2px;

}

#footer p {

	float: right;

	margin: 0 0 20px;

	color: #fff;

}



/* bottommenu

-------------------------------------------------------------*/

#bottommenu {

	margin: 0;

	padding: 0;

	float: left;

}

#bottommenu li {

	display: inline;

	color: #fff;

	text-transform: uppercase;

	margin-right: 10px;

}

#bottommenu li a {

	color: #fff;

	text-decoration: none;

}

#bottommenu li a:hover {

	color: #fff;

	text-decoration: underline;

}





/* Misc classes

-------------------------------------------------------------*/

.clear {

	clear: both;

}