/* *** ===================================================================================================== *** */
/*													GLOBAL OBJECTS
/* *** ===================================================================================================== *** */
/* ---------------------------------------------------------------------------------------- */
/*										Font faces
/* ---------------------------------------------------------------------------------------- */
@font-face {
	font-family: 'Magistral';
    src: url('../fonts/magistral_bold.eot');
    src: url('../fonts/magistral_bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/magistral_bold.woff') format('woff'),
         url('../fonts/magistral_bold.ttf') format('truetype'),
         url('../fonts/magistral_bold.svg#MagistralBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ---------------------------------------------------------------------------------------- */
/*										Variables
/* ---------------------------------------------------------------------------------------- */
@link: #00a2e5;
@link-over: #1c6aba;
@fcolor-dark: #333333;
@fcolor-light: lighten(@fcolor-dark, 22%);
@fcolor-red: #ae2121;

@font1: Segoe UI, sans-serif;
@hFont1: Magistral, Segoe UI, sans-serif;
@hFont2: Segoe UI Light, Segoe UI, sans-serif;

@fontSize: 13px;
@hFontSize: 1.4em;
@lineHeight: 1.55em;


@siteWidth: 884px;
@sideWrap: 262px;
@contentWrap: 622px;

/* ---------------------------------------------------------------------------------------- */
/*										Mixins
/* ---------------------------------------------------------------------------------------- */
.border-radius (@radius: 6px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
.transition (@range: all, @time: .1s, @ease: ease-out) {
	-webkit-transition: @range @time @ease;
	-moz-transition: @range @time @ease;
	-o-transition: @range @time @ease;
	transition: @range @time @ease;
}
.box-shadow () {
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}
.opacity (@alpha){
	filter: ~`"alpha(opacity="+ ("@{alpha}"*100) +")"`;
	-khtml-opacity: @alpha;
	-moz-opacity: @alpha;
	opacity: @alpha;
}
.vgrad (@top, @bottom) {
	background: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)) repeat-x;
	background: -webkit-linear-gradient(top, @top, @bottom) repeat-x;
	background:    -moz-linear-gradient(top, @top, @bottom) repeat-x;
	background:     -ms-linear-gradient(top, @top, @bottom) repeat-x;
	background:      -o-linear-gradient(top, @top, @bottom) repeat-x;
	background:         linear-gradient(top, @top, @bottom) repeat-x;
		filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='@{top}', EndColorStr='@{bottom}')";
}
.darker-bg {
	background: url(../images/bg-light2.jpg);
	border: 1px solid #e2e2e2;
	.box-shadow(0, 1px, 0, #fff, inset);
}
.footer-font-dark {
	color: #171412;
	text-shadow: 1px 1px 0 #8b8986;
}
.footer-font-light {
	color: #fff;
	text-shadow: 1px 1px 0 #5c5a56;
}

/* ---------------------------------------------------------------------------------------- */
/*										Reset, Misc settings
/* ---------------------------------------------------------------------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { margin: 0; padding: 0; }
table, td { border: 0; border-spacing: 0; font: inherit; padding: 20; }
a { text-decoration: none; }
a img { border: 0px; }
a, button, input, select { outline: none; }
nav ul, nav ol, nav li { margin: 0; padding: 0; list-style: none; }
/* clear, clearfix */
.clrfx:before, .clrfx:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clrfx:after { clear: both; }
.clrfx { zoom: 1; }
.clr { clear: both }
/* text selection */
::-webkit-selection { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 1); text-shadow: none; }
::-moz-selection { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 1); text-shadow: none; }
::selection { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 1); text-shadow: none; }

.fred { color: @fcolor-red; }



/* ---------------------------------------------------------------------------------------- */
/*										Inputs
/* ---------------------------------------------------------------------------------------- */
input[type=button], input[type=submit], .button {
	border: 1px solid #fff; padding: 3px 13px;
	cursor: pointer;
	color: #fff;
	.vgrad(#234661, #1f3f57); background-color: #234661;
	.box-shadow(0, 0, 3px, rgba(0, 0, 0, 0.3));
	.transition;
}
input[type=button]:hover, input[type=submit]:hover, .button:hover {
	background-color: #265a81;
	background-position: 0 50px;
}
/* ---------------------------------------------------------------------------------------- */
/*										Defaults
/* ---------------------------------------------------------------------------------------- */
body {
	background: #00529f;
	font: normal @fontSize @font1;
	line-height: @lineHeight; color: @fcolor-dark;
}
a { color: @link; .transition;
	&:hover { color: @link-over; }
}
h1, h2, h3, h4, h5, h6 { font: normal @hFontSize @hFont1; margin: 0.4em 0;
	a { color: inherit; }
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }
h1 { color: #00529F; border-bottom: 1px solid #ddd; }
h2 { font-size: @hFontSize * 0.92; color: #00A2E5; border-bottom: 1px solid #ddd; }
h3 { font-size: @hFontSize * 0.84; }
h4 { font-size: @hFontSize * 0.78; }
h5 { font-size: @hFontSize * 0.72; }
h6 { font-size: @hFontSize * 0.66; }

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
	font-family: @font1; font-weight: bold; .footer-font-dark;
}
.navlink {
	font-size: 0.9em; font-style: italic;
}
p:first-child {	margin-top: 0; }
hr {
	border: 0; margin: 0; padding: 0; height: 0;
	border-top: 1px solid #e0e0e0; border-bottom: 1px solid #fff;
}
#footer hr {
	border-top-color: #5e5a55; border-bottom-color: #8d8a84;
}

/* *** ===================================================================================================== *** */
/*													Layout
/* *** ===================================================================================================== *** */
#container { background: url(../images/bg-y.png) repeat-y center top; }
.bgwrap { padding-top: 345px; background: url(../images/bg.png) no-repeat center top; }
.wrapper { width: @siteWidth; margin: 0 auto; position: relative; }
.side { width: @sideWrap; float: left; }
.content { width: 590px; float: right; padding: 10px 17px 20px 0; }

#header { position: absolute; top: 45px; width: 100%; height: 300px; }
#header .wrapper { height: 300px; }
#header .wrapper:before, #header .wrapper:after {
	position: absolute; top: 55px; left: 0; z-index: 100;
	display: block; width: 883px; height: 4px;
	content: " "; background: url(../images/header-shadow.png) no-repeat left top;
}
#header .wrapper:after {
	top: auto; bottom: 0;
	background-position: left bottom;
}

#main { min-height: 300px; padding-bottom: 10px; }

#footer { min-height: 100px; font-size: 0.9em; background: url(../images/footerbg.png) no-repeat center top; }

/* ----------------- Grids ------------------ */
.grid { float: left; }
.grid.g2 { width: 46%; margin: 0 2%; }
.grid.g3 { width: 29.33%; margin: 0 2%; } .grid.g3.sp2 { width: 62.66%; }
.grid.g4 { width: 21%; margin: 0 2%; } .grid.g4.sp2 { width: 46% } .grid.g4.sp3 { width: 71% }
.grid.alpha { clear: left; margin-left: 0; }
.grid.omega { margin-right: 0 }

/* *** ===================================================================================================== *** */
/*													Header, Side, Footer Modules
/* *** ===================================================================================================== *** */


/* ----------------- Top ------------------ */
#logo { position: absolute; top: 7px; left: 5px; display: block; }
#logo:hover { .opacity(0.7); }
#logo img { display: block; }

.subtitle {
	position: absolute; left: 280px; top: 15px;
	font: normal 1.3em @hFont1; color: #fff;
}
#languages {
	position: absolute; top: 16px; right: 10px;
	display: block; height: 20px;
	margin: 0; padding: 0; list-style: none;
	color: #fff; font-size: 0.8em; line-height: 20px;
	
	li { float:left; padding: 0 4px; display: block; 
		a {
			img { vertical-align: bottom; padding: 1px; border: 1px solid #fff; }
			&:hover, &.active {
				.opacity(0.5);
			}
		}
	}
}

/* ----------------- Header Login ------------------ */
#loginbox {
	position: absolute; top: 14px; left: 500px;
	cursor: pointer;
	.label {
		height: 18px;
		padding: 4px 30px 4px 20px; position: relative; z-index:1001;
		font: normal 0.9em/18px @font1; color: #fff;
		border: 1px solid #42baec;
		.border-radius(2px);
		.transition;
		
		&:after {
			content: " ";
			position: absolute; right: 6px; top: 50%; margin-top: -6px;
			display: block; width: 12px; height: 12px;
			border: 1px solid #6fcef6;
			.border-radius(10px);
			.transition;
		}
		&:before {
			content: " ";
			position: absolute; right: 9px; top: 50%; margin-top: -1px;
			display: block; width: 0; height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 5px solid #6fcef6;
			.transition;
		}
		&:hover, &.opened {
			background: #80d5f8;
			border-color: #fff;
			color: #076992;
			&:after {
				border-color: #ddf5ff;
			}
			&:before {
				border-top-color: #ddf5ff;
			}
		}
		&.opened {
			border-bottom: 0px;
		}
	}
	
	.box {
		position: absolute; z-index: 1000; top: 25px;
		display: none;
		width: 220px; padding: 6px 10px;
		background: #80d5f8; border: 1px solid #fff;
		.border-radius(2px);

		.help {
			font-size: 0.86em;
		}
		.text {
			padding: 5px 8px;
			margin: 5px 0;
			width: 200px;
			border: 1px solid #75c9eb;
			.border-radius(2px);
			.box-shadow(0, 1px, 7px, rgba(0,0,0,0.2), inset);
			font-size: 0.85em;
			.transition;
			
			&:focus {
				border-color: #3fa5ce;
			}
		}
	}
}


/* ----------------- Header Contact ------------------ */
#header-contact {
	position: absolute; top: 55px; width: @sideWrap;
	color: #fff;
	.map {
		display: block; margin: 14px auto;
	}
	.contact {
		margin: 0 30px;
		font: normal 1em @hFont1;
	}
}

/* ----------------- Header Slideshow ------------------ */
#slideshow {
	position: absolute; top: 55px; left: 262px;
	display: block; width: 661px; height: 245px;
	overflow: hidden;
}
#slideshow img { position: absolute; top: 0px; left: 0px; z-index: 1; display: block; }
#slideshow img.act { z-index: 2; }
#slideshow img.next { z-index: 3; }



/* ----------------- Pagenav ------------------ */
#pagenav {
	position: relative;
	padding: 10px 35px 20px; margin: 0 0 20px;
	background: #101927;
}
#pagenav li { display: block }
#pagenav a {
	position: relative;
	display: block; padding: 0 4px;
	border-bottom: 1px solid #20314d;
	color: #fff;
	background: url(../images/arrows.png) no-repeat -10px -38px;
	font: normal 13px/24px @hFont1;
	&:hover {
		color: #0f2234; padding-left: 14px;
		background-color: #00a2e5;
		background-position: 2px -38px;
	}
}

/* ----------------- ISO ------------------ */

#isologo {
	margin: 10px auto;
	width: 202px; height: 56px;
	background: url(../images/iso.png) no-repeat left top;
}
#isologo:hover {
	background-position: left bottom;
}

/* ----------------- Footnav ------------------ */
#footnav {
	float: right; padding: 5px 5px;
	color: #fff;
	font: normal 11px/22px Tahoma, Geneva, sans-serif;
	li { float: left;
		a { color: #fff; padding: 0 7px; border-left: 1px solid #12749c;
			&:hover {
				color: #08384c;
			}
		}
		&:first-child a {
			border-left: 0px;
		}
	}
}

/* *** ===================================================================================================== *** */
/*													CONTENT
/* *** ===================================================================================================== *** */
.even {
	.darker-bg;
}
.box .even { border-left: 0; border-right: 0; }
.label { font-style: italic; }
.data { font-weight: bold; }

.content img.stylize {
	padding: 2px; border: 2px solid #DCDCDC; margin: 0 10px;
}
.content ul {
	padding: 0; list-style: none;
	li {
		padding-left: 20px; position: relative;
		&:before {
			content: " "; position: absolute; left: 2px; top: 0.5em;
			display: block; width: 10px; height: 10px;
			background: url(../images/arrows.png) no-repeat 0px -5px;
		}
		&:hover:before {
			background-position: 0px -25px;
		}
	}
}
/* ----------------- Datalist ------------------ */
.datalist { margin: 0; padding: 0; list-style: none; display: block; vertical-align: top; }
.datalist li { display: block; padding: 2px 10px; }
.datalist li:after { content: ' '; display: block; clear: both; height: 0; }
.datalist .label, .datalist .data { display: inline-block; }
.datalist .label {
	width: 22%; margin-right: 4%; text-align: right; vertical-align: top;
}
.datalist .data {
	width: 70%; vertical-align: top;
}
.datalist .hint {
	position: relative; top: -6px; display: block;
	font: italic 0.9em @font1; color: @fcolor-light;
}
.sidewrap .datalist .label { display: block; width: auto; text-align: left; padding-right: 0; }
.sidewrap .datalist .data { display: block; padding-left: 20px; width: auto; }

/* ----------------- Dataform ------------------ */
.dataform .label {
	font: normal 13px @hFont2; text-align: left;
}
.dataform .data { font-weight: normal; position: relative; z-index: 10; }
.dataform .data.using { z-index: 100; }
.dataform .data.empty .keys {
	font-style: italic; color: @fcolor-light;
}
.dataform .add {
	display: inline-block; width: 16px; height: 16px;
	position: relative; top: 2px;
	background: url(../images/icons/round_plus.png);
	opacity: (0);
	.transition;
}
.dataform .data.empty .add, .dataform .data.using .add, .dataform li:hover .data .add {
	opacity: (0.5);
}
.dataform li:hover .add:hover {
	opacity: (0.8);
}
.dataform .options.format {
	position: absolute;
	display: block; width: 300px;
	padding: 4px 8px;
	background: url(../images/bg-light.jpg);
	.box-shadow(0, 0, 4px, rgba(0,0,0,0.3));
}
.dataform .options.format label {
	width: 96px; float: left; border: 1px solid transparent;
	margin: 1px;
}
.dataform .options.format label:hover, .dataform .options.format label.selected {
	.darker-bg;
}
.sidewrap .datalist.dataform .label { display: inline-block; }
.sidewrap .datalist.dataform .data { clear: both; }
.sidewrap .datalist.dataform .data.empty { display: inline-block; padding: 0; clear: none; }

/* ----------------- Box ------------------ */
.box {
	position: relative;
	
}
.box > h1, .box > h2, .box > h3, .box > h4, .box > h5, .box > h6 {
	
}
.box > h1, .box > h2 {  }

.box.darker {  }

/*
.boxmenu .dropdown {
	display: inline-block; vertical-align: top;
	margin: 0; padding: 0 3px; list-style: none;
	height: 20px; overflow: hidden;
	color: darken(@fcolor-light, 14%);
}
*/



/* ---------------------------------------------------------------------------------------- */
/*										Showroom
/* ---------------------------------------------------------------------------------------- */
.showroom {
	display: none; margin-bottom: 20px; position: relative;
	width: 400px; padding-left: 150px;
}
.showroom .thumbFrame {
	position: absolute; z-index: 10;
	top: 0; bottom: 0; left: 0px;
	width: 140px; height: 100%;
}
.showroom .slideNav {
	position: absolute;
	top: 0px; left: 55px;
	width: 0px; height: 0px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 6px solid #BA4E3D;
	.opacity(0.6);
}
.showroom .scrollNext {
	top: auto;
	bottom: 0px;
	border-bottom: 0px;
	border-top: 6px solid #BA4E3D;
}
.showroom .slideNav:hover { .opacity(0.9); }
.showroom .thumbClip {
	position: absolute;
	top: 12px; bottom: 12px;
	left: 0px; right: 0px;
	overflow: hidden;
}
.showroom .thumbSlide {
	white-space: nowrap; font-size: 0; line-height: 0;
}
.showroom .thumbSlide a {
	position: relative;
	display: block; margin: 2px; margin-bottom: 6px;
	.opacity(0.5);
}
.showroom .thumbSlide a:hover { .opacity(0.8); }
.showroom .thumbSlide a.active { .opacity(1); }
.showroom .thumbSlide a.active:after {
	content: " ";
	position: absolute; z-index: 1;
	top: 20%; left: 80%;
	display: none; width: 100%; height: 60%;
	.darker-bg;
}
.showroom .thumbSlide a img {
	position: relative; z-index: 2;
	display: block;
	max-width: 120px; padding: 4px;
	background: #fff;
	.box-shadow(0, 0, 2px, rgba(0, 0, 0, 0.3));
}
.showroom .showFrame {
	width: 400px; height: 220px; z-index: 20;
	position: relative; text-align: center;
	/*.darker-bg;*/
}
.showroom .showFrame img {
	.box-shadow(0, 0, 2px, rgba(0, 0, 0, 0.3));
	margin: 0px 0;
	border: 5px solid #fff;
	display: none;
	max-width: 380px; max-height: 210px;
}


/* ---------------------------------------------------------------------------------------- */
/*										List
/* ---------------------------------------------------------------------------------------- */

.list {
	.item {
		padding: 10px 20px;
		
		.image { width: 15%; display: block; float:left;
			
			img {
				max-width: 90px; padding: 4px; background: #fff;
				.box-shadow(0, 0, 2px, rgba(0, 0, 0, 0.3));
			}
		}
		
		.info { width: 83%; float: right;
			
			.name { margin-top: 0; font-size: 1em; }
			
			.datalist { width: 40%; float: left;
				
				li { padding: 0;
					
					.label { width: auto; padding: 0; margin-right: 6px; }
					.data { width: auto; }
				}
			}
			.desc { width: 58%; height: 3.2em; float: right; overflow: hidden; }
		}
	}
}

/* ---------------------------------------------------------------------------------------- */
/*										Search Box
/* ---------------------------------------------------------------------------------------- */
.box.search {
}
.box.search .buttons {
	border-top: 1px solid #ddd;
	.box-shadow(0, 1px, 0 #fff, inset);
	margin: 10px 10px 0;
	padding: 6px 20px 0;
	text-align: right;
}