/* ------------------------------------------------------------------------------------------------------------- */
/*   Setting box model to something easier to work with. Works in IE8 and above - if your site must work
/*   in IE7 and below you should remove this for better consistency.
/* ------------------------------------------------------------------------------------------------------------- */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}





/* ------------------------------------------ */
/* FONT */
/* ------------------------------------------ */
@font-face {
  font-family: 'open_sanslight';
  src: url('font/OpenSans-Light-webfont.eot');
  src: url('font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/OpenSans-Light-webfont.woff') format('woff'),
       url('font/OpenSans-Light-webfont.ttf') format('truetype'),
       url('font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
  font-weight: normal;
  font-style: normal;
}





/* ------------------------------------------ */
/* LOADING */
/* ------------------------------------------ */
#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: 99;
  text-align: center;
  display: none;
}

#loading-image {
  position: absolute;
  top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -15px;
  z-index: 100;
  padding: 15px;
  border-radius: 3px;
  background: #fff;
  opacity: 0.8;
}

#wrapper {
	/*display: none;*/
}





/* ------------------------------------------ */
/* GENERAL STYLING */
/* ------------------------------------------ */
html {
	width: 940px;
	background: #5591cf;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

body {
	font-family: 'open_sanslight';
	width: 940px;
}

* {
	margin: 0px;
}

a {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

p {
	margin-top: 20px;
	line-height: 20px;
}

.logo {
	width: 19%;
}

h1.title {
	width: 60%;
	text-align: center;
	font-size: 22px!important;
	font-weight: normal;
	color: #ffffff;
}

.menu {
	width: 21%;
	text-align: right;
}

.pull-left {float: left;}
.pull-right {float: right;}

#slider {
	float: left;
	width: 940px;
	height: 705px;
	overflow: hidden;
	position: relative;
}

.zoomed {
	width: 1880px!important;
}

.bg,
.changer,
.airy,
.airyChanger {
	position: absolute;
	right: 0px;
	width: 940px;
}

.airy.inactive {
	display: none;
}

.bg {
	z-index: 0;
	display: none;
}

.bg.active {
	display: block;
}

.airy {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 20;
}

.changer,
.airyChanger {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: -10;
}

.airyChanger {
	display: none;
}

#movieTime {
	display: none;
}

.aligner {
	display: inline-block;
	vertical-align: middle;
}

.divider {
	height: 40px;
	margin: 0px 15px;
	width: 2px;
	background: #fff;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}






/* ------------------------------------------ */
/* HEADER / FOOTER */
/* ------------------------------------------ */
.aligner {
	height: 100%;
}

.top,
.bottom {
	float: left;
	overflow: hidden;
	position: relative;
	font-size: 0px;
	width: 940px;
	z-index: 10;
	background: #5591cf;
	height: 60px;
	padding: 0px 10px;
}

.top {
	top: 0px;
	border-bottom: 2px solid #fff;
}

.bottom {
	bottom: 0px;
	border-top: 2px solid #fff;
}

.top *,
.bottom * {
	display: inline-block;
	vertical-align: middle;
}

.room.active:before {
	content: "";
	background: url('../images/active_arrows.png') no-repeat center 0;
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: -21px;
}

.shape.active:before {
	content: "";
	background: url('../images/active_arrows.png') no-repeat center 0;
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: -19px;
}

.color.active:before {
	content: "";
	background: url('../images/active_arrows.png') no-repeat center 0;
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: -25px;
	left: 0px;
}





/* ------------------------------------------ */
/* MENU-TOP-RIGHT/BUTTONS */
/* ------------------------------------------ */
.btn {

}

.btn.info {

}

.btn.movie {

}

.btn.zoom-in {

}

.btn.zoom-out {
	display: none;
}





/* ------------------------------------------ */
/* ROOMS */
/* ------------------------------------------ */
.room-wrap {
	text-align: left;
	width: 26%;
	height: 39px;
}

.room {
	position: relative;
	border: 2px solid #fff;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	margin-left: 10px;
}

.room:first-child {
	margin-left: 0px;
}

.divider + .room {
	margin-left: 0px;
}





/* ------------------------------------------ */
/* SHAPES */
/* ------------------------------------------ */
.shape-wrap {
	text-align: center;
	width: 29%;
	line-height: 36px;
}

.shape {
	position: relative;
	margin-left: 7px;
}

.shape:first-child {
	margin-left: 0px;
}

.divider + .shape {
	margin-left: 0px;
}

.shape img {
	height: 26px;
}





/* ------------------------------------------ */
/* COLORS */
/* ------------------------------------------ */
.color-wrap img {
	/*margin-right: 10px;*/
}

.color-wrap {
	text-align: right;
	width: 45%;
	height: 60px;
	line-height: 60px;
}

.color {
	position: relative;
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	border-radius: 3px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	margin-left: 7px;
}

.color[data-color="white"]			{ background: #ffffff; }
.color[data-color="black"]			{ background: #231f20; }
.color[data-color="red"]			{ background: #ee1c25; }
.color[data-color="orange"]			{ background: #f58221; }
.color[data-color="yellow"]			{ background: #ffcb06; }
.color[data-color="green"]			{ background: #20b14a; }
.color[data-color="lightblue"]		{ background: #00adee; }
.color[data-color="darkblue"]		{ background: #0c4694; }
.color[data-color="rostfritt"]		{ background: url('../images/icon_rostfritt.png'); }
.color[data-color="kakel"]			{ background: url('../images/icon_kakel.png'); }
.color[data-color="mosaic"]			{ background: url('../images/icon_mosaic.png'); }
.color[data-color="tapet"]			{ background: url('../images/icon_tapet.png'); }
.color[data-color="wall"]			{ background: url('../images/icon_wallcolor.png'); }