/* A container should group all your columns. */

.container {
  width: 880px;
  margin: 0 auto;
}

#footer {  width: 880px;
  margin: 0 auto;}


/* Body margin for a sensile default look. */
body {
	margin:10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 1.4;
	background: url(../img/graphics/bg.png) no-repeat center 8px;
}


a {
	color: #FF0000;
	text-decoration:none;
}
a:hover {
	color: #FF0000;
	text-decoration:underline;
}

.left {float: left;}
.right {float: right;}
img.right {margin: 0 0 10px 15px;}


/* Typography
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5 {
	line-height: 1.2;
	margin-bottom: 0.5em;
}
h1 small, h2 small, h3 small, h4 small {font-weight: normal;}

h1
	{
	font-size: 3.2em; /* Equivalent to 22pt */
	color: #FF0000;
}

h1 small {font-size: 1em;}
	
h2
	{
	font-size: 2em; /* Equivalent to 20pt */
	margin: 2em 0 0.5em 0;
}
	
h3
	{
	font-size: 1.8em; /* Equivalent to 18pt */
	color: #444;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}
	
h4
	{
	font-size: 1.6em; /* Equivalent to 18pt */
}
	
h5
	{
	font-size: 1.2em; /* Equivalent to 12pt */
	margin: 1em 0 0 0;
	text-transform:uppercase;
	color: #25364b;	
}
	
ul, ol, dl
	{
	list-style: none;
	font-size: 1.2em; /* Equivalent to 12pt */
}

p {
	font-size:1.2em;
	color: #333;
	margin-bottom: 1.2em;
}

.container ul {
	margin-bottom: 1.2em;
	list-style:outside;
	color: #333;
	padding-left: 20px;
}

.container ul li {
	margin-bottom: 0.3em;
}

.container p {font-size: 1.3em; margin-bottom: 1.3em; }



#footer p {border-top: 1px solid #999; padding: 20px 0; margin-top: 15px;}

li, dd, dt
	{
	font-size: inherit; /* Equivalent to 12pt */	
}

.intern {
	width: 90%;
	margin-bottom: 3em;
	border-bottom: 1px solid #ddd;
}

.intern td {padding: 2px 4px;font-size:1.2em;
	color: #333;
	
	}
	
.right_td {
	width: 300px;
	text-align:right;
}

.intern td.message_td {
	background-color:#eee;
	padding: 4px;
	border-top: 1px solid #ddd;
}
.message_td strong {
	float: left;
	display: block;
	clear:none;
}
.message_td div {
	float: left;
	margin-left: 20px;
	clear:none;
}
/* Header
-------------------------------------------------------------- */

.header {
	width: 960px;
	margin: 0 auto;
	background: url(../img/graphics/header2.jpg) no-repeat right top;
}

.header h1 {
	display: block;
	height: 110px;
	margin: 40px 0 0 37px;
	background: url(../img/graphics/logo.png) no-repeat 0 0;
	text-indent: -9000px;
}

.tjej {
	background: url(../img/graphics/tjej.jpg) no-repeat 450px 30px;
}

.toning {
	background: url(../img/graphics/toning.jpg) no-repeat 585px 40px;
}

.curl {
	background: url(../img/graphics/curl.jpg) no-repeat 290px 0px;
}

.pad_right {padding-right: 25px;}

/* Navigering
-------------------------------------------------------------- */

#nav {
	background: #000;
	padding: 5px 32px;
}
#nav ul {
	width: 780px;
	float: right;
	clear: none;
	margin:0; padding: 0;
}

#nav li {
	float:right;
	padding: 1px 8px 0 8px;
	border-left: 1px solid #666;
}


#nav li#first {border-left:none;}
#nav .start a {
	float: left;
	clear:none;
	display:block;
	width:auto;
	padding: 1px 1px 0 1px;
	margin-left: 7px;
}

#nav .active a {border-bottom-color: #f00; }

#nav a, #nav li a {
	background: url(../img/graphics/blue_toning.png) repeat-x;
	font-size: 12px;
	color: #fff;
	text-decoration:none; 
	border-bottom: 1px solid #000; 
}
 

#nav  a:hover {
border-bottom-color: #f00; 
}

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6 {float:left;margin-right: 20px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 130px;}
.span-2  { width: 280px;}
.span-3  { width: 430px;}
.span-4  { width: 580px;}
.span-5  { width: 730px;}
.span-6, div.span-6 { width: 880px; margin: 0; }



/* Add these to a column to append empty cols. */
.append-1  { padding-right: 150px;}
.append-2  { padding-right: 300px;}
.append-3  { padding-right: 450px;}
.append-4  { padding-right: 600px;}
.append-5  { padding-right: 750px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 150px;}
.prepend-2  { padding-left: 300px;}
.prepend-3  { padding-left: 450px;}
.prepend-4  { padding-left: 600px;}
.prepend-5  { padding-left: 750px;}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -150px;}
.pull-2 { margin-left: -300px;}
.pull-3 { margin-left: -450px;}
.pull-4 { margin-left: -600px;}
.pull-5 { margin-left: -750px;}
.pull-6 { margin-left: -900px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6 {float:left;position:relative;}


.push-1 { margin: 0 -150px 1.5em 150px;}
.push-2 { margin: 0 -300px 1.5em 300px;}
.push-3 { margin: 0 -450px 1.5em 450px;}
.push-4 { margin: 0 -600px 1.5em 600px;}
.push-5 { margin: 0 -750px 1.5em 750px;}
.push-6 { margin: 0 -900px 1.5em 900px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6 {float:right;position:relative;}


/* Border on right hand side of a column. */
div.border {
  padding-right:9px;
  margin-right:10px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:123px;
  margin-right:120px;
  border-right: 1px solid #eee;
}

/* Meny
-------------------------------------------------------------- */

div.meny {
	margin:40px 0 0 20px;
	/*background:url(../img/gubbar/matlagare.png) no-repeat right top;*/
}


.meny p {margin:0 0 20px 0; }

.meny h2{margin: 0 0 10px 0;}

.meny h4{font-size: 1.4em;
	margin: 0 0 0.5em 0;
	padding: 0;
}

.meny {font-size: 1.3em;}

.meny p, .meny td {font-size: 1em;}

 .meny td { padding-bottom: 1em; }
 
 .meny img {border: 1px solid #ccc; padding: 2px; }
 
  .meny h4 a { color:#000;
}


/* Bildrubriker
-------------------------------------------------------------- */

h2.tips {background: url(../img/rubriker/tips.gif) no-repeat left top; text-indent: -9000px;}
h2.notera {
	background: url(../img/rubriker/notera.png) no-repeat left top;
	text-indent: -9000px;
}

div.notera {
	background: url(../img/graphics/noterat.jpg) no-repeat right top;
	padding: 15px;
	min-height: 200px;
	margin-right: 20px;
	margin-top: 40px;
}

.span-4 p { margin-right: 20px;}
.notera em {
	font-style:normal;
	color:#999;
}
.notera p {
	margin: 10px 0 0 0;
	padding-bottom: 10px;
}

.intro h1, .intro h4, h2.veckans , .veckans h1, .kontakt h1, .kort h1, .miljo h1, .catering h1, .ros h1, .stodjer h1, h1.interninfo, .aktuellt h1 {text-indent: -9000px;
	display:block;}
h2.veckans{
	background: url(../img/rubriker/reklamblad.png) no-repeat left top;
	height: 35px;

}
.intro h1{
	background: url(../img/rubriker/intro_h1.png) no-repeat left top;
	height: 95px;
	margin-top: 40px;
	margin-left: 15px;
}
.intro h4{
	background: url(../img/rubriker/intro_text.png) no-repeat left top;
	height: 250px;
	margin:0;
	margin-left: 15px; 
}
.veckans h1{
	background: url(../img/rubriker/brevet.gif) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}
.aktuellt h1{
	background: url(../img/rubriker/aktuellt.gif) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}

h1.interninfo {
	background: url(../img/rubriker/interninfo.png) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}
.kort h1{
	background: url(../img/rubriker/kundkort.png) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}

.miljo h1{
	background: url(../img/rubriker/miljo.png) no-repeat left top;
	height: 150px;
	margin-top: 20px;
	margin-bottom: 0px;
}

.catering h1{
	background: url(../img/rubriker/catering.png) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}
.kontakt h1{
	background: url(../img/rubriker/kontakta.png) no-repeat left top;
	height: 80px;
	margin-top: 80px;
}
.ros h1{
	background: url(../img/rubriker/risros.png) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}

.ros img {
	float: right;
	margin: -70px 20px 0 20px;
}

.stodjer h1{
	background: url(../img/rubriker/stodjer.png) no-repeat left top;
	height: 60px;
	margin-top: 80px;
}

.green {background: url(../img/graphics/green_toning.png) repeat-x top;}
.green p, .green ul, .green h4 {margin: 10px;}
.quite {
	color: #999;
	font-size: 1.1em;
}

/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

ul.pilar {
	list-style-type: none;
	padding: 0;
}

div.green {margin-top: 20px;}
.green ul.pilar li {border-bottom: none;}
ul.pilar li {
	padding: 0 0 0 20px;
	background: url(../img/graphics/pil.png) no-repeat 5px 6px;
	margin-bottom: 7px;
	border-bottom: 1px solid #ccc;
	margin-right: 20px;
}

ul.pilar li p {
	font-size: 1em;
}

ul.pilar .info {
}

ul.pilar h5 {
	font-weight: normal;
	font-size:1.1em;
	margin: 0 0 0.5em 0;
}

a.close {
	text-align:right;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }