@charset "UTF-8";
/* CSS Document 

Title:		f11.se
Author:		Niclas Svedlund
Version:	1.0 
Created:	09-07-15
Updated:	09-07-15

Colors:		Orange			=	ffb400
			Text			=	d3d3c5
			Links			=	94abc2
			Current link	= 	ffb400

Remarks:	

Kvar att fixa:                   */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* !!!   STYLESHEET START                                                                         !!! */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

html{
height: 100%;											/* stödjs inte av IE 6.0 */
overflow-y: scroll;										/* Ser till att tvinga fram en vertikal scrollbar i högersidan av browsern. 
														Detta för att hindra att sidan hoppar i sidled när en "för lång" sida visas och en scrollbar är ett måste */
}  									


/* ################################################################################################## */
/* ###   START: ÖVERGRIPANDE ATT SORTERA IN                                                       ### */
/* ################################################################################################## */

/* margin lefts & margin rights - to centre content */
#bigbox, #footer, #logo,  #top_spacer, #top_spacer, #main_top_rounded, #main_bottom_rounded, #leftend, #rightend, #content_distance_top, #content_roundtop, #content_box, #content_column_left, #content_column_right, #content_roundbottom
 {
	margin-left: auto;
	margin-right: auto;
}

/* hela huvudcontainerna som allt rymms inom */
#bigbox{
/*   background-color:  ; */
   width: 900px;										/* --- Bredden på hela sajten  --- */
   height: auto; 										/* height: auto eller 700px; */
   padding: 0px 0px 0px 0px; 							/* --- top, right, bottom and left margins --- */
   } 

/*-- ----------------------------------- margin-top: 0; margin-bottom: 0; margin-left: 15px; margin-right: 0; ----------------------------------------------------------------- --*/

.bodyBackground {margin: 0px 0px 0px 15px; background-color: #000; background-image: url(../static/background.gif); background-position: top center; background-attachment: fixed; background-repeat: repeat-x; text-align: center; }
.main { width: 900px; margin-left: auto; margin-right: auto; font: 11px Verdana, Arial, sans-serif; text-align: left; }
.main .left { width: 400px; float: left; padding-top: 10px; text-align: left; z-index: -5; } /* padding-top styr avstånd från sidtoppen */
.main .right { width: 900px; float: none; padding-top: 45px; text-align: right; z-index: 10; } /* padding-top styr avstånd från sidtoppen */
.main .topmenu { width: 900px; float: right; margin-top:10px; padding-top: 35px; text-align: right; background-image:url(../static/logo.png); background-repeat:no-repeat;} /* padding-top styr avstånd på menytext till logotypen e.g från sidtoppen */
.main .wide { width: 900px; float: left; padding-top: 13px; text-align: left; }
.main .divider { width: 900px; float: left; margin-top: 3px; padding-top: 0px; border-bottom: solid 1px; }
.text { font: 11px Verdana, Arial, sans-serif; text-align: left; }
.centertext { font: 11px Verdana, Arial, sans-serif; text-align: center; }

/* ---------TEST TEST TEST -------------------------------- */
.left2 { width: 400px; float: left; padding-top: 10px; text-align: left; } /* padding-top styr avstånd från sidtoppen */

#top{ width:auto; height:auto;}
/* --------- SLUTTEST ------------------------------------- */


#signs{
	width: 900px; float: left; padding-top: 0px;
}
#clientplatecontainer{
	width: 900px; height:auto; float: left; padding-top: 0px; text-align:center;
}
.clientplate{
	width: 200px; float: left; margin-bottom: 25px; margin-right: 25px;
}
/* ################################################################################################## */
/* ###   START: HANTERING AV TYPSNITT OCH TEXTATTRIBUT                                            ### */
/* ################################################################################################## */
p
{ text-align: left;
  margin: 0px;											/* ---- top, right, bottom and left margins  ---- */
  padding: 0px 0px 5px 0px;								/* ---- top, right, bottom and left margins  ---- */
  line-height: 1.4em;	
 /*	background:#e6e6e6; */ 								/* ########## Slå på vid buggrättning ####### */
}

h1, h2, h3, h4
{ font-family: tahoma, sans-serif;
  font-size: 110%;
  letter-spacing: .1em;
							/* ----   padding: 3px 0px 3px 0px;	top, right, bottom and left margins  ---- */
  margin: 0px 0px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
  /*	background:#ccc; */								/* ########## Slå på vid buggrättning ####### */
}

h1
{ font-family: tahoma, sans-serif;
  font-size: 130%;
  letter-spacing: .1em;	
  padding: 5px 0px 15px 0px;								/* ---- top, right, bottom and left margins  ---- */
  margin: 0px 0px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
  /*	background:#ccc; */								/* ########## Slå på vid buggrättning ####### */
}

h2
{ font-family: arial, sans-serif;
  font-size: 107%;
  padding-bottom: 10px;
}

h3
{ font-family: arial, sans-serif;
  font-size: 105%;
}

h4
{ font-family: arial, sans-serif;
  font-size: 100%;
}

largeHeading
{ font-family: arial, sans-serif;
  font-size: 200%;
}

/* --------------------------- */
.ingress
{
font-style:oblique;
font-weight:bold;
margin: 0px;											/* ---- top, right, bottom and left margins  ---- */
padding: 0px 0px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
line-height: 1.2em;
}

/* ################################################################################################## */
/* ###   START: BLOCKQUOTE                                                                        ### */
/* ################################################################################################## */
blockquote{
	background: url(../static/quote_begin.png);
	background-position:top left;
	background-repeat:no-repeat;
}
blockquote p:first-child{
	padding-top: 30px;
	text-indent: 60px;
}
blockquote p:last-child{
	display:inline;
	padding-bottom: 28px;
	padding-right: 56px; /* för de små 20px för de stora 50px */
	background:url(../static/quote_end.png);
	background-position:bottom right;
	background-repeat:no-repeat;
}

    blockquote span {   
        display: block;   
        float: left;   
        width: 60px;   
        height: 40px;
		margin-top: 10px;
    }  

#blockquoteWrapper{
	width:auto;
	height:auto;
}

/* ################################################################################################## */
/* ###   START: HANTERING AV TABELLER & TABELLVARIANTER                                           ### */
/* ################################################################################################## */



/* ################################################################################################## */
/* ###   START: LIST HANTERING                                                                    ### */
/* ################################################################################################## */

/* unordered list */

/* ordered list */



/* ################################################################################################## */
/* ###   START: HANTERING AV HUR LÄNKAR SER UT                                                    ### */
/* ################################################################################################## */

a:link { text-decoration: none; color: #94abc2; }
a:visited { text-decoration: none; color: #94abc2; } /* d3d3c5   mörk orange= ffc600 */
a:hover { text-decoration: underline;}
a:active { text-decoration: none; color: #94abc2; }

/* -- Sidfotens länkar -- */
a.footer:link{color: #94abc2; text-decoration:none;}    /* BYT FÄRGER */
a.footer:visited {color: #94abc2;text-decoration:none;}
a.footer:hover {color: #94abc2;text-decoration: underline;}

a.footer_current:link{color:#ffb400; text-decoration:none;}
a.footer_current:visited {color:#ffb400; text-decoration:none;}
a.footer_current:hover {color: #ffb400; text-decoration:none;}

/* --- För formulär -- */
a.forms:link{color: #9d0d0d; text-decoration:none;}
a.forms:visited {color: #9d0d0d;text-decoration:none;}
a.forms:hover {color: #9d0d0d;text-decoration: underline;}

a.current, a.current:hover
{
color: #ffb400;												/* Orange text */
/* text-shadow: #008999; */  								/* Text shaddow stöds inte av FF1.5, IE 6 & 7 IE Mac 5.2 Netscape 8, Safari 2 samt Opera 8 & 9 */
} 


/* ################################################################################################## */
/* ###   ATT SORTERA IN                                                                           ### */
/* ################################################################################################## */
#fullHeading{
	width:auto;
	padding-top: 15px;
	
}

/* --- Kolumner på bla förstasidan --- */
.fullColumn{
	width: 900px; height:auto;
	float:left;
}

#twoColumn-left{
	width: 280px; height:auto;
	float:left;
}

#twoColumn-right{
	width: 620px; height:auto;
	float:left;
}

.twoColumnService-left{
	width: 424px; height:auto;
	float:left;
}

.twoColumnService-right{
	width: 476px; height:auto;
	float:left;
}


#tableColumn{
	width: 900px;
	height:auto;
	margin-top: 25px;
	float: left;
}


/* --- Hantering av bilder vid texter på sidorna --- */
#photoboxLeft{
	width:auto;
	height:auto;
	padding-right: 20px; /* skapar distans mellan texten och själva bilden */
	float:left;
}

#photoboxRight{
	width:auto;
	height:auto;
	float:right;
	/* skapar distans mellan texten och själva bilden */ 
	margin-left: 40px; 
	margin-bottom: 10px;
}

.photoBorderLight{
	border:#FFF solid 1px;
}

.photoBorder{
	border:#FFF solid 4px;
}

.photoBorderBold{
	border:#FFF solid 8px;
}


.fourstatePadding{
	padding: 10px;
}

/* Credit till fotograf - liten stil */
.credit
{ clear:both; float:right; font-family: arial, sans-serif;
  font-size: 80%;
  padding: 5px 0px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
}

/* fotnot till bilder på services sidan - liten stil */
.imagenote
{ clear:both; float:right; font-family: arial, sans-serif;
  font-size: 100%;
  padding: 0px 0px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
  margin-top: 0px;
}

/* fotnot till bilder på services sidan - liten stil */
.imagenoteOtherservices
{ clear:both; float:right; font-family: arial, sans-serif;
  font-size: 90%;
  padding: 0px 20px 0px 0px;								/* ---- top, right, bottom and left margins  ---- */
  margin-top: -105px;
}

.imagenote.marginsetBelow5 {margin-top: 5px; padding: 0px 0px 0px 0px;}

.quotediv {width: 260px; height: 50px;}


/* ################################################################################################## */
/* ###   START: HANTERING AV BILDER I "TABELLFORM"                                                ### */
/* ################################################################################################## */

.imginbox{height: 236px; width: 156px; display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; padding: 5px;}
.imginbox2col{height: 236px; width: 339px; display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; padding: 5px;}

/* vid byte till enbart div:ar istället för som tidigare i tabell */
.photoBorder5div{height: 236px; width: 156px; display: block; float:left; background-color: #ffffff; border: 1px solid #999999; padding: 5px; margin: 0px 15px 0px 0px;}
.photoBorder5EndDiv{height: 236px; width: 156px; display: block; float:right; background-color: #ffffff; border: 1px solid #999999; padding: 5px; margin: 0px 0px 0px 0px;}
.photoBorder5div2col{height: 236px; width: 337px; display: block; float:left; background-color: #ffffff; border: 1px solid #999999; padding: 5px; margin: 0px 15px 0px 0px;}
.photoBorder5divSqr{height: 236px; width: 236px; display: block; float:left; background-color: #ffffff; border: 1px solid #999999; padding: 5px; margin: 0px 15px 0px 0px;}


.photoBorder0{
	width:auto;
	height:auto;
	float:left;
	padding: 5px;
	margin-right:15px;
}
.photoBorder0end{
	width:auto;
	height:auto;
	float:right;
}

.photoBorder5{
	width:auto;
	height:auto;
	float:left;
	border:#FFF solid 5px;
	margin-right:15px;
}
.photoBorder5end{
	width:auto;
	height:auto;
	float:right;
	border:#FFF solid 5px;
}

#portfoliowrapper{
	float:left;
	width:900px;
	height:auto;
}

.portfolioRow{
	width:900px;
	height:auto;
	float:left;
	margin-top: 15px;
	margin-bottom: 5px;
	}
/* special för bröllopen så att namnrad får rätt avstånd till bilderna */
.weddingportfolioRow{
	width:900px;
	height:auto;
	float:left;
	margin-top: 0px;
	margin-bottom: 20px;
	}
	
/* Special för startsidans utseende */
.photoBorder5_startpage{
	width:auto;
	height:auto;
	float:left;
	border:#FFF solid 5px;
	margin-left:1px;
	margin-right:15px;
}
.photoBorder5end_startpage{
	width:auto;
	height:auto;
	float:right;
	border:#FFF solid 5px;
	margin-right:1px;
}

#imgdsplwrapper{
	float:left;
	width:900px;
	height:auto;
	margin-top: 25px;
	margin-bottom: 15px;
}

.imgdsplRow{
	width:900px;
	height:auto;
	float:left;
	margin-top: 15px;
	margin-bottom: 5px;
	}

/* ################################################################################################## */
/* ###   START: HANTERING AV SALESDISPLAY                                                         ### */
/* ################################################################################################## */

/* Skapa ett passepartout runt bilden */
.salesboximg{display: block; background-color: #ffffff; border: 1px solid #999999; padding: 15px 15px 37px 15px;} /* position: relative; */

/* Skapa en platshållare för bilden som skall visas */
.imgdisplayboxLeft{width: 375px; height:310px; float:left;}

/* Skapa platshållare för alla text & prisinfo som skall ligga till höger om bilden */
.artinfobox{width: 500px; height:310px; float:left; padding-right: 25px;}

/* Skapa stilar för varje rad av info som dimension, antal, pris etc */
.arttitle{width:400px; height:auto; float:left;}
.dimensions {width:200px; height: 2em; float:left; text-align:left; margin-top:5px;}
.quantity {width:80px; height: 2em; float:left; text-align: center;}
.price {width:80px; height: 2em; float:left; text-align:right; margin-top:5px;}

.infoheader{width:100px; height:auto; float:left;}
.edition{width:400px; height:auto; float:left;}
.paperquality{width:400px; height:auto; float:left;}


.addtobasket{width:60px; height: 2em; float:left; text-align:right; padding-left: 25px;}

/* Skapa en avdelare mellan varje konstverk som säljs */
.salesdisplay_divider { float:left; width: 900px; height: 10px; margin-top: 10px; margin-bottom: 50px; background:url(../static/beveled_divider.png) no-repeat; overflow: hidden;}

/* Flytta detta till shoppingarean senare */
.shoppHeading{ width:auto; padding-top: 15px;}
.shoppingcartSummary{width:300px; float:right; text-align:right; }

/* ################################################################################################## */
/* ###   START: HANTERING AV MENYKNAPPARNA                                                        ### */
/* ################################################################################################## */


/* ################################################################################################## */
/* ###   START: KASSA / CHECKOUT                                                                  ### */
/* ################################################################################################## */

/* --- FORMULÄR --------------------------------------------------- */

label {
	margin-top: 0.8em;
	font: 1.1em/1.8em verdana,helvetica, sans-serif;
	display:block;
	color: #d3d3c5;			/* Textfärg: Labels som Namn etc */
}

/* --- Hantera inmatning för val av betalmetod --- */
.radiobtn {
	margin-left: 0px;
	padding: 6px 0 2px 0;
}

.radiobtn label {				/* se till att radiobuttons label hamnar rätt */
	display:inline;
	padding-left: 5px;
	font: 1.1em/1.6 verdana,helvetica, sans-serif;
	color: #d3d3c5;				/* Texrfärg: Radiobutton label text */
}
/* Hantera inmatningsfälten */
input.text {
	width: 140px;
	display:block;
	border:1px solid #d3d3c5;
	background-color:#fff;			/* Fältfärg: Bakgrund vit */
	padding:2px;
}

input.address {
	width: 250px;
	clear:both;
}

input.zip {
	width: 50px;
}

input.message {
	width: 400px; height:100px;
	clear:both;
}

/* -- Hantera --- */


/* --- ORDERSAMMANSTÄLLNINGEN (Steg 1) ----------------------------- */

/* Skapa en ram och se till att den får en ram samt lagom space till texten */
.orderBox{
	border: 2px; 
	border-style:solid; 
	border-color:#d3d3c5; 
	margin-left: 28px; 				/* ser till att ramen får ett indrag på vänstersidan så att bilden i nästa steg hamnar ovanpå ramen */
	padding: 10px 0px 20px 40px;
}

/* Placera ut bilden så att den hamnar ovanpå ramen uppe i vänster hörn */
.orderSteps{
	float:left;
	margin-left: -73px;
	margin-top: -30px;
}

.orderCheckout {
	width: 790px;
	border-top: 1px solid #969698;
	border-bottom: 3px solid #969698;
	font-size: 1.1em;
	line-height: 2.2;
	margin: 15px 0;
	background-color: #fff;
}

.orderTop td, #order .orderLine td {
	border-bottom: 2px solid #969684; /* #e5e5e5; */
}

.orderTop {
	background-color: #ffb400;
	border-bottom: 1px solid #a2a298; /* C30;*/
}

/* hantera columnen med bilden i ordersammanställningen */
.orderImage {
	text-align:center;
	padding-left: 4px;
	width: 50px;
	color:#000;			/* Textfärg: Antal*/
}

/* hantera columnen med antal beställda i ordersammanställningen */
.orderAmount{
	text-align:right;
	padding-left: 4px;
	padding-right:4px;
	width: 40px;
	padding-bottom: 3px;
	padding-top: 3px;
	color:#000;			/* Textfärg: Antal*/
}

/* hantera columnen med produktspecifikationen i ordersammanställningen */

.orderProduct {
	width: 400px;
	padding-left: 15px;
	color:#000;				/* Textfärg: Produkt */
}

/* hantera á-pris, frakt och moms i ordersammanställningen */
.orderPrice, .orderFreight, .orderVAT {
	text-align:right;
	width: 90px;
	color:#000;			/* Textfärg: á-pris */
}


/* hantera columnen med á-pris i ordersammanställningen */
.orderRowTotal {
	text-align:right;
	width: 100px;
	color:#000;				/* Textfärg: Totalkolumn */	
}

/* hantera raden med summering av totalpriset (e.g. ordersumma + frakt + moms) i ordersammanställningen */
.orderTotalSum {
	text-align:right;
	color:#000;				/* Textfärg: Summaraden */	
}

/* Rita ut en linje mellan varje orderrad */
.orderLine td {
	border-bottom: 1px solid #e5e5e5;
}


/* hantera summeringsraden så den får en avvikande färg mot tabellen o övrigt */
 .orderTotal {
	background-color: #f2f2f2;
}

/* Rita ut en linje mellan tabell och summeringsraden */
.orderTotal td {
	border-top: 1px solid #e5e5e5;
}

/* Hantera kolumn med radera orderrad ikonen */
.orderRemoveCol{
	padding-left:10px;
	width: 20px;
	
}


/* ################################################################################################## */
/* ###   START: HANTERA FÄLT I FORMULÄR                                                           ### */
/* ################################################################################################## */
/* Nya element för att hantera textfält i formulär */


#forms td {
padding-left:3px;
}

#forms .requiredtextfield {  
	width:260px; 			/* Styr textfältens längd */
	background:#ffcccc; 	/* Röd bakgrundsfärg på obligatoriska fält */
}

#forms .textfield {  
	width:260px; 			/* Styr textfältens längd */
}

#forms .zipfield {
	width:60px; 
}

#forms .cityfield {
	width:129px; 
}
/* Slut textfältshantering */


/* ################################################################################################## */
/* ###   START: LIGHTBOX CSS                                                                      ### */
/* ################################################################################################## */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../js/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../js/lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }



/* ################################################################################################## */
/* ###   START: REFERENS SLIDER                                                                   ### */
/* ################################################################################################## */

/* The CSS. You can of course have this in an external .css file if you like. 
Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need. */

a{ outline: none; }

li { list-style-type: none; }

.wrap {
	width: 94%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -100px;  /*the bottom margin is the negative value of the footer's height*/ }

 #left { float: left; width: 13%; margin: 150px 0 0 40px; border-right: thin dotted #CCCCCC; }   /* Styr referensplattornas placering horisontellt */
 #right { float: left; width: 90%; margin: 0 0 10px 90px; }										 /* Styr referensplattornas placering horisontellt */



/* Styr utseendet på "Kunddelen", dvs texten som står till vänster ovanför referensbildsplattan */
p.alignleft {
float: left; 
width: 70%; 
text-align: left;
font-size: 11px;
line-height: 120%;
color: #d3d3c5;
margin: 10px 0 0 0  !important;
}


/* Styr utseendet på "Uppdragstyp", dvs texten som står till höger ovanför referensbildsplattan */
p.alignright {
float: right;
width: 20%; 
text-align: right;
font-size: 11px;
line-height: 120%;
color: #d3d3c5;
margin: 10px 0 0 0  !important;
}

/* Styr utseendet på Rubriken ovanför "Klicka på pilarna för att navigera mellan referenserna" och används just nu inte alls */
.fwork{
font-size: 1.5em;
line-height: 130%;
font-weight: bold;
color:#d3d3c5;
padding: 0;
margin: 0;
}

/* Styr utseendet på texten "Klicka på pilarna för att navigera mellan referenserna" */
.fworksub{
font-size: .9em;
color: #d3d3c5;
padding: 0;
margin: -5px 0 0 0;
text-align:center;
}

/*  content_box  */

#content_slidesbox{ float:left; width: 890px; height: auto; overflow: hidden; } /* overflow: hidden; background: url(../static/content_middle.png) repeat-y; */
#content_onecolumn { float:left; width: 855px; height: auto; padding: 0px 5px 0px 10px; overflow:visible }				 /* height: 470px; */


/* Start Coda Slider */

.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
		
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
padding: 0;
position: relative; 
width: 680px;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 100%; background: inherit;}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden; 
margin: auto;
width: 682px; /* Also specified in  .stripViewer .panelContainer .panel  below */
height: 520px; 
clear: both;
background: inherit;

}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
		
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width: 682px; /* Also specified in  .stripViewer  above */
}
		
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding: 0px; background: url(../static/projectwindowBG.png); /* padding flyttar ned referensbilden så att BG-bild lirar i höjd #FFFFFF på background color */
}
		
		
.stripNav { display: none }

		
.stripNavL, .stripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
		
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
		
.stripNavL {
left: 5px;
}
		
.stripNavR {
right: 0;
}
		
.stripNavL {
background: url(../static/minus.png) no-repeat center; z-index: 5;
}
		
.stripNavR {
background: url(../static/plus.png) no-repeat center; z-index: 5;
}



.stripNavL A:hover {background: url(../static/minus_on.png) no-repeat center; background-position: 7px 7px;}

.stripNavR A:hover {background: url(../static/plus_on.png) no-repeat center; background-position: 7px 7px;}

.slidealign {padding: 3px 0 0 0;}


/* ################################################################################################## */
/* ###   START: SIDFOT                                                                            ### */
/* ################################################################################################## */

/* containers för sidfoten */
#footer_divider { float:left; width: 900px; height: 10px; margin-top: 10px; background:url(../static/beveled_divider.png) no-repeat; overflow: hidden;}
#footer { 
float:left; width: 900px; height: 20px;  
/*  margin: 0px 5px 0px 5px; */ 							/* --- top, right, bottom and left margins --- */
  padding: 10px 0px 0px 0px; 								/* --- top, right, bottom and left margins --- */
  text-align: center;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* !!!   STYLESHEET END                                                                           !!! */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


/* ################################################################################################## */
/* ###   START: REFERENS SLIDER                                                                   ### */
/* ################################################################################################## */

/* The CSS. You can of course have this in an external .css file if you like. 
Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need. */


.smallwrap {
	width: 94%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -100px;  /*the bottom margin is the negative value of the footer's height*/ }

 #smallleft { float: left; width: 13%; margin: 150px 0 0 40px; border-right: thin dotted #CCCCCC; }   /* Styr referensplattornas placering horisontellt */
 #smallright { float: left; width: 90%; margin: 0 0 10px 90px; }										 /* Styr referensplattornas placering horisontellt */



/* Styr utseendet på "Kunddelen", dvs texten som står till vänster ovanför referensbildsplattan */
p.smallalignleft {
float: left; 
width: 70%; 
text-align: left;
font-size: 11px;
line-height: 120%;
color: #d3d3c5;
margin: 10px 0 0 0  !important;
}


/* Styr utseendet på "Uppdragstyp", dvs texten som står till höger ovanför referensbildsplattan */
p.smallalignright {
float: right;
width: 20%; 
text-align: right;
font-size: 11px;
line-height: 120%;
color: #d3d3c5;
margin: 10px 0 0 0  !important;
}

/* Styr utseendet på Rubriken ovanför "Klicka på pilarna för att navigera mellan referenserna" och används just nu inte alls */
.smallfwork{
font-size: 1.5em;
line-height: 130%;
font-weight: bold;
color:#d3d3c5;
padding: 0;
margin: 0;
}

/* Styr utseendet på texten "Klicka på pilarna för att navigera mellan referenserna" */
.smallfworksub{
font-size: .9em;
color: #d3d3c5;
padding: 0;
margin: -5px 0 0 0;
text-align:center;
}

/*  content_box  */

#smallcontent_slidesbox{ float:left; width: 900px; height: auto; overflow: hidden; } /* overflow: hidden; background: url(../static/content_middle.png) repeat-y; */
#smallcontent_onecolumn { float:left; width: 900px; height: auto; padding: 0px 5px 0px 10px; overflow:visible }				 /* height: 470px; */


/* Start Coda Slider */

.smallstripViewer .smallpanelContainer .smallpanel ul {
text-align: left;
margin: 0 15px 0 30px;
}
		
.smallslider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
padding: 0;
position: relative; 
width: 680px;
}

/* These 2 lines specify style applied while slider is loading */
.smallcsw {width: 100%; height: 100%; background: inherit;}
.smallcsw .smallloading {margin: 200px 0 300px 0; text-align: center}

.smallstripViewer { /* This is the viewing window */
position: relative;
overflow: hidden; 
margin: auto;
width: 682px; /* Also specified in  .stripViewer .panelContainer .panel  below */
height: 520px; 
clear: both;
background: inherit;

}
		
.smallstripViewer .smallpanelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
		
.smallstripViewer .smallpanelContainer .smallpanel { /* Each panel is arranged end-to-end */
float:left;
height: 100%;
position: relative;
width: 882px; /* Also specified in  .stripViewer  above */
}
		
.smallstripViewer .smallpanelContainer .smallpanel .smallwrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
padding: 0px; background: url(../static/projectwindowBG.png); /* padding flyttar ned referensbilden så att BG-bild lirar i höjd #FFFFFF på background color */
}
		
		
.smallstripNav { display: none }

		
.smallstripNavL, .smallstripNavR { /* The left and right arrows */
position: absolute;
top: 230px;
text-indent: -9000em;
}
		
.smallstripNavL a, .smallstripNavR a {
display: block;
height: 40px;
width: 40px;
}
		
.smallstripNavL {
left: 5px;
}
		
.smallstripNavR {
right: 0;
}
		
.smallstripNavL {
background: url(../static/minus.png) no-repeat center; z-index: 5;
}
		
.smallstripNavR {
background: url(../static/plus.png) no-repeat center; z-index: 5;
}



.smallstripNavL a:hover {background: url(../static/minus_on.png) no-repeat center; background-position: 7px 7px;}

.smallstripNavR a:hover {background: url(../static/plus_on.png) no-repeat center; background-position: 7px 7px;}

.smallslidealign {padding: 3px 0 0 0;}