body {
background-color: #f0f0f0;
/* background-image: url(img/page-bg.jpg); */
font-family: "Verdana", Arial;
}


div p { border:1px solid #333; padding:10px; }
h2 { color:#ccc; font-size: 14px; }
h3 {color:#fff; font-size: 14px;}

.txt {
font-size:10px;
font-family:verdana;
}

.kontakt {
font-size:10px;
font-family:verdana;
background-color: #00FFFF;
}

/* Länk & Menu-------------------------------------------------------------------------------------*/

a:link {color:#666;}      	/* ej besökt länk */
a:visited {color:#FF00FF;}  	/* besökt länk */
a:hover {color:#00FFFF;}  	/* mus över länk */
a:active {color:#00FFFF;}  	/* vald länk */ 


/* Index ------------------------------------------------------------------------------------------*/

.zine3 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/z03.png) no-repeat;} 
.zine3 a:hover { background-position: -440px 0;}
.zine2 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/z02.png) no-repeat;} 
.zine2 a:hover { background-position: -440px 0;}
.zine1 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/z01.png) no-repeat;} 
.zine1 a:hover { background-position: -440px 0;} 
.even1 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/e01.png) no-repeat;} 
.even1 a:hover { background-position: -440px 0;} 
.even2 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/e02.png) no-repeat;} 
.even2 a:hover { background-position: -440px 0;} 
.even3 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/e03.png) no-repeat;} 
.even3 a:hover { background-position: -440px 0;} 
.work2 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/m01.png) no-repeat;} 
.work2 a:hover { background-position: -440px 0;} 
.work1 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/w01.png) no-repeat;} 
.work1 a:hover { background-position: -440px 0;} 
.work3 a { display: block; width: 440px; height: 200px; background: transparent url(../img/index/w03.png) no-repeat;} 
.work3 a:hover { background-position: -440px 0;} 

/* Info -------------------------------------------------------------------------------------------*/

.elin a { display: block; width: 140px; height: 200px; background: transparent url(../img/portrait/pte.png) no-repeat; } 
.elin a:hover { background-position: -140px 0; } 
.olof a { display: block; width: 140px; height: 200px; background: transparent url(../img/portrait/pto.png) no-repeat; } 
.olof a:hover { background-position: -140px 0; } 
.evelina a { display: block; width: 140px; height: 200px; background: transparent url(../img/portrait/pth.png) no-repeat; } 
.evelina a:hover { background-position: -140px 0; } 
.malin a { display: block; width: 140px; height: 200px; background: transparent url(../img/portrait/ptm.png) no-repeat; } 
.malin a:hover { background-position: -140px 0; } 
.johan a { display: block; width: 140px; height: 200px; background: transparent url(../img/portrait/ptj.png) no-repeat; } 
.johan a:hover { background-position: -140px 0; } 

/* Container----------------------------------------------------------------------------------------*/

.conmainer {
margin-left: auto;
margin-right: auto;
width: 800px;
}

.container {
margin-left: auto;
margin-right: auto;
width: 800px;
background-color:#000;
/* opacity: 0.8; filter: alpha(opacity=80); */
}

.container div p { background-color:#fff; }




/* Grid >> Global-----------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}




/* Grid >> Children (Alpha ~ First, Omega ~Last)----------------------------------------------------*/

.alpha { margin-left: 0; }
.omega { margin-right: 0; }




/* Grid >> 5 Columns--------------------------------------------------------------------------------*/

.container .grid_1 { width:140px; }
.container .grid_2 { width:300px; }
.container .grid_3 { width:460px; }
.container .grid_4 { width:620px; }
.container .grid_5 { width:780px; }



/* Prefix Extra Space >> 5Columns-------------------------------------------------------------------*/

.container .prefix_1 { padding-left:160px; }
.container .prefix_2 { padding-left:320px; }
.container .prefix_3 { padding-left:480px; }
.container .prefix_4 { padding-left:640px; }



/* Suffix Extra Space >> 5 Columns------------------------------------------------------------------*/

.container .suffix_1 { padding-right:160px; }
.container .suffix_2 { padding-right:320px; }
.container .suffix_3 { padding-right:480px; }
.container .suffix_4 { padding-right:640px; }



/* Push Space >> 5 Columns--------------------------------------------------------------------------*/

.container_5 .push_1 { left:160px; }
.container_5 .push_2 { left:320px; }
.container_5 .push_3 { left:480px; }
.container_5 .push_4 { left:640px; }



/* Pull Space >> 5 Columns--------------------------------------------------------------------------*/

.container_5 .pull_1 { left:-160px; }
.container_5 .pull_2 { left:-320px; }
.container_5 .pull_3 { left:-480px; }
.container_5 .pull_4 { left:-640px; }



/* Clear Floated Elements---------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear { 
clear: both; 
display: block; 
overflow: hidden; 
visibility: hidden; 
width: 0;
height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack*/
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix { display: inline-block; }
* html .clearfix { height: 1%;}
.clearfix { display: block; }


/* Menu -------------------------------------------------------------------------------------------- */

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 800px;
  height: 300px;
  background: url(../img/menu/menu_vaxjoromantik.png) no-repeat;
  margin-left: auto;
  margin-right: auto;
}
#menu span {
  display: none;
  position: relative;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: relative;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .index {
  width: 148px;
  height: 50px;
  background: url(../img/menu/meny_index.png) no-repeat;
  left: 25px;
  top: 150px;
}
#menu .index span {
  width: 80px;
  height: 50px;
  background: url(../img/menu/index-over_v2.png) no-repeat;
  left: 25px;
  top: 100px;
}

#menu .info {
  width: 122px;
  height: 58px;
  background: url(../img/menu/meny_info.png) no-repeat;
  left: 150px;
  top: 100px;
}
#menu .info span {
  width: 110px;
  height: 90px;
  background: url(../img/menu/info-over_v2.png) no-repeat;
  left: 60px;
  top: -90px;
}

#menu .institut{
  width: 195px;
  height: 50px;
  background: url(../img/menu/meny_institut.png) no-repeat;
  left: 270px;
  top: 150px;
}
#menu .institut span {
  width: 150px;
  height: 100px;
  background: url(../img/menu/institut-over.png) no-repeat;
  left: -20px;
  top: -100px;
}