@import "reset.css";

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

/*
brödtext: 
70% svart //  grå  #505050 arial
12pt med 18 pt radavstånd
fet text: bold #ff007b
underrubrik: 13pt fet arial #1c1c1c
Meny Alltid mot vit bg Arial 11pt Bold Caps Aktiv/
Hover: #ff007b
*/
html{
	font: normal normal 100%/1.5 arial, verdana, sans-serif; 
}


body{
	background: #fff url(/gfx/grey_mainbg.png) no-repeat center bottom;
	text-align: center;
	color: #505050;/* #35260d 7d8a2e*/
	padding:0 ;
	position:relative;
	}

p, 
ul, 
ol,
table,
dl,
blockquote{
	font-size: 12px;	/*.8333em;	*/
	margin: .4em 0 1.2em;
	}
blockquote {
 width: 100%;
  margin-left: 3em;
  padding-left: 1.5em;
  border-left: 3px solid #ccc;
} 
blockquote p {font-size: 110%; margin:0; 
	font-family: Georgia, Times, serif; }
blockquote p.cite {
	font-style: oblique; text-align: right;
	margin-top:.4em;
	font-size: 100%;
	font-family: verdana, sans-serif;}
dd {margin-bottom: 1em; }


ul { list-style-position: inside ; padding-left: 1em;}
ol { list-style: inside decimal; padding-left: 1em;}


a{
	color: #35260d;
	text-decoration: none;
	}	
a:hover, a:focus{ 
	outline: none;
	text-decoration: underline;
}

p a, 
li a{
	color: orange;
	text-decoration: none;
	}	
p a:hover, 
li a:hover{ 
	outline: none;
	text-decoration: none; 
	color: #fff;
	background-color: #000;
}

a img,
img {border:0; text-decoration: none;}

b,
strong {font-weight: bold; color: #ff007b}
i,em { font-style: italic;}
hr {display: none;}



/* -----------------------------------*/
/* ------>>> PAGE Structure <<<-------*/
/* -----------------------------------*/
#top-nav {display:none;}

#wrapper {
	width:70em; /*900px*/
	padding-bottom: 150px;
	margin:0 auto;
	text-align: left;	
	background: #fff url(/gfx/footer-bg.png) no-repeat center bottom; 
}
object {z-index:5}
#header { width: 100%;height:130px; background: url(/gfx/delimiter.png) no-repeat 50% 100%; }
#header #logo { float:left; width: 390px; height:120px; }
#header #logo img{ margin-top:20px }

#header #flashanimation { text-align:right; float:right; width: 400px; height:120px; }

#nav {width: 100%; text-align:center;}


#footer {
	background: #fff;
	width: 100%; 
	text-align:center; 
	margin-top:4em;
	
	}

#content #flash_imgscroll {display: inline; margin: 0 1em .2em 0; float: left;}
#content #flash_imgscroll img,
#content #flash_imgscroll object{display: inline;  }

#splash, 
#splash #wrapper {width: 99%; height: 99%; padding:0; margin:0; overflow: hidden; text-align:center;}
#splash #content {width: 99%; height: 99%; padding:0; text-align:center; border: none;}
#splash #content img{margin:0 auto; }

#splash #wrapper #splash-flash{width:586px; margin:0 auto;}

#splash #nav,
#splash #left-of-content,
#splash #right-of-content{display:none ;}

#splash #header,
#splash #footer,
#splash h1 {display:none;}


/* -----------------------------------*/
/* --------->>> HEADINGS <<<----------*/
/* -----------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6{ 
	font-weight: 300;
	line-height: 1.2em;
	margin: .8em 0 .2em;
	font-family: arial, sans-serif; color: #1c1c1c;
}
	

h1{font-size: 1.7em; margin: 0 0 .4em;}	
h2{font-size: 1em; margin: 0 0 .4em; }	
h4{margin-bottom: 1em;}
h6 {font-size: .7em;}
#playlist h3 {
	font-size: 0.75em; 
	font-weight: bold; 
	font-family: courier, fixed; 
	color: orange; 
	text-decoration: underline; }
#playlist h3:before { content: open-quote; }
#playlist h3:after { content: close-quote; }

#home #content h1 {display: none;}
#about #content h1 {
	height: 55px;
	background: url(/gfx/headlines/about.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#idea #content h1 {
	height: 55px;
	background: url(/gfx/headlines/theidea.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#books #content h1 {
	height: 55px;
	background: url(/gfx/headlines/bocker.jpg) no-repeat 0 0;
	text-indent:-9999px;
	}
#store #content h1 {
	height: 55px;
	background: url(/gfx/headlines/halsokostbutik.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#press #content h1 {
	height: 55px;
	background: url(/gfx/headlines/press.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#contact #content h1 {
	height: 55px;
	background: url(/gfx/headlines/contact.png) no-repeat 0 0;
	text-indent:-9999px;
	}

#classes #content h1 {
	height: 55px;
	background: url(/gfx/headlines/classes.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#events #content h1 {
	height: 55px;
	background: url(/gfx/headlines/events.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#download #content h1 {
	height: 55px;
	background: url(/gfx/headlines/download.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#playlist #content h1 {
	height: 55px;
	background: url(/gfx/headlines/playlist.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#newsletter #content h1 {
	height: 55px;
	background: url(/gfx/headlines/signup.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#partners #content h1 {
	height: 55px;
	background: url(/gfx/headlines/partners.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#boost #content h1 {
	height: 55px;
	background: url(/gfx/headlines/boost.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#gallery #content h1 {
	height: 55px;
	background: url(/gfx/headlines/gallery.png) no-repeat 0 0;
	text-indent:-9999px;
	}
#acro #content h1 {
	height: 55px;
	background: url(/gfx/headlines/acrorubbe.png) no-repeat 0 0;
	text-indent:-9999px;
	}


/* -----------------------------------*/
/* -------->>> Text Styles <<<--------*/
/* -----------------------------------*/

#footer p { 
	padding: 100px 0 2em; 
	font-family: courier, fixed; }
#footer p span{ 
	padding: 5px 25px 0 0; 
	background: url(/gfx/footer-heart.png) no-repeat top right;}

#content ol.pre {
	list-style: outside decimal;
	font-family: courier new, monospace, fixed;
	padding-left: 2.5em;
	}
#content ol.pre li strong{text-decoration: underline;}
/* -----------------------------------*/
/* --------->>> NAVIGATION <<<--------*/
/* -----------------------------------

underrubrik: 13pt fet arial #1c1c1c
Meny Alltid mot vit bg Arial 11pt Bold Caps Aktiv/
Hover: #ff007b*/
#nav ul {
	width: 85%; 
	white-space:no-wrap;
	text-align:center; 
	margin: 1em auto 3em; 
	list-style: outside none; 
	font: normal bold .8em/100% Arial, sans-serif; 
	}
#nav ul li { 	
	display: inline; 
	margin: 0 2em ; 
	font-size:0.9em;
	font-weight: bold;
	}

#nav ul li a{
	color: #333;
	padding: 0 .4em .2em; 
	text-decoration: none; 
	text-transform: uppercase;
}
#nav ul li a:hover,#nav ul li a:focus{ text-decoration: none; color: #ff007b; background:#fff;}

#home #nav #nav-home a,
#about #nav #nav-about a,
#idea #nav #nav-idea a,
#press #nav #nav-press a,
#books #nav #nav-books a,
#store #nav #nav-store a,
#fm #nav #nav-fm a,
#contact #nav #nav-contact a {
	color: #ff007b;
}

#left-of-content ul,
#right-of-content ul {
	text-align:left; 
	width: 171px; 
	float:left; 
	padding:0; 
	margin:20px 0 0 50px;
	list-style: outside none;
	font-family: Arial; 
	}
#right-of-content ul {float:right;
	margin:20px 50px 0 0 ;}

#left-of-content ul li,
#right-of-content ul li{
	display: block; 
	height: 99px; 
	margin-bottom: 1em;
}

#left-of-content ul li a,
#right-of-content ul li a{
	display: block; 
	height: 99px; 
	text-indent:-9999px;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	position:relative;
}

#nav-classes a { background-image: url(/gfx/puffar/classes.png) }
#nav-events a {background-image: url(/gfx/puffar/events.png)}
#nav-download a {background-image: url(/gfx/puffar/download.png)}
#nav-playlist a {background-image: url(/gfx/puffar/playlist.png)}
#nav-newsletter a {background-image: url(/gfx/puffar/newsletter.png)}

#nav-store a {background-image: url(/gfx/puffar/store.png)}
#nav-acro a { background-image: url(/gfx/puffar/acro.png) }
#nav-partners a {background-image: url(/gfx/puffar/partners.png)}
#nav-fm a {background-image: url(/gfx/puffar/FM_puff_sv.jpg);height:104px !important;width:180px; background-position: -5px 0 !important;}

#nav-signup a,
#nav-boost a,
#nav-mango-rules a{background: transparent none !important; text-indent:0 !important;}
#nav-mango-rules a{left: 400px;margin-top:-70px}


#left-of-content ul li a:hover,
#right-of-content ul li a:hover,
#classes #nav-classes a,
#download #nav-download a,
#playlist #nav-playlist a,
#events #nav-events a,
#newsletter #nav-newsletter a,
#acro #nav-acro a,
#partners #nav-partners a 
{
	background-position: 0% 100% ;
	background-color: #fff;
}

#nav-fm a:hover, #fm #nav-fm a{background-image: url(/gfx/puffar/FM_puff_color.jpg);}

#content {
	width: 550px; 
	float:left; 
	padding:10px 20px 0 50px; 
	margin:0 1em; 
	min-height: 370px;
}
#home #content {width: 630px; padding: 10px 5px 0 ;}
#home #content #flash-content{text-align:center;}
#home #content img {margin:0 auto}
/* -----------------------------------*/
/* ----------->>> FORMS <<<-----------*/
/* -----------------------------------*/

#sign-up{padding: 0 1em;}
#sign-up label{
	font-weight: bold;
	display:block;
	margin: 1em 0 .2em;
}
#sign-up label span {color: red; font-style:italic; font-weight: normal;}
#sign-up input[type=text],
#sign-up input[type=select],
#sign-up input[type=password]{
	width: 80%;
}
#sign-up .checkbox label input[type=radio],
#sign-up .checkbox label input[type=checkbox]{
	width: auto;
	margin-right: .2em;
}
#sign-up input[type=button],
#sign-up input[type=reset],
#sign-up input[type=submit]{
	width: auto;
	margin: 0 .2em;
}
#sign-up .buttons p{
	text-align:center;
}
/* -----------------------------------*/
/* --------->>> COMMENTS <<<----------*/
/* -----------------------------------*/


/* -----------------------------------*/
/* ---------->>> EXTRAS <<<-----------*/
/* -----------------------------------*/
#content ul {color: orange;}
#content li {line-height: 200%; color: #35260d;}

ul.partners,
ul.images,
ul.events{padding:0; list-style: none outside;}

ul.partners li,
ul.events li{  margin-bottom: 1em;}

ul.partners li { float: left; width: 48.9%; height: 7em;}
ul.partners li a img {border: 1px solid #ddd; background: #fafafa; display: block; padding: 3px; margin-right: 1em;}
ul.partners li a:hover img {border-color: #aaa; }

ul.links {list-style-type: none;}
ul.links li a:after {content:" »"}

ul.events li span{ font-weight:bold;}

#footer ul { list-style: none outside; margin:0 auto; padding:0 0 10px; height: 50px; }
#footer ul li{ display:inline; margin:0; padding:0; width: 100px; height: 50px; }
#footer ul li a{ width: 100px; height: 50px; }
#footer ul li a:hover{ background: none; }
#footer ul li.function a{ margin-left:20px; width: 100px; height: 50px; }

#footer #sponsors a{height:100px;width:120px;background-repeat:no-repeat;background-position:center bottom; text-indent:-9999px;display:inline-block}

#footer #sponsors .nike {background: url("/gfx/partner-logos/new/nike.png") no-repeat bottom right} 
#footer #sponsors .academy {background-image: url("/gfx/partner-logos/new/functionaltraining.png")} 
#footer #sponsors .hagabadet {background-image: url("/gfx/partner-logos/new/hagabadet.png");width:110px;} 
#footer #sponsors .superfruit {background-image: url("/gfx/partner-logos/new/superfruit.png");width:160px;} 
#footer #sponsors .holistic {background-image: url("/gfx/partner-logos/new/holistic.png");width:90px;} 
#footer #sponsors .stjorgen {background-image: url("/gfx/partner-logos/new/stjorgen.png");width:130px;} 
#footer #sponsors .synsam {background-image: url("/gfx/partner-logos/new/synsam.png");width:160px;} 
#footer #sponsors .lisen {background-image: url("/gfx/partner-logos/new/lisen.PNG");width:200px;background-position: center 40px} 

ul.images li{ display:inline; float: left;  }
ul.images li a{margin: 0 1em 1em 0; display: block;  width: 100px; height: 100px; border:1;}
ul.images li a img{padding: 5px; background: #f5f5f5; border: 1px solid #eee; width: 90px;  height:90px; }
ul.images li a:hover {background: none; }
ul.images li a:hover img{border-color: #555;}

.clear{ 
	display: block;
	clear: both;
	float: none;
	height: 1pt; 
	line-height: 1pt; 
	margin: 1pt 0; 
	visibility: hidden;
	}
#newsletter p#subscribeLink { padding-left:25px; padding-bottom:5px; background: transparent url(/gfx/email_add.png) no-repeat 0 0;}
#newsletter p#unsubscribeLink { padding-left:25px; padding-bottom:5px; background: transparent url(/gfx/email_delete.png) no-repeat 0 0;}
#newsletter p#subscribeLink a,
#newsletter p#unsubscribeLink a{background-color:#fff;}
#newsletter p#subscribeLink a:hover,
#newsletter p#unsubscribeLink a:hover{background-color:#000; color:#fff;;}


/* -----------------------------------*/
/* ------>>> Google widget  <<<-------*/
/* -----------------------------------*/

#goog-wm { }
#goog-wm h3.closest-match { }
#goog-wm h3.closest-match a { }
#goog-wm h3.other-things b { font-weight: normal;}
#goog-wm ul li { }
#goog-wm li.search-goog { display: block; }

/* -----------------------------------*/
/* ---------->>> MODAL  <<<-----------*/
/* -----------------------------------*/

/* Overlay */
#contact-overlay {background-color:#000; cursor:wait; z-index:3199}

/* Container */
#contact-container {width:420px; left:50%; top:15%; margin-left:-210px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left; z-index:3200}
#contact-container .contact-content {background-color:#333; color:#ddd; height:40px;}
#contact-container h1 {color:#d76300; margin:0; padding:0 0 6px 12px; font-size:1.2em; text-align:center;}
#contact-container .contact-loading {position:absolute; background:url(/gfx/contact/loading.gif) no-repeat; z-index:8000; height:55px; width:54px; margin:-14px 0 0 170px; padding:0;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-error {width:92%; font-size:.8em; background:#000; border:2px solid #ccc; font-size:0.8em; font-weight:bold; margin:0 auto; padding:2px;}
#contact-container br {clear:both;}
#contact-container form {padding:0; margin:15px 0 0 ;}
#contact-container label {clear:left; display:block; width:100px; float:left; text-align:right; padding-right:4px; font-weight:bold;}
#contact-container .contact-input {font-family:'Trebuchet MS', Verdana, Arial; float:left; padding:2px; margin:2px; background:#eee; border:1px solid #fff; width:250px;}
#contact-container textarea {height:84px;}
#contact-container .contact-top {height:13px; background:url(/gfx/contact/form_top.gif) no-repeat; padding:0; margin:0;}
#contact-container .contact-bottom {height:13px; background:url(/gfx/contact/form_bottom.gif) no-repeat; font-size:.7em; text-align:center;}
#contact-container .contact-bottom a {position:relative; top:-4px; text-decoration:none; color:#666;}
#contact-container .contact-bottom a:hover {color:#888;}
#contact-container .contact-button {margin:4px 0 0 4px; cursor:pointer; height:24px; border:0; font-size:1em; font-weight:bold; color:#fff; text-align:center; vertical-align:middle;}
#contact-container .contact-send {width:65px; background:url(/gfx/contact/cancel.png) no-repeat;}
#contact-container .contact-cancel {width:65px; background:url(/gfx/contact/cancel.png) no-repeat;}
#contact-container a.modalCloseX {text-decoration:none; font-weight:bold; font-size:1.2em; position:absolute; top:-2px; left:400px; color:#999;}
#contact-container a.modalCloseX:hover {color:#9bb3b3;}
.invisible{visibility:hidden} /* for object */