/*
Palette:
Orange (logo): fad143
Orange ljus: ffeb9c
Grön ljus: c6dbad //c1e7cc
*/


body,table{
	/*font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; */
	margin: 0px;
	/*font-family:"Trebuchet MS", Helvetica, sans-serif; */
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
	font-size: 14px;
	text-align: left;
	color: #000000;
	}



/*Indexsite*/
body#mainindex{
margin: 0 0 1px; /*Force vertical scrollbar, löser att browser "skakar" när scrollpanelen läggs till på varje sida "shift problem".*/
overflow-y: scroll;
height: 100%;
padding: 0;
background-color: white; 
text-align: center; 
background-image:url('crowd2.gif'); 
background-repeat:no-repeat; 
background-position:50% 170px;
float:left;
width:100%;
}

/*All other sites*/
body#main{
margin: 0 0 1px; /*Force vertical scrollbar, löser att browser "skakar" när scrollpanelen läggs till på varje sida */
overflow-y: scroll;
height: 100%;
padding: 0;
background-color: white; 
text-align: center; 
background-image: url('longbar.gif'); 
background-repeat: repeat-x; 
}

span.text{ 
	line-height: 165%;
	font-family: Georgia, Times, "Times New Roman", serif;
	}	  

span.underline{text-decoration: underline;}

span#slogan{clear:left; color:#FFCC00; margin-top: -6px; margin-bottom: 3px; font-size:12px; margin-right:-40%;}

img.browsepage{
	margin-bottom:-3px;
}
a.browsepage,a.browsepage:hover{
	text-decoration: none;
}

/* Logo color: #FFCC00; */
	
table {
		margin: 0px;
		padding: 0px;
		border-collapse: collapse;
		border-width: 0px;
		text-align: left;
		}
		
table#tracks{
			font-size: 9px;
			}
		
div#main {
width:100%;
height:100%;
font-size:larger;
padding-right: 20px;
}

div.result{background:#E8E8E8; font-size:10px;}


.left{float:left;}
.clearleft{float:left; clear:left; padding-bottom:20px; width:90px;}
.sharecol{float:left; clear:left; width:50px;}
.registerrow{float:left; clear:left; width:70px; margin-top:5px; margin-right:10px;}
.registerexplain{float:left; clear:left; color:gray; padding-bottom:10px; padding-left:80px;}
.gray{color:gray;}
.clearboth{float:left; clear:both;}

img	 {margin: 0px;
	padding: 0px;
	border-width: 0px}

img.picture	{padding-left:12px; padding-bottom:12px; float:left;}


h1, h2, h3, h4, h5 {font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; font-weight: normal; color: black;}

h1 {
	font-size:20px;
	margin-bottom:15px;
	}

h1#h1index{float:left; font-size:16px; font-weight: bold; display:inline;}

h2 {
	margin-top:20px;
	font-size: 16px;
	margin-bottom:5px;
	}
	
.rightcol{
color:#BBBBBB; /*#fad143;*/
font-weight:bold;
margin-top:10px;
}

h3 { 
	margin-top:15px;
	font-size: 14px;
	margin-bottom:5px;
	}

h1#underlined {text-decoration: underline}

h1.small {font-size:12px; margin:5px 0px 2px 5px; padding: 0px;}

/* Gör inputs osynliga för användare men fylls i av spindlar*/
.osynlig {display: none;}


div#center{height:100%;width:950px; margin:0 auto; text-align:left;}

/* Modules (div) at the right side of the page */
#module {border-bottom: 1px solid #DBDBDB; padding-bottom:5px;}
.module {border-bottom: 2px dotted #DBDBDB; margin:0% 4% 0% 4%; float:left; padding-bottom:5px; clear:right; width:90%;}
div#ads-top-right {margin-left:8px; width:100%; float:left;}
img#ads-top-right{width:100%; float:left;}
img#ads-top-right-talk{height:200px;width:80%; padding-top:130px;float:left;}

#anvkommentar{width:100%;}

/* Links */
a:link {color: #0000AA; text-decoration: none}
a:visited {color: #0000AA; text-decoration: none}
a:hover {color: #0066FF; text-decoration: underline}

a#underlined:link {color: black; text-decoration: underline}
a#underlined:visited {color: black; text-decoration: underline}
a#underlined:hover {color: #0066FF; text-decoration: underline}

#hlink {color: black; text-decoration: none}

a.ul{text-decoration: underline;}
a.none{text-decoration: none; color: black; margin: 0px;}
.nul{
padding:0px;
margin:0px;
display: -moz-inline-stack;
display: inline-block;
overflow: hidden;
/* Hack för att slipp radbryt som ej behövs längre?
zoom: 1;
*display: inline;
*/
}

div#bannerbottom{float:left; clear:left; margin-left:-20px; margin-top:10px; z-index:-1; margin-bottom:20px;}

div.te.comment{width:5%;}
div.comment{
padding-top:2px;
padding-left:5px;
cursor: pointer;
}

/* Inputs */

input[type="submit"]{
padding:8px 15px 8px 15px;
}

input[type="text"],input[type="password"]{
padding-left: 5px;
padding-right: 5px;
border:solid lightgray 1px;
height:22px;
}

input.big {
color: #333333;
font-weight: bold;
font-size: 12pt;
} 

input.std{
width: 250px;
margin:2px 10px 2px 0px;
float:left;
}
select.std{margin:2px 10px 4px 0px; vertical-align: middle; float:left;}

input.basic{
}

input#searchtrack{
float:left;
width:92%;
}

input.stdsmall{
width: 200px;
}

.fielderror{
background:#ffe7e7;
}

select {
    background: white;
    padding-left: 4px;
	border: solid lightgray 1px;
    height: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* appearance: none; Ej valid */
}

select#search{
	float:left;
	margin-top:5px;
	width:100%;
	height: 85px;
}
	
		
/* Div & spans */
span.article {padding-left: 1.5em;}

.warning{color:red; float:left; clear:left;}
span.ok{color:green;}
.red{color:red;}
span.th{color:#BBBBBB; font-weight:bold;}

a#indexmarked {font-weight:bold; background-color:#c6dbad; padding:3px;}
span#index{font-size:130%;}
div#footerrow{clear:left; text-align:center; padding-top:20px;}
div#indexpages{clear:left; float:left; width:100%; background-color:#ffeb9c; margin-top: 10px;}


/* Menyer och listor */ 
 

#nav-menu ul
{
	width:100%;
	padding:0px;
	margin:0px;
	overflow: hidden;
    list-style: none;
    display:block;
	z-index:999;
/*border-top: solid 1px #E7E7E7;
border-bottom: solid 1px #E7E7E7;*/
/*border-top: solid 1px #fad143;
border-bottom: solid 1px #fad143;*/
	background-color:#F5F5F5;
}

#nav-menu ul li
{
    float:left;
    display:list-item;
    list-style: none; 
	height:100%;
	text-decoration: none;
	background-color: #F7F7F7;
}


#nav-menu li#selected
{
background-color:#c6dbad; /* #ffeb9c;*/
/*border-left: solid 1px #B7B7B7;
border-right: solid 1px #B7B7B7;*/
/*border-left: solid 1px #fad143;
border-right: solid 1px #fad143;*/
}


#nav-menu li:hover
{
background-color: #E7E7E7;
/*border-left: solid 1px #fad143;
border-right: solid 1px #fad143;*/
cursor: pointer;
}


#nav-menu ul li a
{
    display:block;
    padding:10px 10px;
    font-size:16px;
    text-decoration:none;
	height:100%;
	color:black; 
}



#nav-menu ul li span
{
width: 100%;
}


/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none;
}
/* End hide */

#nav-menu
{
width:100%;
} 
 
 img.customer{padding:10px;}
 
 div.intervjuinfo{background:lightyellow; padding: 3px; padding-bottom:10px;}
 
 div.login{
 padding-top:15px;
 padding-right:15px;
 padding-bottom:10px;
 padding-left:10px;
 background-color: #F5F5F5;
 position:absolute; 
 z-index:3; 
 right:0%; 
 top:0%; 
 /*
 border-left: 2px solid #DBDBDB; 
 border-bottom: 2px solid #DBDBDB;
 
 opacity:.70;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
 */
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
-khtml-border-radius-bottomleft:7px;
border-bottom-left-radius:7px;
 }
 

 
/* Spans */ /* Divs */

#citat{	
	font-family: Tahoma;
	font-size: 28px;
	color: #FFE039;
	padding-left: 10px; 
	padding-right: 10px;
	line-height: 100%;
	}

.fl {font-size: larger;}

div.mainrow {width: 100%; padding: 0px; float:left; overflow:hidden; margin:0px; min-height:30px; height: 35px; background: blue;} 
div.row {padding: 0px; float:left; overflow:hidden; margin:0px; background: red; height: 100%; width: auto;} 	
div.row2 {padding: 0px 5px 0px 5px; float:left; overflow:hidden; margin-top:8px; height: 100%; width: auto;} 


.edge {float:left; margin:0px; padding:0px; height:100%; width: auto;}

#shead {font-weight: bold;}

#tlinks {padding: 0px 0px 0px 10px;  /* the links left spacing */ 
		background-color: white
		} 




div.oddrow{background-color: #EBEBEB;}
/*div.tl#oddrow:hover{background-color: #E3E3E3;}*/

div.evenrow{background-color: white;}
/*div.tl#evenrow:hover{background-color: white;}*/

/* Boosted */
div.boosted{
background-image:url('fist_green.png');
background-repeat:no-repeat;
background-position:50px 14px;
}

/*
div.tl#boosted:hover{
background-color:#ffdd53;
background-image:url('fist.png');
background-repeat:no-repeat;
background-position:45px 0px;}
*/

div#logototal{float: left; padding-top:15px; width:100%;}
img#demoband{float:left; width:110px; height:91px; padding-left:15px; padding-top:15px;}
img#logo{width:344px; height:51px;}
div#logoslogan{float:left; padding-top:40px;}

div#social{
margin-top:-150px;
z-index:2;
height:135px;
margin-right: 1%;
float:right;
}




div.te, div.te_first{
margin:0px;
display: -moz-inline-stack;
display: inline-block;
/* Hack för att slipp radbryt som ej behövs längre?
*display: inline;
zoom: 1;
*/
overflow: hidden;
vertical-align: top;
padding-left: 0px;
padding-top: 3px;
padding-bottom: 3px;
width:11%;
padding-right:0%;
padding-left:2%;
}

div.te_first{white-space: nowrap;}

div.th{
font-size: 15px;
padding:4px 0px 0px 0px;
margin:0px;
height: 28px;
/*
-moz-border-radius:7px;
-webkit-border-radius:7px;
-opera-border-radius:7px;
-khtml-border-radius:7px;
border-radius:7px;
*/
width:100%;
overflow: hidden;
vertical-align: bottom;
background-color: #ffeb9c;
} 


div.tl{
font-size: 12px;
padding:2px 0px 0px 0px;
margin:0px;
height: 60px;
/*
-moz-border-radius:7px;
-webkit-border-radius:7px;
-opera-border-radius:7px;
-khtml-border-radius:7px;
border-radius:7px;
*/
width:100%;
overflow: hidden;
} 


div.te_small{
padding-left:1%;
margin:0px;
display: -moz-inline-stack;
display: inline-block;
overflow: hidden;
width: 15px;
vertical-align: top;
/* Hack för att slipp radbryt som ej behövs längre?
zoom: 1;
*display: inline;
*/
}


div.play{width:50px;}
div.downloads{width:25px;}
div.playsheader{width:11%; text-align:left;}
div.plays{width:6%; text-align:left;}
div.rating{padding-left: 2%; width:7%;}



/*Highlight*/
#mark{background-color: #ffeb9c;}

	
/* Menu tree test */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}




/*** Greybox feature ***/

/* Last-Modified: 28/06/06 00:08:22 */
#GB_overlay {
    background-color: #FFFFFF;  /*bakgrundsfärg på skuggan*/
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 100;
}

#GB_window {
    left: 20%;
    top: 20%;
    font-size: 1px;
    position: absolute;
    overflow: visible;
    z-index: 150;
}

#GB_window .content {
    width: auto;
    margin: 0;
    padding: 0;
}

#GB_frame {
    border: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
}


.GB_Gallery {
    margin: 0 22px 0 22px;
}

.GB_Gallery .content {
    background-color: #fff;
    border: 3px solid #ddd;
}

.GB_header {
    top: 10px;
    left: 0;
    margin: 0;
    z-index: 500;
    position: absolute;
    border-bottom: 2px solid #555;
    border-top: 2px solid #555;
}

.GB_header .inner {
    background-color: #333;
    padding: 2px 20px 2px 20px;
}

.GB_header table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.GB_header .caption {
    text-align: left;
    color: #eee;
    white-space: nowrap;
    font-size: 20px;
}

.GB_header .close {
    text-align: right;
}

.GB_header .close img {
    z-index: 500;
    cursor: pointer;
}

.GB_header .middle {
    white-space: nowrap;
    text-align: center;
}


#GB_middle {
    color: #eee;
}

#GB_middle img {
    cursor: pointer;
    vertical-align: middle;
}

#GB_middle .disabled {
    cursor: default;
}

#GB_middle .left {
    padding-right: 10px;
}

#GB_middle .right {
    padding-left: 10px;
}


.GB_Window .content {
    background-color: #fff;
    border: 3px solid #ccc;
    border-top: none;
}

.GB_Window .header {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #999;
    border-left: 3px solid #ccc;
    border-right: 3px solid #ccc;
    margin: 0;

    height: 22px;
    font-size: 12px;
    padding: 3px 0;
    color: #333;
}

.GB_Window .caption {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span { 
    font-size: 12px;
    cursor: pointer; 
}
.GB_Window .close img {
    cursor: pointer;
    padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid #333; }
.GB_Window .click { border-bottom: 1px solid red; }




/** Slideshow (rotator) **/

#rotator
{
	overflow: hidden;
	position: relative;
	/*width: 700px;  +2px border */
	height: 300px;
    overflow: hidden;
    position: relative;
	width:100%;
}


#rotator img
{
	border: 0;
	/*
	max-width: 300px;
	max-height: 400px;
	min-width: 60px;
	min-height: 80px;

	Explorer fattar in min/max height/width, får lösa detta i php genom att get/set size för varje bild
	*/
}




/***** Img sprites **************/
/* http://spritegen.website-performance.org 
Byt namn på klasser med "-on" till ":hover"
Browsers cachar både stylesheet och sprites-bilden. Kan behöva byta namn.
*/

 .sprite-add{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 0; width: 25px; height: 25px; } 
 .sprite-arrow-down{background: url(sprites4.png) no-repeat top left; background-position: 0 -35px; width: 64px; height: 64px; } 
 .sprite-check{background: url(sprites4.png) no-repeat top left; background-position: 0 -109px; width: 48px; height: 48px; } 
 .sprite-comment{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -167px; width: 25px; height: 28px; } 
 .sprite-fist{background: url(sprites4.png) no-repeat top left; background-position: 0 -205px; width: 50px; height: 50px; } 
 .sprite-flaggermany{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -265px; width: 16px; height: 11px; } 
 .sprite-flagsweden{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -286px; width: 16px; height: 11px; } 
 .sprite-flagusa{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -307px; width: 16px; height: 11px; } 
 .sprite-laddaner-small{background: url(sprites4.png) no-repeat top left; cursor:pointer; padding: 0px; border-style: none; background-position: 0 -328px; width: 15px; height: 14px; } 
 .sprite-laddaner{background: url(sprites4.png) no-repeat top left;  padding: 0px; border-style: none;  cursor:pointer;  background-position: 0 -352px; width: 26px; height: 25px; } 
 .sprite-longbar{background: url(sprites4.png) no-repeat top left; background-position: 0 -387px; width: 10px; height: 400px; } 
 .sprite-medlem{/*background: url(sprites4.png) no-repeat top left;*/ cursor:pointer;  background-position: 0 -797px; width: 40px; height: 40px; } 
 .sprite-mobil{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -847px; width: 15px; height: 25px; } 
 .sprite-play-small{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -882px; width: 15px; height: 15px; } 
 .sprite-play{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -907px; width: 30px; height: 30px; } 
 .sprite-playlist{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -947px; width: 30px; height: 30px; } 
 .sprite-popup{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -987px; width: 12px; height: 12px; } 
 .sprite-question{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1009px; width: 13px; height: 14px; } 
 .sprite-redigera:hover{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1033px; width: 40px; height: 40px; } 
 .sprite-redigera{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1083px; width: 40px; height: 40px; } 
 .sprite-remove{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1133px; width: 15px; height: 14px; } 
 .sprite-star{background: url(sprites4.png) no-repeat top left; background-position: 0 -1157px; width: 35px; height: 35px; } 
 /*.sprite-upload:hover{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1202px; width: 45px; height: 43px; } 
 .sprite-upload{background: url(sprites4.png) no-repeat top left; cursor:pointer;  background-position: 0 -1255px; width: 45px; height: 43px; } */
 input.sprite-pixel{background: url(sprites4.png) no-repeat top left; cursor:pointer; padding: 0px; border-style: none; width: 1px; height: 1px; } 

.dotted:hover{
background: url('drop_shadow.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

div#rightcol{
/*
-moz-border-radius:10px;
-webkit-border-radius:10px;
-opera-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
*/
background-color:white;
float:right; 
margin-top:10px;
padding-bottom:30px;
width:28%;
/*width:230px;*/
}


div#leftcol{
float:left;
/*width:700px;*/
width:70%;
padding-top: 0px;
padding-right: 10px;
margin-top:10px;
text-align:left;
}

div#sharetrack{
font-size: 10px; padding: 8px; background-color:#FFEEB3; margin-left: 0px; clear:both; float:left;
}

div.diagram-label{
float:left; font-size:smaller; width:100px; text-align:right; padding-right:10px; padding-bottom:3px; font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

div.diagram-value{
float:left; padding-left:10px; font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

div.diagram-bar{float:left; background-color:#c6dbad; height:20px;}

div.smallindex{margin-top:20px; margin-bottom:20px; text-align:center;}
span.smallindexpad{padding-left:6%;}

img#band{float:right; margin-top:10px; width:28%;}
img.imgright{float:right; margin:5px 10px 10px 10px;}	
img.imgleft{float:left; margin:5px 10px 10px 10px;}	
img.block{display:block;margin:5px 10px 10px 10px;}
	
@media screen and (max-width : 950px){
	div#center{width:100%; margin:0 0;}
	div#leftcol{width:100%; padding:0px;}
	div#rightcol{width:100%; padding:0px;}
	div#bannerbottom{display:none;}
	img#band{display:none;}
	div.downloads{display:none;}
	div.city{display:none;}
	img#demoband{width:23%; height:auto;}
	img#logo{width:100%; height:auto;}
	div#logototal{padding-top:80px;}
	div#logoslogan{width:70%;}
	img#ads-top-right{width:60%;}
	div.login{width:100%;padding-bottom:5px;padding-top:0px;}
	div#footerrow{text-align:left;}
	pre{display:none;}
	img.imgright, img.imgleft, img.block, img.picture{width:80%; height:auto;}
	div.te.comment{width:9%;}
	div.rating{width:8%;}
	div.plays{width:9%;}
	div.te.name{width:13%;}
	div.te.playlist{width:13%;}
	body#mainindex{margin:0 0; overflow:auto;}
	td.feedback{display:none;}
	span#nofvotes{display:none;}
	div.te_first{padding-left:1%;}
	h1#h1index{width:85%;}
	span.datesep{display: none;}
	table#loginfields{float:right;}
}