/* BOXMODELL

Last Modifikation: 14.08.2013 @david
----------------------------------------------------------------------------- */

/* ================================================================
   State modifiers
================================================================ */
.no_content {
	visibility: hidden !important;
}





/* ================================================================
   Definitions for basic SCF Boxmodell module
================================================================ */
.box_line {
	display: table;
	table-layout: fixed; /* prevents false width-calculation in FF/IE/O < 15 */
	border-spacing: 12px 0;
	width: 100%;
	margin: 0 0 12px -14px; /* don't forget to push a bit back to compensate the border-spacing */
}

/* template 600px */
.box_line.bg_col222,
.box_line.bg_col33,
.box_line.bg_col6,
.box_line.bg_col42,
.box_line.bg_col24,
.box_line.bg_col4_M {
	width: 104%; /* 12px of 600px = 2%, needed for each side */
}

.box_line.bg_col2222,
.box_line.bg_col44,
.box_line.bg_col8,
.box_line.bg_col53,
.box_line.bg_col332,
.box_line.bg_col333_wM {
	width: 102.985074626865672%; /* 12px of 804px = 1,492537313432836%, needed for each side */
}

.box_line.bg_col22222,
.box_line.bg_col55,
.box_line.bg_col10,
.box_line.bg_col3_hN,
.box_line.bg_col4_hN {
	width: 102.380952380952381%; /* 12px of 600px = 1,19047619047619%, needed for each side */
}

.headline,
.box_line_inner {
	display: table-row;
	width: 100%;
}

.box_line_inner {
	margin: -12px -12px 0 -12px;
}

.inner_box {
	display: table-cell;
	height: 100%;
	vertical-align: top;
}

.headline .inner_box {
	border: 1px solid;
}

.box_line_inner .inner_box {
	border: 1px solid;
}

/* Remove borders from .border class if in .box_line_inner to prevent doubled borders */
.box_line_inner .border {
	border: 0 none;
}



/* ================================================================
   Definitions of column widths depending on number of columns used
================================================================ */

/* Template contentwidth:; 600px (excl. marginalia)
-------------------------------------- */
/* three equal columns */
.bg_col222 .inner_box{
	width:192px;
}

.bg_col222 .headline .inner_box{
	width:172px;
}

/* two equal columns*/
.bg_col33 .inner_box{
	width:294px;
}
.bg_col33 .headline .inner_box{
	width:274px;
}

/* single column */
.bg_col6 .inner_box{
	width:600px;
}
.bg_col6 .headline .inner_box{
	width:580px;
}

/* column combinations, four-two and two-four */
.bg_col42 .inner_box:first-child{
	width:396px;
}

.bg_col42 .inner_box{
	width:192px;
}

.bg_col42 .headline .inner_box:first-child{
	width:376px;
}

.bg_col42 .headline .inner_box{
	width:172px;
}


.bg_col24 .inner_box:first-child{
	width:192px;
}
.bg_col24 .inner_box{
	width:396px;
}
.bg_col24 .headline .inner_box:first-child{
	width:172px;
}
.bg_col24 .headline .inner_box{
	width:376px;
}

/* columns microgrid */
.bg_col4_M .inner_box{
	width:141px;
}
.bg_col4_M .headline .inner_box{
	width:121px;
}



/* Template width 804px (excl. marginalia)
----------------------------- */

/* four equal columns */
.bg_col2222 .inner_box{
	width:192px;
}
.bg_col2222 .headline .inner_box{
	width:172px;
}

/* two equal columns */
.bg_col44 .inner_box{
	width:396px;
}
.bg_col44 .headline .inner_box{
	width:376px;
}

/* single column */
.bg_col8 .inner_box{
	width:804px;
}
.bg_col8 .headline .inner_box{
	width:784px;
}

/* column combinations three-three-two and five-three */
.bg_col332 .inner_box{
	width:294px;
}
.bg_col332 .inner_box + .inner_box + .inner_box{
	width:192px;
}
.bg_col332 .headline .inner_box{
	width:274px;
}
.bg_col332 .headline .inner_box + .inner_box + .inner_box{
	width:172px;
}


.bg_col53 .inner_box:first-child{
	width:498px;
}
.bg_col53 .inner_box{
	width:294px;
}
.bg_col53 .headline .inner_box:first-child{
	width:478px;
}
.bg_col53 .headline .inner_box{
	width:274px;
}

/* columns microgrid */
.bg_col333_wM .inner_box{
	width:260px;
}
.bg_col333_wM .headline .inner_box{
	width:240px;
}



/* Template width 1008px
----------- */

/* five equal columns */
.bg_col22222 .inner_box{
	width:192px;
}

.bg_col22222 .headline .inner_box{
	width:172px;
}

/* two equal columns*/
.bg_col55 .inner_box{
	width:498px;
}

.bg_col55 .headline .inner_box{
	width:478px;
}

/* single column */
.bg_col10 .inner_box{
	width:1008px;
}

.bg_col10 .headline .inner_box{
	width:988px;
}

/* columns microgrid */
.bg_col4_hN .inner_box{
	width:243px;
}

.bg_col4_hN .headline .inner_box{
	width:223px;
}

/* columns microgrid */
.bg_col3_hN .inner_box{
	width:328px;
}

.bg_col3_hN .headline .inner_box{
	width:308px;
}



/* Usually not needed, because FS automatically shrinks the images to the correct size,
 *   I'll leave it until we are sure it can savely be removed/outfactored/whatsoever
 * @David */
.inner_box img {
  	margin: 0 !important;
	width: auto;
	max-width: 100%;
}




/* Last
.last{
	padding-right: 0;
} */

.last .box{
	margin-right: 0;
}

/* IE End */
.ie_box {
	height: 1px;
	width: 100%;
	/* position: absolute;
	bottom: 0;
	left: 0; */
}



/* BOXMODELL with Boxlook
 * ---
 * Note: Errrrr, what??? @David
----------------------------------------------------------------------------- */
.boxlook
/*.boxlook div*/{
	border:1px solid #cdd3d6;
	background:url("../images/boxmodell_2/FirstSpirit_1355302077083bg_ms_box_marginal.gif") repeat-x bottom left #f0f4f7;
	overflow:hidden!important;
}

.boxlook .width_col1{
	width:88px!important;
}
.boxlook .width_col2{
	width:190px!important;
}
.boxlook .width_col3{
	width:292px!important;
}
.boxlook .width_col4{
	width:394px!important;
}
.boxlook .width_col5{
	width:496px!important;
}
.boxlook .width_col6{
	width:598px!important;
}
.boxlook .width_col7{
	width:700px!important;
}
.boxlook .width_col8{
	width:802px!important;
}
.boxlook .width_col9{
	width:904px!important;
}
.boxlook .width_col10{
	width:1006px!important;
}

/* BOXMODELL with Padding
 * ---
 * Note: Errrrr, what??? @David
----------------------------------------------------------------------------- */
/* Headline */
.headline div{
	color:#666a6c!important;
	padding:5px 10px;
}

.headline .width_col1{
	width:70px!important;
}
.headline .width_col2{
	width:172px!important;
}
.headline .width_col3{
	width:274px!important;
}
.headline .width_col4{
	width:376px!important;
}
.headline .width_col5{
	width:478px!important;
}
.headline .width_col6{
	width:580px!important;
}
.headline .width_col7{
	width:682px!important;
}
.headline .width_col8{
	width:794px!important;
}
.headline .width_col9{
	width:886px!important;
}
.headline .width_col10{
	width:988px!important;
}
/* MS */
.headline .width_3cols_mr_cwm{
	width:240px!important;
}



/* ================================================================
   Theming definitions
================================================================ */

/* Template width 600/804/1008px
----------------------------------------------------------------------------- */
.headline .inner_box,
.box_line_inner .inner_box {
	border-color: #cdd3d6;
	background-color: #f4f8fa;
}

.headline .inner_box {
	border-bottom-color: #ffffff;
	/**
	 * IE < 10 needs bg image, because filter forces elements to hide the border-bottom
	 *	 if browser isn't in quirk-mode. bg position/repeat are ignored as soon as the
	 *	 gradient is applied (all browsers except IE 9 and below)
	 */
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-image: url(../images/boxmodell_2/bg_hl_boxmodelv2.gif);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dee4e7), to(#cdd3d6));
	background-image: -webkit-linear-gradient(top, #dee4e7, #cdd3d6);
	background-image: -moz-linear-gradient(top, #dee4e7, #cdd3d6);
	background-image: -ms-linear-gradient(top, #dee4e7, #cdd3d6);
	background-image: -o-linear-gradient(top, #dee4e7, #cdd3d6);
	background-image: linear-gradient(to bottom, #dee4e7, #cdd3d6);
	font-weight: bold;
	line-height: 15px;
}






/* ================================================================
   CMS Specs - Common Template definitions
================================================================ */

/* Text Picture Template
----------------------------------------------------------------------------- */
.box_line .block{
	padding:10px;
	width:auto;
	height: 100%; /* ! */
}

.box_line .caption{
	margin-left:10px;
	margin-right:10px;
}


/* Block Image */
.box_line .block_image{
	margin-bottom:2px!important;
}


/* P */
 .box_line p{
	padding-right: 0!important;
	margin-top:12px;
	margin-bottom:0!important;
}

.box_line p:first-child,
.box_line .clearer + p{
	margin-top:-5px!important;
}


/* H4 */
 .box_line h4,
 .box_line .block_like_h4{
	margin-bottom:0!important;
}

/* CLEARER */
 .box_line .clearer{
	 line-height:10px;
 }



/* Table Template
   Do we really need this? @David
----------------------------------------------------------------------------- */
.box_line table.td_padding td {
    padding: 5px 10px;
}

.box_line table.standardtable_white td {
	border-bottom:0!important;
}

.inner_box table.standardtable,
.inner_box table.standardtable_white {
	margin-bottom: 0;
}



/* Multibox
----------------------------------------------------------------------------- */
.box_line .sliderbox_container_all {
	border: 0 none !important;
}

.box_line .sliderbox_text_overlay,
.box_line_noBg .sliderbox_text_overlay {
	background:none!important;
}

.box_line .sliderbox_preview_controls{
	background:url(../images/sliderbox/elements/preview_layer/bg_button_area_bm.jpg) left top repeat-x!important;
}

.box_line .wrapper_all{
	margin:0!important;
}



/* --- Responsive Settings --- */
@media screen and (max-width: 1023px) {
	.box_line .sliderbox_preview_controls {
		background-color: transparent;
		background-image: url(../images/sliderbox/elements/preview_layer/bg_button_area_bm_tablet.gif);
		background-repeat: repeat-x;
		background-position: 0 0;
	}
}


/* Multibox and Boxmodell without background
----------------------------------------------------------------------------- */
.no_background {
	border: none !important;
	background: none !important;
}

.no_background .ie_box,
.no_background .inner_box,
.no_background .headline {
	background: none !important;
}

.no_background .sliderbox_container_all {
	border:none!important;
	background-color:transparent !important;
}

.no_background .sliderbox_container_controls {
	border-right: 1px solid #cdd3d6;
	border-bottom: 1px solid #cdd3d6 !important;
	border-left: 1px solid #cdd3d6;
}

.no_background .sliderbox_preview_overlayer {
	background: none !important;
}

.no_background .sliderbox_preview_container {
	background:#d9dde0;
}

.no_background .sliderbox_preview_controls {
	background:url(../images/sliderbox/elements/preview_layer/bg_button_area_bm_small.jpg) left top repeat-x!important;
}

.no_background .sliderbox_fading_image {
	background:#000000 !important;
}

.no_background .inner_box {
	border: 0 none !important;
}

.no_background .block{
	margin: 0;
	border: 0 none !important;
}


/* Multibox and Boxmodell without background in left column but background under right column
----------------------------------------------------------------------------- */
/* .half_background {
	background: none;
}

.half_background .ie_box,
.half_background .inner_box,
.half_background .headline {
	background: none;
}

Workaround um der rechten Spalte oben einen Rahmen zu geben
.half_background .headline {
	height: 1px;
	overflow:hidden;
}

.half_background .sliderbox_container_all {
	border:none!important;
	background-color:transparent !important;
}
.half_background .sliderbox_container_controls {
	border-right: 1px solid #cdd3d6;
	border-bottom: 1px solid #cdd3d6 !important;
	border-left: 1px solid #cdd3d6;
}
.half_background .sliderbox_preview_overlayer {
	background: none !important;
}
.half_background .sliderbox_preview_container {
	background:#D9DDE0;
}
.half_background .sliderbox_preview_controls {
	background:url(../images/sliderbox/elements/preview_layer/bg_button_area_bm_small.jpg) left top repeat-x!important;
}
.half_background .sliderbox_fading_image {
	background:#000 !important;
}
.half_background .inner_box {
	border: 0 none !important;
}

.bg_col33.half_background{
	background:url(../images/boxmodell_2/33cols_half.gif) top left repeat-y;
	position:relative;
}
.bg_col33.half_background .ie_box{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708333cols_line_half.gif) bottom left repeat-x;
}
.bg_col33.half_background .headline{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708333cols_hl_half.gif) bottom left repeat-x;
}
.bg_col42.half_background{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708342cols_half.gif) top left repeat-y;
	position:relative;
}
.bg_col42.half_background .ie_box{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708342cols_line_half.gif) bottom left repeat-x;
}
.bg_col42.half_background .headline{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708342cols_hl_half.gif) bottom left repeat-x;
}
.bg_col44.half_background{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708344cols_half.gif) top left repeat-y;
	position:relative;
}
.bg_col44.half_background .ie_box{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708344cols_line_half.gif) bottom left repeat-x;
}
.bg_col44.half_background .headline{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708344cols_hl_half.gif) bottom left repeat-x;
}
.bg_col53.half_background{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708353cols_half.gif) top left repeat-y;
	position:relative;
}
.bg_col53.half_background .ie_box{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708353cols_line_half.gif) bottom left repeat-x;
}
.bg_col53.half_background .headline{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708353cols_hl_half.gif) bottom left repeat-x;
}
.bg_col55.half_background{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708355cols_half.gif) top left repeat-y;
	position:relative;
}
.bg_col55.half_background .ie_box{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708355cols_line_half.gif) bottom left repeat-x;
}
.bg_col55.half_background .headline{
	background:url(../images/boxmodell_2/FirstSpirit_135530207708355cols_hl_half.gif) bottom left repeat-x;
}