/* 
    Document   : responsive.css
    Created on : 28.04.2015
    Author     : abe
    Description:
        Responsive breakpoints for different screen resolutions
		We start at huge screens and subsequently resize down to smartphone screens
*/

/*
 * Big screen resolutions like Notebooks
 */

@media (max-width: 1320px) {
	#layout_frame {
		width: 1020px;
	}
	
	#layout_main .portlet {
		width: 300px;
	}
}

/* 
 * Medium screen layouts like tablets
 */

@media (max-width: 1024px) {
	#layout_frame {
		width: 100%; 
	}

	#layout_main .center {
		padding: 0 0 0 205px;
	}

	#layout_head {
		padding: 0 7px 0 2px;
	}

	#head_navigation {
		min-width: 300px;
		padding: 0 2px 0 213px;
	}

	#layout_main .content {
		min-width: 278px;
	}

	body {
		min-width: auto;
	}

	#layout_main .floatright {
		float: none;
		padding: 3px;
		background-color: #333;
		width: auto;
		margin: 0 0 0 205px;
		border: 1px solid #555;
		border-width: 0 1px 0 1px;
		max-height: 150px;
		overflow: hidden;
		min-width: 292px;
	}

	.bildl, .bildr {
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 5px 0;
	}

	/*.bildl img, .bildr img, .bildm img {
		width: 75%;
		height: 75%;
	}*/

	.floatright li a,
	.floatleft li a {
		padding: 10px 2px 10px 2px;
		border-top: 1px solid #444;
	}

	#head_login .loginlink {
		display: inherit;
	}

	#head_login form {
		display:none;
	}
	
	#layout_main .portletcontainer {
		display:block;
		margin-right: 0;
	}

	#layout_main .portlet {
		float: none;
		width: auto;
		margin: 0 0 10px 0;
		height: auto;
		min-height: 200px;
		flex-grow: 0;
		flex-shrink: 0;
	}

	#layout_footer {
		padding-right: 10px;
	}

	#layout_footer #social {
		float: none;
		margin-left: 0;
	}

	.skeleton img {
		display: block;
	}
}

/*
 * Small Screen layouts like phones 
 */

@media (max-width: 720px) {
	#layout_main .center {
		padding: 0;
	}

	#layout_main .floatleft {
		display:none;
	}

	#layout_main .floatright {
		margin-left: 0px;
	}

	#head_navigation {
		padding: 0 2px 0 7px;
	}

	#head_logo {
		float: none;
		margin: 0 0 0 4px;
	}

	#layout_head {
		padding: 0 7px 0 2px;
		height: 75px;
	}

	a#menu_burger {
		display: inherit;
	}

	#head_navigation_box {
		position: inherit;
		top: 0px;
	}

	/*.bildl img, .bildr img, .bildm img {
		width: 50%;
		height: 50%;
	}*/

	#layout_footer {
		padding-left: 10px;
	}

	/* Forms */

	.content div.input {
		padding-left: 110px;
	}

	.content div.label {
		width: 108px;
	}

	td.rowname {
		width: 120px;
	}

	body {
		background-image: none;
	}
	
	table.datatable td,
	table.datatable th {
		font-size: 10px;
	}
	
	.slide {
		height: 200px;
	}
	.slide_description {
		display: none;
	}

	.skeleton {
		float: none;
	}
	.skeleton img {
		display: inline;
	}
}