/**
 * Stylesheet Framework for Contao Open Source CMS
 * Copyright © 2011-2012 Dominik Raubuch
 *
 * CSS-Layout for Contao Open Source CMS.
 *
 * @copyright	Copyright © 2011-2012 Dominik Raubuch
 * @author		Dominik Raubuch <http://www.raubuch.net>
 * @package		styles
 * @version		1.1
 */

@media all
{
	/*
	 * classes
	 */
	.ce_mk_ruxlayouts {
		height: 705px;
		width: 960px;
	}
	/* sbox and related child elements */
	.sbox {
		width: 215px;
		height: 215px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;
	}
	.sbox img.obenbild, .sy img.obenbild, .sylong img.obenbild{
		width: 215px;
		height: 130px;
	}
	.sbox img.linkbild, .sy img.linkbild, .sylong img.linkbild{
		max-width: 199px;
		max-height: 77px;
	}
	/* sy - vertically longer box and related child elements */
	.sy {
		float: left;
		width: 215px;
		height: 450px;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;		
	}
	/* sy - vertically longer box and related child elements */
	.sylong {
		float: left;
		width: 215px;
		height: 685px;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;		
	}	
	/* xlbox biggest box 3x3 */
	.xlbox {
		float: left;
		width: 685px;
		height: 685px;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;				
	}
	/* lbox - longest box, width of two sboxes */
	.lbox{
		float: left;
		width: 450px;
		height: 685px;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;		
	}	
	/* mx - horizontally longer box and related child elements */
	.mx {
		width: 685px;
		height: 215px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;	
	}
	.mx img.obenbild  {
		width: 685px;
		height: 130px;
	}
	.mx img.linkbild {
		max-width: 669px;
		max-height: 77px;
	}
	.mbox img.obenbild {
		width: 685px;
		height: 130px;
	}
	.mbox img.linkbild {
		max-width: 669px;
		max-height: 77px;
	}
	/* sx - horizontally longer shortest box and related child elements */
	.sx {
		width: 450px;
		height: 215px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;			
	}
	.sx img.obenbild, .lbox img.obenbild {
		width: 450px;
		height: 130px;
	}
	.sx img.linkbild, .lbox img.linkbild  {
		max-width: 434 px;
		max-height: 77px;
	}
	/* mbox - medium size box */
	.mbox {
		width: 685px;
		height: 450px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #c7d6ee;
		position: relative;			
	}
	/* contao adds a back link to some pages, this hides it*/
	.back {
		display: none;
	}
	/* common classes inside different size boxes */
	.boxlink span { 
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 1;
		/* edit: fixes overlap error in IE7/8, 
		make sure you have an empty gif */
	    background-image: url('empty.gif'); 
		cursor: hand;
	}
	 .linkbild {
	 	position: absolute;
		bottom: 2px;
		right: 8px;
	 }
	 .linkbild.left {
		left: 8px;
	 }
	 .mbox .linkbild {
		position: absolute;
		bottom: 0px;
		right: 0px;
		margin: 0 8px 8px 8px;
	 }
	.obenbild  {
		position: relative;
		top: -8px;
		right: -8px;
	}
	.longp {
		height: 227px;
	}
	/* some pages divide the mainbox into 2 areas */
	#leftside{
		width: 705px;
		height: 100%;
		float: left;
	}
	#rightside{
		width: 255px;
		height: 100%;
		float: right;
	}
	/* right bottom navigation box */
	#navi {
		width: 215px;
		height: 215px;
		position: absolute;
		bottom: 0px;
		right: 40px;
	}
	#navi div {
		width: 101px;
		height: 101px;
	}
	#navi img {
		margin-left: 10px;
		margin-right: 10px;
	}
	#link_1, #link_2, #link_3, #link_4 {
			background-color: #1a5291;
			border-right: 2px solid #103c6e;
			border-bottom: 2px solid #103c6e;
	}
	#link_1 {
		float: left; margin-bottom: 9px;
	}
	#link_2 {
		float: right; margin-bottom: 9px;
	}
	#link_3 {
		float: left;
	}
	#link_4 {
		float: right;
	}
	.bottomnavi {
		position: absolute;
		bottom: 5px;
	}
	.topnavi {
		position: absolute;
		top: 5px;
	}
	#navi_arrows {

		position: absolute;
		top: 66px;
		left: 66px;
		z-index: 1;
	}
	#navi_arrows img {
		margin: 0px;
	}
	/* overwrite rux content element div(overflow hidden) */
	.ce_mk_ruxcontent.block {
		overflow: visible;
	}
	.boxlink span { 
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 1;
		/* edit: fixes overlap error in IE7/8, 
		make sure you have an empty gif */
	    background-image: url('empty.gif'); 
		cursor: hand;
	}
	#kompassnavi {
		height: 623px;
		overflow: auto;
	}
}