/* Container */
.container {position:relative;float:left;padding:0; margin:0;
	padding-left: 12px;	padding-bottom: 12px;
	/* clear:both; */
	/* width:100%;  */
}

.containerLeft {position:relative;float:left;margin:0; 
	padding:0px;padding-left: 12px;	padding-bottom: 12px;
	word-wrap: break-word;
}

.containerRight {position:relative;	float:right;
	margin:0; padding:0;
	padding-right: 12px;padding-bottom: 12px;
	word-wrap: break-word;
}

/* Sticky footer */ 
html, body {  margin: 0;  min-height: 100%;}

body {
  /*background:#515151;*/
}  

/* BLOCK */
#WRAPPER{position:relative;	width:100%;	min-height:100%;margin:0; padding:0; }

/* Översta delen */
#HEADER{position:relative;	margin:0; padding: 0;clear:both; height:60px;background: #FFFFFF; }

#LOGO{
	/*TEXT STYLE*/
	margin:0;padding:0;
	font-weight:bold;
	font-family:Candara, Verdana, Arial;
	color:#DE7A33;
	/* position:absolute; */
	/* bottom: 0px; */
	position:relative;
	padding-top:20px; 
	padding-left:6px;
	font-size:32px;
	float:left;
}

#STATUS{
	font-family:Candara, Verdana, Arial;
	position:relative;
	margin:0; padding: 0; 
	padding-top:20px; 
	padding-right:6px;
	float:right;
}
#STATUS > p{
	position:relative;
	margin:0; padding: 0; 
	padding-right:6px;
	float:right;
	font-size:14px;
	clear:right;
}



/* Ingår i HEADER, innehåller logo, meny,slogan osv ... */
/* Översta delen av sidan som är lika stor som CONTENTS och som ligger centrerad */
#BANNER{
	position:relative;
	margin:0 auto; /* centrerad */
	padding:0;
	max-width:960px;
	height:100%;
	/*background: #EFEFEF; */
}

/* "Remsan" där menyn ligger */
#MENUHEADER{
	position:relative;
	margin:0; padding: 0;
	clear:both; /* inget till höger eller vänster om */
	background: #F3F3F3; /* DDDDDD F5F5F5 FFB31A D76512 */
	background: #FFFFFF;
	border-top: 2px solid #DE7A33; /* 919191*/
	border-bottom: 2px solid #DE7A33; /* 919191*/
}

#CONTENTS{
	position:relative;
	margin:0 auto; /* centrerad */
	display: block;
	overflow: auto;
	padding:10px;
	padding-top:4px;
	max-width:960px; /* inte större än så här */
}

/* TEXT OCH TYPSNITT */ 
/* #DE7A33 #EFEADC #FFB31A #D76512 #AB510F #E3A019*/
p,a{
	margin:0;padding:0;
	padding-bottom:8px; /* Avstånd mellan styckena */
	line-height:120%; 
	font-weight:normal;
	font-size:16px;
	font-family:Candara, Verdana, Arial;
	color:#515151;
	text-decoration:none;
}

h1,h2,h3,h4{
	margin:0;padding:0;
	font-weight:bold;
	font-family:Candara, Verdana, Arial;
	color:#515151;
}

/* ANPASSNINGAR */
h1{ color:#DE7A33; } /*DE7A33 D76512 BA5811  d69718 bf8715*/
h2{	color:#DE7A33; } /*D76512 BA5811  a85519 */
h3,h4{color:#555555;}

h1{ font-size:26px;	padding-top:6px;padding-bottom:4px; }
h2{ font-size:22px; padding-top:6px; padding-bottom:4px; }
h3{ font-size:18px; padding-top:4px; padding-bottom:4px;}
h4{ font-size:16px; padding-top:4px; padding-bottom:0px;text-decoration:none;} /*text-decoration: underline*/

a{  color:#c56520;/*c56520 A16C02 FFB31A DE7A33*/
	font-weight:bold;
}
a:hover{color:#DE7A33; cursor:pointer;} 

/* IMAGE */
img {
	display:block; 
	border: 1px solid #000000;
	border-radius:10px;
	width:100%;
	margin-left: auto;
    margin-right: auto;
	max-width:500px; 
}

.imgOverlay {margin:0;padding:0;
	position: relative; 
	display:block; 
	bottom:16px; 
	background:#000000;
	width:100%;
	height:100%;
	opacity:0.5; 
}

/*** TABLE ***/
table {
	border-collapse:collapse; padding:0;  
	margin-top:6px;
	margin-bottom:6px;
	margin-left:0;
	margin-right:0;
	float:left;
}
/* TR */
tr{ margin:0;padding:0;}

/* TH*/
th{ background-color: #F0EDE7; /* E6E3DE #F9F9F9*/
	border: 1px solid #AAAAAA;
	vertical-align:top;
	/* text-align:left; */
	/* border-top: 0px solid #AAAAAA;  */
}
/* TD */
td {	
	margin:0;padding:0;
	/*border-top: 0px solid #E5E5E5;*/
	/*border-bottom: 1px solid #AAAAAA;/* E5E5E5 */
	/*border-right: 0px solid #AAAAAA;*/
	border: 1px solid #AAAAAA;
	/* -width:100px; */
	/* text-align:left; */
	vertical-align:top;}

/* -TABLE TEXT- */
table p, table a, table h1, table h2, table h3, table h4{ 
	font-family: Candara, Arial, Verdana, Helvetica, Sans-serif;}

th p, th a, th h1, th h2, th h3, th h4{
	/* text-transform:uppercase; */
	font-weight:bold; padding:6px; padding-bottom:4px;
}
	
td p, td a,td h1,td h2,td h3,td h4{ 
	font-weight:normal;
	padding:6px;
	/* padding-left:4px;padding-right:4px; */
	/*white-space:nowrap;*/
}
th p,th a,td p ,td a{ font-size:14px;}
td a{ display:block; color:#DE7A33; width:100px;} /* color:#D76512; #FFB31A #996B10*/

/* TABLE DECORATIONS */
td > .left { text-align:left;}
td > .right { text-align:right;}
th > .left { text-align:left;}
th > .right { text-align:right;}

td > .leftMidWidth { text-align:left; width:220px;}
td > .rightMidWidth { text-align:right; width:220px;}
th > .leftMidWidth { text-align:left; width:220px;}
th > .rightMidWidth { text-align:right; width:220px;}

/*tr:hover {background-color:#F7F5EF; cursor:pointer;}*/ /* #D9D7D2*/
tr:hover a{font-weight:bold;color:#D76512;}
tr:hover p{font-weight:bold;color:#805A0D;}
tr:hover th p{font-weight:bold;color:#000000;}
td a:hover {color:#FFFFFF;background-color:#FFB31A;} 
	
	
/* FORM */
form  {
	display: block;
	padding-top: 6px;
}

textarea {
  width: 100%;
  height: 80px;
  padding: 6px 6px;
  box-sizing: border-box;
  border: 1px solid #000000;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  border-radius: 4px;
  background-color: #FCFCFC;
  float:left;
}

input[type=text] {
  width: 160px;
  padding: 6px 6px;
  margin: 3px 0;
  margin-right: 6px;
  box-sizing: border-box;
  border: 1px solid #000000;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  display: inline-block;
  border-radius: 4px;
  background-color: #FCFCFC;
  color:#000000;
  float:left;
}

select {
  /* width: 200px; */
  width: 160px;
  padding: 6px; margin: 3px; margin-right: 6px;
  box-sizing: border-box;
  border: 1px solid #000000;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  display: inline-block;
  border-radius: 4px;
  background-color: #FCFCFC;
  color:#000000;
  float:left;
}
/* Change width on the select object in form */
#wideField { width: 320px; }

input[type=submit] {
  padding: 6px 6px;
  margin: 3px 0;
  margin-right: 6px;
  box-sizing: border-box;
  background-color: #E1E1E1;
  border: 1px solid #000000;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  border-radius: 4px;
  float:left;
}

/*------------------------

 SPECIAL-FORMATERINGAR
 
 ------------------------ */
.observeColor{ color:#FF0000;font-weight:Bold; }
.infoColor{ color:#16a831; font-weight:Bold;} 

 /* -ADMINISTRATOR SPECIFIC- */
.adminURL{ color:#FF0000; font-weight:Normal;font-size:14px; }

/* Clickable URLs FA624D  FF0000*/
.adminButton{ 
	display: block;
	position:relative;
	float: none;
	border: 1px solid #FA624D;
	border-radius:6px;
	background-color:#FFE9E6; 
	padding:0px; margin:0px;
	font-size:14px;
	text-align:center;
	line-height:160%;
	width: 100%;
	color:#FA624D; /*  FA624D  FFE9E6*/
}
.adminButton:hover{ background-color:#FA624D; color:#FFFFFF; }



 /* -TEXT MODIFICATION- */
 /* Mark text in an another color */
.textMark{ color:#DE7A33;font-weight:Bold; }

 /* -EVENT TEXT- */
 /* Text describing one event (date + event) */
.eventText{
	padding:0px;padding-top:8px; padding-bottom:8px;
	margin:0px; margin-top:8px;margin-bottom:8px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-size:18px;
	line-height:140%; 
	color:#8c430e;
	font-weight:normal;	 
}

.centerBlock {
	margin: auto; /* centrerad */
	width:66%;	
	min-width:320px;
}

/* -IMAGE - */
.imgFullSizeBlock { 
	display:block; 
	position:relative;
	float:left;
	width:500px;
	padding:0;margin:0px;
	margin-right:10px;
	margin-bottom:20px;margin-top:12px; 
}

.thumbNailBlock { 
	display:block; 
	position:relative;
	float:left;
	width:310px;
	padding:0;
	margin-right:5px;margin-left:5px;
	margin-bottom:20px;margin-top:12px; 
}

.thumbNailBlock > a{ margin:0;padding:0;font-size:14px; margin-bottom:6px;} 
.thumbNailBlock > img{ margin-top:6px; opacity: 0.90;cursor:pointer;} 
.thumbNailBlock > img:hover{ background: #8c430e;color:#DE7A33; opacity: 1;cursor:pointer;} 
/* .thumbNailBlock > p{ font-size:16px;} */
/* .thumbNailBlock > h1{ font-size:32px;} */
/* .thumbNailBlock > h2{ font-size:26px;} */
/* .thumbNailBlock > h3{ font-size:18px;} */
.thumbNailBlock > h4{ font-size:16px; padding-top:1px;padding-bottom:1px;}

/* Ta bort nedanstående lösning */
.thumbNailBlock > .photoTitle{
	float:none;	clear:both;	width:98%;
	height:42px; 
	margin: auto; margin-top:3px; 
	padding: 3px;
	padding-top:0px;
	border-top: 2px dotted #A1A1A1; 
}
/* ... och ersätt med denna */
#photoTitle{
	position: relative;
	clear:both;	width:98%;
	height:42px; 
	margin: auto; margin-top:3px; 
	padding: 3px; padding-bottom: 6px;
	border-top: 2px dotted #A1A1A1; 
}
#photoTitle .photoTitleText {
    position: absolute;
    bottom: 0; width: 100%;
	margin-bottom:-3px;
}


.miniTextBlock{	height:24px; margin: auto; margin-bottom:6px; border-bottom: 2px dotted #A1A1A1;}
.miniTextLeft{ float:left;padding-left:3px; margin-top:3px; margin-bottom:3px;text-align: left;	font-size:14px;}
.miniTextRight{ float:right; padding-right:3px; margin-top:3px; margin-bottom:3px; text-align: right;font-size:14px;}

/* NAVIGATION "BUTTONS" - 
 Clickable URLs 
 Navigation buttons for different types of searchktypes
*/

.navbar {
  display: block;margin:0px;padding:0px;
  overflow: hidden; width: 100%; /* Full width */
  position: fixed; /* Set the navbar to fixed position */ 
  /* position: relative; *//* Set the navbar to fixed position */
  top: 140px; /* Position the navbar at the top of the page */ 
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
}


.navButton{ 
	display: block;
	position:relative;
	float: left;
	border: 2px solid #000000; /*#FFB31A  */
	border-radius:6px;
	margin:0px;margin-right:4px;margin-top:6px;margin-bottom:6px;
	padding:3px; padding-top:6px; padding-bottom:6px;
	background-color:#fae0bb;  /*faddb4 fcf0d4 #FFF7E6 */
	width: 210px;
	font-size:18px;
	text-align:center;
}
.navMonth{ background-color:#fae0bb; color:#5b5e56;}
.navMonth:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
.navLatest{ background-color:#ccd4c1; color:#5b5e56;}
.navLatest:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
.navCategory{ background-color:#c3c1d4; color:#5b5e56;}
.navCategory:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
.navTag{ background-color:#D9E8FF; color:#5b5e56;}
.navTag:hover{ background-color:#FFB31A; color: #FFFFFF; cursor:pointer;font-weight:bold;}


/* - SEARCH "BUTTONS" - 
 Clickable URLs 
 Navigation buttons for different types of searchktypes
*/
#searchButton{ 
	display: block;
	position:relative;
	float: left;
	border: 2px solid #000000; /*#FFB31A  */
	border-radius:6px;
	margin:0px;margin-right:4px;margin-top:6px;margin-bottom:6px;
	padding:3px; padding-top:6px; padding-bottom:6px;
	background-color:#fae0bb;  /*faddb4 fcf0d4 #FFF7E6 */
	width: 210px;
	font-size:18px;
	text-align:center;
}
#searchButton:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;} /* #ffdd99 #FFB31A  ffe6b3 ffeecc*/

#searchButton.month{ background-color:#fae0bb; color:#5b5e56;}
#searchButton.month:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
#searchButton.latest{ background-color:#ccd4c1; color:#5b5e56;}
#searchButton.latest:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
#searchButton.category{ background-color:#c3c1d4; color:#5b5e56;}
#searchButton.category:hover{ background-color:#FFB31A; border: 2px solid #000000;color:#FFFFFF;}
#searchButton.tag{ background-color:#D9E8FF; color:#5b5e56;}
#searchButton.tag:hover{ background-color:#FFB31A; color: #FFFFFF; cursor:pointer;font-weight:bold;}


/* -TAG CONTAINER - 
 Containing tag boxes
*/

.tagContainer{ 
	display: block;
	position:relative; float: left;
	border: 1px solid #FA624D;
	border-radius:6px;
	background-color:#FFE9E6; 
	padding:0px;
	margin:0px; margin-bottom:6px;
	font-size:14px;
	text-align:left;
	line-height:160%; width: 100%;
	color:#FA624D; /*  FA624D  FFE9E6*/
}
.tagContainer:hover{ background-color:#FFFCFC;  }
.tagContainer p{ font-weight: bold; font-size:10px; color:#FA624D; padding:3px;padding-left:6px; padding-bottom: 6px;}

/* -TAG "BUTTONS" - */
/* Clickable buttons for Tags */
/* <a id="tagButton" class="off" href=""> URL </a> */
#tagButton{ 
	display: block;	
	position:relative; float: left;
	border: 1px solid #000000; border-radius:6px;
	margin:2px; margin-left:4px;margin-top:0px;margin-bottom:6px;
	padding:8px; padding-top:4px; padding-bottom:4px;
	background-color:#FAFCFF; 
	text-align:center;
	
	font-size:14px; font-weight:normal; color:#000000;
}
#tagButton:hover{ background-color:#D9E8FF; color: #06347a; cursor:pointer;font-weight:bold; }


/* ADMIN */
/* Tag NOT set to active */
#tagButton.off { 
	background-color:#FFF1F0; border: 1px solid #a31908;
	font-weight:normal; color: #000000; 
}

#tagButton.off:hover{ 
	background-color:#FA624D; 
	color: #FFFFFF; cursor:pointer;font-weight:bold; 
}

/* ADMIN */
/* Tag belongs to the shosen photo/event */
#tagButton.on { 
	background-color:#FA624D; /* ff472e ffe9e6 */
	font-weight:normal; color: #FFFFFF; /* fce4e1 06347a */
}

#tagButton.on:hover{ 
	background-color:#FFF1F0; 
	color: #000000; cursor:pointer;font-weight:bold; 
}

/* -SELECT "BUTTONS" - */
/* Clickable URLs in the Year, Month selections */
.selectButton{ 
	position:relative;
	float: left;
	display: block;
	width: 105px;
	border: 2px solid #000000;
	border-radius:6px;
	margin:0px;margin-right:4px;margin-bottom:4px;
	padding:0px; padding-top:10px; padding-bottom:10px;
	background-color:#FFF7E6;
	font-size:18px;
	text-align:center;
}
.selectButton:hover{ background-color:#ffe6b3; }


/* - CATEGORY MENU- */
/* Container for Category Menu */
.selectCategory{ 
	position:relative;
	float: left;
	display: block;
	width: 210px;
	border: 2px solid #000000;
	border-radius:6px;
	margin:0px;margin-right:6px;margin-bottom:6px;
	padding:3px; padding-top:8px; padding-bottom:8px;
	background-color:#FFFFFF;
	font-size:18px;
	text-align:center;
}
.selectCategory:hover{ background-color:#ffe6b3; }

/* -NAVIGATE "BUTTONS" - */
/* Clickable URLs above all images */
.navigateButton{ 
	display: block; 
	position:relative;
	float: none;
	/* border: 2px solid #FFB31A; */
	border: 2px solid #000000;
	border-radius:6px;
	background-color:#FFF7E6;
	line-height:200%;
	text-align:left;
	padding-bottom:0px; padding-left:12px;
	margin-top:6px;
	margin-bottom:12px;
	font-size:18px;
}
.navigateButton:hover{ background-color:#FFB31A; color:#FFFFFF; border: 2px solid #000000;}


/* -IMAGE "BUTTONS" - */
/* Clickable URLs under images */
.imageButton{ 
	display: block;
	position:relative;
	float: left;
	margin-bottom:6px;
	padding-top:6px; padding-bottom:6px;
	border: 1px solid #000000;
	border-radius:6px;
	background-color:#FFF7E6;
	width: 100%;
	text-align:center;
	font-size: 16px;
}
.imageButton:hover{ background-color:#FFB31A; color:#FFFFFF; }


/* FORMULÄR-SPECIFIKT */
.inputFormBlock {
	position:relative;
	padding:0; margin:0;
	float:left;
	margin-right: 16px;
}


/* CSS SIDINDELANDE BLOCK */
.fullSizeBlock {
	position:relative;
	padding:0; margin:0;
	clear:both;
	width:100%; 
}

.halfSizeBlock {
	position:relative;
	padding:0; margin:0;
	float:left;
	margin-right:10px;
	width:450px;
	/* max-width:450px; */
	/*background:#a54ea3;*/ 
}

.thirdSizeBlock {
	position:relative;
	padding:0; margin:0;
	float:left;
	margin-right: 30px;
	width:285px; 
	/* max-width:285px; */
	/*background:#123ea3;*/ 
}

.twoThirdSizeBlock {
	position:relative;
	padding:0; margin:0;
	float:left;
	margin-right: 30px;
	max-width:605px;	
	/*background:#123123;*/ 
}

@media all and (max-width: 620px) {	

	#searchButton{ float:none; width: 98%; }
	.navbar{ width: 97%; }
	.navButton{ float:none; width: 98%; }
	
	.selectCategory{ width:98%; }
	
	.thumbNailBlock {
		width:100%;
		max-width:100%;
		margin:0 auto;
		margin-top:20px;
	}
	.thumbNailBlock > p{text-align:center;}
	.thumbNailBlock > h4{text-align:center;}
	.thumbNailBlock > h3{text-align:center;}
	.thumbNailBlock > h2{text-align:center;}
	
	
	.fullSizeBlock{margin:0px;}
	.forthSizeBlock{margin:0px;}
	.threeForthSizeBlock {margin:0px;}
}