@charset "UTF-8";

/* ---- */
/* Base */
/* ---- */

html,
body {
  height:  100%;
  margin:  0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
} 

body {
  top:         0;
  bottom:      50px;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}

/* Reset */
p, h1, h2, h3, ul {
  margin:   0;
  padding:  0;
}

.wrap {
  min-height:  100%;
  position:    relative;
}
.wrap:before,
.wrap:after {
  content:  " ";       /* Clearfix */
  display:  table;
}
.wrap:after {
  clear:    both;
}

/* ------ */
/* Layout */
/* ------ */

.header {
	z-index: -1; 
	width: 100%; 
	height: 80px; 
	background-color: #DC9018;
}

.logo {
  padding-left: 20px;
  padding-top: 10px;
}

.footer { 
	height: 49px;
	width: 100%;
	bottom: 0;
	/*margin-left: 50px;
	margin-right: 50px;*/
	position: absolute;
	border-top-style:solid;
	border-top-color:#999999;
	border-top-width:1px;
}

.footer p {
	font-size: 9pt;
	color:#999999;
	text-align: center;
}

.main {
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 70px; 
}


/* ------ */
/* Module */
/* ------ */

.breadcrumbs {
  display: block;
  font-size:  10pt;
  font-weight: bold;
  color: #999999;
  padding: 0px;
}

.horiz-list {
  margin: 0;
}

.h-list-item {
  display: inline-block;
  padding: 8px;
  width: 300px;
}

.summary {
  padding-left: 25px;
  cursor:       pointer;
  position:     relative;
}
.summary:before {
  width: 20px;
  height: 100%;
  content: "";
  position: absolute;
  left: 5px;
  background-image: url("../images/arrow.png");
  background-position: 0px 0.9em;
  background-repeat: no-repeat;
  
  -webkit-transform: rotate(0deg); 
  -webkit-transform-origin: 6px 24px;
  -moz-transform: rotate(0deg);
  -moz-transform-origin: 6px 24px;
  -o-transform: rotate(0deg);
  -o-transform-origin: 6px 24px;
  -ms-transform: rotate(0deg);
  -ms-transform-origin: 6px 24px;
  transform:rotate(0deg);
  transform-origin: 6px 24px;

  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -moz-transform 0.4s ease;
  -ms-transition: -moz-transform 0.4s ease;
  transition: transform 0.4s ease;
}

.details {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease 0.1s;
  -moz-transition: max-height 0.4s ease 0.1s;
  -o-transition: max-height 0.4s ease 0.1s;
  -ms-transition: max-height 0.4s ease 0.1s;
  transition: max-height 0.4s ease 0.1s;
}


/* ----- */
/* State */
/* ----- */

.disclosure[role="shown"] .summary:before {
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform:rotate(90deg);
}

.disclosure[role="shown"] .details {
  max-height: none;
}


/* ----- */
/* Theme */
/* ----- */

/*
The base category includes core element styles, covering the general defaults. 
The layout category then identifies the sizing and grid styles of different elements, determining their layout. 
Module styles are more specific styles targeting individual parts of the page, such as navigation or feature styles. 
The state styles are then used to augment or override other styles in the event that a module includes an alternate state, an active tab for example. 
Lastly, the theme category may be added which could include styles based around the skin, or look and feel, of different modules.

*/

p  { 
	font-size: 10pt; 
	padding: 6px 0px;
	margin: 0;
}

h1 {
	color: #999999;
	font-weight: bold;
	padding: 12px 0px;
}

h2 {
	color: #999999;
	font-weight: bold;
	margin: 12px 0px;
	background-color: #eeeeee;
}

h3 {
	color: #999999;
	font-weight: bold;
	padding: 12px 0px 0px 0px;
}

a {
	text-decoration: none;
}
a:link {color:#999999}      /* unvisited link */
a:visited {	color:#666666}  /* visited link */
a:hover {color:#666666}     /* mouse over link */
a:active {color:#000000}    /* selected link */


ul {
	list-style-type: disc;
	margin-left: 2em;
}

li p {
	padding: 0px;
}

img {
	border-style: none;
}

.endnote {
  color: #999999;
  text-align: right;
}

.thumbnails {
  margin: 10px;
  padding: 4px;
  border: 1px solid #666666;
  border-radius:  3pt;
}
.thumbnails:hover {
  background:  #999999;
}

.linknails {
  margin-left: 20%;
  margin-top: 16px;
  margin-top: 4px;
  margin-top: 4px;

  padding: 4px;
  border-radius:  3pt;
  cursor: pointer;
}
.linknails:hover {
  /*background:  #999999;*/
  padding: 1px;
  border: 3px solid #999999;
}

.columns-container { 
  margin-bottom: 1em;
}

.left-column, .right-column {
  /*border: 1px solid  #ccc; */
  /*padding: 1.25em;*/ 
  margin-bottom: .5em;
}

.float-right {
  margin-left: 1em;
  margin-bottom: 1em;
  float: right;
}


/* MEDIA QUERIES */
@media screen and (min-width: 340px ) {

  .header:after {
    content: url("../images/kanin_liten.png");
    position: absolute;
    right: 0;
  }
  
  .header-clicker {
    position: absolute;
    top:    122px;
    right:  23px;
    width:  30px;
    height: 20px;
    /*border: 1pt solid red;*/
    cursor: pointer;
  }
  
  .main {
    padding-top: 20px;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 70px;
  }
}

@media screen and (min-width: 640px ) {

  .header-stor {
    height: 160px; 
  }

  .header-stor:after {
    content: url("../images/kanin_stor.png");
  }
  
  .header-clicker-stor {
    top:    244px;
    right:  45px;
    width:  58px;
    height: 38px;
  }

  .main-stor { 
    padding-top: 40px;
    padding-left: 140px;
    padding-right: 140px;
    padding-bottom: 70px; 
  }
  
  .breadcrumbs {
    display: inline;
    font-size: 1em;
    padding: 12px 0px;
  }

}

@media screen and (min-width: 900px ) {

  .left-column,
  .right-column { 
    width: 49%;
    margin-bottom: 0em;
	float: left;
  }

  .left-column {
    padding-right: 2%;
    border-right: 1px solid  #ccc;
  }
  .right-column { 
    padding-left: 2%;
  }   
}

/* Editing...
div.hidden {
	display: block;
}

div.shown {
	display: none;
}
*/