/**
 * TCY - UNIVERSAL DEFINITIONS *
 * MAIN *
 */

/*	==========================================================================
	Google Web Fonts: collection link:
	http://www.google.com/fonts/#ChoosePlace:select/Collection:Open+Sans:400,700
	========================================================================== */
 
/*	==========================================================================
	Example of property ordering
	========================================================================== */

/*
#overlay {
	-- Positioning --
	float: left;					(left; right; none;)
	clear: both;					(left; right; both; none;)
	position: absolute;				(static; relative; absolute; fixed;)
	z-index: 10;					(1 - X)
	cursor: pointer;				(auto, default, ...)
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	-- Display & Box Model --
	display: block;					(block; inline; inline-block; none; ...)
	overflow: hidden;				(visible; hidden; scroll; auto;)
	box-sizing:	border-box;
	margin: 10px;
	padding: 10px;
	border: 10px solid #333;
	width: 100px;
	height: 100px;

	-- Text and Font --
	font-family: 'Times New Roman', Times, serif;
	font-style; normal;				(normal; italic; oblique;)
	font-weight: normal;			(lighter; normal; bold; bolder; 100; 300; 600; 900;)
	font-size: 12pt;
	text-decoration: none;			(underline; overline; line-through; blink; none;)
	line-height: 20pt;
	color: #fff;					(#000000; rgb(255,255,255); rgb(100%,100%,100%); rgba(255,255,255, .5);}
	text-align: left;				(left; center; right; justify;)
	
	-- Other --
	vertival-align: top;			(top; middle; bottom; baseline; ...)
	list-style:	decimal inside url(image.gif);
	background:	url(image.gif) no-repeat top left #000000;
	background-image: url(image.gif);
	background-repeat: no-repeat;
	background-position: top left;
	background-color: #000000;
	background-attachment: scroll;	(fixed;)
}
*/


/*	==========================================================================
	Main definitions
	========================================================================== */

/*	INFO: its allowed to put 1style definitions in 1 line */
html {
	width: 100%; height: 100%; background-color: #303030;
}

div, span, a, hr, ul, li, h1, h2, h3, h4, form, fieldset, input, label {
	margin: 0;
	padding: 0;
}


/*	Prepare the body for centering first div */
body {
	width: 100%;
	xheight: 100%;
	margin: 0;
	padding: 0;
	/*	main font */
	font-family: 'Open Sans', sans-serif, helvetica, verdana, helvetica, tahoma, arial, sans-serif;
	/*	font-family:				'Georgia', Georgia, times, serif;*/
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	color: #a1a1a1;
	/* OFF: only for testing
	background-color: #303030;
	background: url(../images/_dummy_backgr.jpg) no-repeat center;
	background-attachment: fixed;
	*/
}

a {
	cursor: pointer;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
}
a:link, a:visited, a:active	{text-decoration: none;}
a:focus, a:hover			{text-decoration: none; color: #4da8d7;}


/*	==========================================================================
	MAIN AREA
	========================================================================== */

body {
	border-top: 8px solid #009ee3;
}

/*	main column for separating the vertical areas */
div.main_col {
	display: inline-block;
	width: 100%;
	min-width: 640px;
}


/*	==========================================================================
	TCY_ LOGO BOXES
	========================================================================== */

/*	layout box */
div.box {
	float: left;
	width: 260px;
	height: 140px;
	margin: 10px;
	padding: 10px;
}
div.column {
	float: left;
	width: 260px;
	margin: 10px;
	padding: 10px;
}
div.row {
	clear: both;
}
div.double {
	width: 520px;
}
/*	box version for the logo */
div.box._logo {
	float: right;
	background: url(../images/TCY.png) no-repeat right top;
	margin: 35px 20px 0px 0px;
	width: 250px;
	height: 125px;
}

/*	==========================================================================
	BOX LISTS
	========================================================================== */

ol {
	margin: 0 0 0 0px;
	padding: 0;
	list-style: none;
	}
	/*	layout box */
	li.box {
		position: relative;
		display: block;
		float: left;
		width: 280px;
		height: 160px;
		margin: 10px;
		-webkit-perspective: 800;
		-moz-perspective: 800;
		-ms-perspective: 800;
		-o-perspective: 800;
		perspective: 800;
		}
		ol > li.box > div {
			width: 280px;
			height: 160px;
			font-weight: normal;
			font-size: 18px;
			line-height: 28px;
		}
		ol > li.box > div.revolve {
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;

			-webkit-transition: all 0.5s linear;
			-moz-transition: all 0.5s linear;
			-ms-transition: all 0.5s linear;
			-o-transition: all 0.5s linear;
			transition: all 0.5s linear;
		}
		ol > li.box:hover > div.revolve {
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			-ms-transform: rotateY(180deg);
			-o-transform: rotateY(180deg);
			transform: rotateY(180deg);
			}
			ol > li.box > div.revolve > div {
					position: absolute;
					width: 280px;
					height: 160px;
					-webkit-backface-visibility: hidden;
					-moz-backface-visibility: hidden;
					-ms-backface-visibility: hidden;
					-o-backface-visibility: hidden;
					backface-visibility: hidden;
			}
			ol > li.box > div.revolve > div:last-child {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				-o-transform: rotateY(180deg);
				transform: rotateY(180deg);
				background-color:#ffffff;
			}	
			ol.no3d > li > div {
				position: relative;
				overflow: hidden;
			}

			ol.no3d li > div > div:last-child {
				left: 320px;
			}

			ol.touch > li:hover > div {
				-webkit-transform: none;
				-moz-transform: none;
				-ms-transform: none;
				-o-transform: none;
				transform: none;
			}

			ol.touch > li.active > div {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				-o-transform: rotateY(180deg);
				transform: rotateY(180deg);			
			}

/*	box style for top/text */
#top div.content > div {
	padding: 10px;
	width: 260px;
	height: 140px;
}


/*	text decorations */
li.box span._bold {
	font-weight: bold;
}
li.box span._cyan {
	color: #009ee3;
}
li.box span._col {
	display: inline-block;
	width: 30px;
}


/*	==========================================================================
	BOX BRANDS
	========================================================================== */

/*	prepare the brands */
li.box._brands > div.revolve > div {
	background-position: -20px -20px;
	background-repeat: no-repeat;
}
li.box._brands > div.revolve > div:last-child {
	background-position: -340px -20px;
}

/*	define images source per class */
li.box._brands._AGO > div.revolve > div {background-image: url(../images/brands/AGO.png);}
li.box._brands._AIR > div.revolve > div {background-image: url(../images/brands/AIR.png);}
li.box._brands._AWO > div.revolve > div {background-image: url(../images/brands/AWO.png);}
li.box._brands._BJG > div.revolve > div {background-image: url(../images/brands/BJG.png);}
li.box._brands._BMW > div.revolve > div {background-image: url(../images/brands/BMW.png);}
li.box._brands._CDF > div.revolve > div {background-image: url(../images/brands/CDF.png);}
li.box._brands._DBB > div.revolve > div {background-image: url(../images/brands/DBB.png);}
li.box._brands._DFJ > div.revolve > div {background-image: url(../images/brands/DFJ.png);}
li.box._brands._DFS > div.revolve > div {background-image: url(../images/brands/DFS.png);}
li.box._brands._DUH > div.revolve > div {background-image: url(../images/brands/DUH.png);}
li.box._brands._EVK > div.revolve > div {background-image: url(../images/brands/EVK.png);}
li.box._brands._FUH > div.revolve > div {background-image: url(../images/brands/FUH.png);}
li.box._brands._IGN > div.revolve > div {background-image: url(../images/brands/IGN.png);}
li.box._brands._KSB > div.revolve > div {background-image: url(../images/brands/KSB.png);}
li.box._brands._LWL > div.revolve > div {background-image: url(../images/brands/LWL.png);}
li.box._brands._OBL > div.revolve > div {background-image: url(../images/brands/OBL.png);}
li.box._brands._PNC > div.revolve > div {background-image: url(../images/brands/PNC.png);}
li.box._brands._RVU > div.revolve > div {background-image: url(../images/brands/RVU.png);}
li.box._brands._SAF > div.revolve > div {background-image: url(../images/brands/SAF.png);}
li.box._brands._SIG > div.revolve > div {background-image: url(../images/brands/SIG.png);}
li.box._brands._STO > div.revolve > div {background-image: url(../images/brands/STO.png);}
li.box._brands._TER > div.revolve > div {background-image: url(../images/brands/TER.png);}
li.box._brands._TNA > div.revolve > div {background-image: url(../images/brands/TNA.png);}
li.box._brands._WEM > div.revolve > div {background-image: url(../images/brands/WEM.png);}
li.box._brands._WMK > div.revolve > div {background-image: url(../images/brands/WMK.png);}


/*	==========================================================================
	CONTACT
	========================================================================== */
.contact a {
	color: #a1a1a1;
	text-decoration: none;	
}
.contact a:hover .email {
	color: #009ee3;
}

.imprint .content { display: none; }
.imprint .close_link { display: none; }
.imprint.open .close_link {display: block; }
.imprint.open .open_link {display: none; }
.imprint.open {
	background: #222;
}

.imprint a { color: #fff; }
.imprint .toggle {
	font-weight: normal;
	font-size: 18px;
	color: #A1A1A1;
}
.imprint .toggle:hover, 
.imprint .toggle:active {
	color: #009ee3;
}


address { font-style: normal }