/* 
*******************************************************************
CSS för Gotlands Turistförening.

Utvecklat under december 2006 (God Jul!) av DIDVISION INTERACTIVE
Senast uppdaterat XXXX XX XX av XXXXX
Copyright © 2006 - Gotlands Turistförening
******************************************************************
*/

body { 
	margin: 0; 
	padding: 0; 
	background-color: #ffffff;
 	font-size: 70%; 
}

/* Master div */
#container { text-align: left; position: absolute; top: 0px; left: 0px; width: 800px; overflow: visible;; visibility: visible;; display: block; }
#imageholder { position: absolute; padding:0 0 0 0px; margin-left: -400px; top: 0px; left: 50%; width: 750px; visibility: visible; }
#border { position: absolute; padding:0 0 0 0px; margin-left: -385px; top: 0px; left: 50%; width: 750px; visibility: visible; }

/* Content */
#content { position: absolute; padding:0 0 0 0px; margin-left: -368px; top: 360px; left: 50%; width: 750px; visibility: visible; }
#textstart {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: 80px;
	top: 150px;
	left: 220px;
	width: 500px;
	visibility: visible;
	height: 120px;
}
#gotland {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -390px;
	top: 664px;
	left: 414px;
	width: 125px;
	visibility: visible;
	height: 83px;
}

/* Relaterat - Puffar */
#puffar_start {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -368px;
	top: 526px;
	left: 50%;
	width: 760px;
	visibility: visible;
	bottom: -1px;
}
#puffar_start_overlay { position: absolute; padding:0 0 0 0px; margin-left: -368px; top: 460px; left: 50%; width: 760px; visibility: visible }
#puffar_platta { position: absolute; padding:0 0 0 0px; margin-left: -384px; top: 415px; left: 50%; width: 760px; visibility: visible; }

#puff_content_01 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -365px;
	top: 539px;
	left: 50%;
	width: 180px;
	visibility: visible;
	bottom: -1px;
}
#puff_content_02 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -176px;
	top: 539px;
	left: 50%;
	width: 180px;
	visibility: visible;
	bottom: -1px;
}
#puff_content_03 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: 13px;
	top: 539px;
	left: 50%;
	width: 180px;
	visibility: visible;
	bottom: -1px;
}
#puff_content_04 {
	position: absolute;
	padding:0 0 0 4px;
	margin-left: 200px;
	top: 540px;
	left: 399px;
	width: 180px;
	visibility: visible;
}
#puff_content_05 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -365px;
	top: 633px;
	left: 50%;
	width: 170px;
	visibility: visible;
}
#puff_content_06 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: -176px;
	top: 633px;
	left: 50%;
	width: 180px;
	visibility: visible;
}
#puff_content_07 {
	position: absolute;
	padding:0 0 0 0px;
	margin-left: 13px;
	top: 633px;
	left: 50%;
	width: 180px;
	visibility: visible;
}
#puff_content_08 {
	position: absolute;
	padding:0 0 0 4px;
	margin-left: 200px;
	top: 633px;
	left: 50%;
	width: 180px;
	visibility: visible;
}

#puff_content_rubrik { height:20px; padding:0 0 0 5px; visibility: visible; }  
#puff_content_bild { visibility: visible; }  
#puff_content_innehall {  padding:0 0 0 5px; visibility: visible; }  

/* Sidhuvud, meny, logo */
#toning { background: url(../../files/main/toning_top.gif) no-repeat left top; margin-left: -376px; position: absolute; top: 0px; left: 50%; width: 768px; height: 113px; visibility: visible; }
#topnav { position: absolute; margin-left: -79px; top: 0px;	left: 50%; width: 470px; height: 34px; visibility: visible; }
#mainnav { position: absolute; margin-left: -372px; top: 78px; left: 50%; width: 758px; height: 34px; visibility: visible; }
#logo { position: absolute; margin-left: -360px; top: 18px; left: 50%; width: 247px; height: 46px; visibility: visible; }
#flags{
	position: absolute;
	margin-left: 225px;
	top: 58px;
	left: 390px;
	width: 170px;
	height: 14px;
	visibility: visible;
}
#textsize {
	position: absolute;
	font-size: 1.0em;
	margin-left: 245px;
	top: 82px;
	left: 390px;
	width: 220px;
	height: 20px;
	visibility: visible;
}

/* Banners */
#bannerstop {
	position: absolute;
	margin-left: 420px;
	top: 5px;
	left: 390px;
	width: 200px;
	height: 18px;
	background-color: #d3d3d3;
	visibility: visible
}
#banner2 {
	position: absolute;
	margin-left: 420px;
	top: 94px;
	left: 50%;
	width: 200px;
	visibility: visible
}
#banner {
	position: absolute;
	margin-left: 420px;
	top: 34px;
	left: 390px;
	width: 200px;
	visibility: visible
}
#banner_logo {
	position: absolute;
	margin-left: 420px;
	top: 2px;
	left: 441px;
	width: 120;
	height: 62;
	background-color: #d3d3d3;
	visibility: visible
}
#bannerbackground01 { position: relative; margin-left: 0px; top: 0px; width: 153px; background-color: #ffffff; border: 1px solid #d3d3d3; visibility: visible }
#bannerbackground02 { position: relative; margin-left: 0px; margin-top: 10px; margin-bottom: 10px; width: 153px; background-color: #ffffff; border: 1px solid #d3d3d3; visibility: visible }

/* submeny */
#submeny {  position: absolute; background: url(../../files/menu/submenu/border_background.gif) repeat-y; margin-left: -368px; top: 360px; left: 50%; width: 184px; visibility: visible;	}
#border_top { padding:6px 0 0 10px; position:absolute; width: 173px; height: 29px; background: url(../../files/menu/submenu/border_top.gif) no-repeat;}
#border_middle { padding:33px 0 0 10px; width: 170px; background: url(../../files/menu/submenu/border_background.gif) no-repeat;}
#border_bottom { position:absolute; width: 184px; height: 10px; background: url(../../files/menu/submenu/border_bottom.gif) no-repeat;}
#submenylinje{ padding-top:3px; padding-bottom:3px; }

a img { border: none; }

/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_4 {
	margin-left: 27px;
	margin-right: auto;
	width: 780px;
	margin-top: 150px;
	position: absolute;
}

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

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

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

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .grid_1 {
	width:180px;
	height: 180px;
}

.container_4 .grid_2 {
	width:370px;
	height: 180px;
	background-image: url(../../bilder/370x180.png);
}

.container_4 .grid_3 {
	width:370px;
	height: 360px;
	background-image: url(../../bilder/370x360px.png);
}

.container_4 .grid_4 {
	width:750px;
	height: 0px;
}



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

.container_4 .prefix_1 {
	padding-left:190px;
}

.container_4 .prefix_2 {
	padding-left:380px;
}

.container_4 .prefix_3 {
	padding-left:570px;
}



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

.container_4 .suffix_1 {
	padding-right:190px;
}

.container_4 .suffix_2 {
	padding-right:380px;
}

.container_4 .suffix_3 {
	padding-right:570px;
}



/* Push Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .push_1 {
	left:190px;
}

.container_4 .push_2 {
	left:380px;
}

.container_4 .push_3 {
	left:570px;
}



/* Pull Space >> 4 Columns
----------------------------------------------------------------------------------------------------*/

.container_4 .pull_1 {
	left:-190px;
}

.container_4 .pull_2 {
	left:-380px;
}

.container_4 .pull_3 {
	left:-570px;
}




/* 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;
}