@CHARSET "UTF-8";
/**
 * Responsive Web CSS Definitionen für www.jost-world.com
 * @author Kevin Chileong Lee
 * @version 1.0
 * @since 06.12.2011
 */
 
/****************************************************************************
* MAIN MENU
****************************************************************************/
#mainmenu .tinynav
{
	display: none;
}

@media screen AND (max-width: 1024px) {
	/****************************************************************************
	* VIDEO JS
	****************************************************************************/
	div.video-js
	{
		height: auto !important;		
	}
}

@media screen and (max-width: 991px) {
	.bigleftcolumn .col-xs-12.col-md-4
	{
		text-align: center;
	}
	
	.bigleftcolumn .col-xs-12 > div
	{
		display: inline-block;	
	}
}

/* 768 px */
@media screen and (max-width: 768px) {

	/* Header */
	#header {
	    background-image: url("../images/backgrounds/brgd_header_768px.png");
	}
	
	#header #navigation .logo.left .csc-textpic-imagewrap img
	{
		width: 84px;
		height: auto;
	}
		
	#header #navigation .logo.left .csc-textpic > div {
	    margin-left: 7em !important;
		padding-top: 0;
	}

	/* Header Topmenu rechts */
	#header #top .right {
	    padding-top: 1px;
		max-width: 100px;
		padding-right: 5px;
		padding-left: 5px;
	}
	
	#topmenu
	{
		margin-top: 0;	
	}
	
	#topmenu .sf-menu > li > .submenu
	{
		width: 200px;
		left: -163px;
	}
	
	#topmenu .sf-menu > li > .submenu a
	{
		white-space: normal;
	}
	
	#navigation > .container-no-padding
	{
		padding-right: 15px !important;
	}
	
	/* Textsuche */
	#textsuche {
		margin-right: 0.8em;
		margin-top: 0px;
		width: 0px;
	}

	#textsuche .anchor {
	    width: 0px;
	}
	
	#textsuche .anchor .iconWrapper .icon {
	    background: transparent url("/fileadmin/templates/jost-world.com/images/icons/lupe.png") no-repeat scroll center center;
		background-size: 19px;
		background-color: #09448a;
		border: 1px solid #167ab6;
		border-radius: 3px;
		padding: 11px 16px;
	}	
	
	#textsuche .anchor .iconWrapper {
	    padding: 0px;
	}
	
	#textsuche .anchor .form {
	    left: -203px;
	    padding: 5px;
	    top: 24px;
	}
	
	.sf-arrows .sf-with-ul::after {
 	   border-style: none;
    	border-width: 5px;
	}
	
	#logoleiste
	{
		padding-top: 13px !important;
	}

	
	/* Sprachmenu */
	#sprachwechsler {
		margin-right: 0.5em;
		position: relative;
		z-index:3;
	}

	.tx-srlanguagemenu .NO {
		padding: 4px 5px;
		background-color: #09448a;
		border: 1px solid #167ab6;
		border-radius: 3px;
	}
	
	
	.tx-srlanguagemenu .tx-srlanguagemenu-flag-linked, 
	.tx-srlanguagemenu .tx-srlanguagemenu-flag-unlinked {
		height: 14px;
	    width: 24px;
	}
	
	.tx-srlanguagemenu .CUR, 
	.tx-srlanguagemenu .NO, 
	.tx-srlanguagemenu .INACT {
	    margin: 0px;
	}
		
	.tx-srlanguagemenu .CUR {
		display: none;
	}

	
	.tx-srlanguagemenu, .tx-srlanguagemenu .links-list-header {
	    margin-top: 0px;
	}
	
	#top .right .tx-srlanguagemenu {
	    margin-top: 0px;
	}
	
	
	/* Netzmerk-Menu */
	#topmenu {
		padding-top: 0px;
	}
	
	#topmenu > ul:first-child > li {
		 text-indent: -9999px;
	}
	
	#topmenu > ul:first-child > li > a {
		 background: transparent url("/fileadmin/templates/jost-world.com/images/icons/weltkugel.png") no-repeat scroll center 2px;
		 background-size: 19px;
		 background-color: #09448a;
		 border: 1px solid #167ab6;
		 border-radius: 3px;
		 cursor: pointer;
		 padding: 4px 17px;
	}
	
	#top .menu ul ul {
	    margin-top: 0px;
	}
	
	#topmenu ul.submenu > li {
		 text-indent: 0px;
	}
	
	.sf-arrows .sf-with-ul:after {
		background: none;
	}
	
	/* Breadcrumb */
	
	ul#breadcrumb {
		margin-bottom: 0px;
	} 
	
	/* CONTENT */
	body
	{
		padding-top: 67px;	
	}
	
	#body .wrapper h2.title {
		background-color: #f59e01;
		color: #fff;
		margin: 0px;
		padding: 9px;
		font-size: 1.1em;
		border-bottom: 1px solid #b6d2e0;
		border-left: 1px solid #b6d2e0;
		border-right: 1px solid #b6d2e0;
		box-shadow: 0px 0px 3px #999 inset;
	} 
	
	#body > .row > .col-xs-12 > .visible-xs-block:first-Child
	{
		padding-top: 15px;
	}
	
	#body > .row > .col-xs-12 > .visible-xs-block:first-Child figure
	{
		margin: 0;
	}
}

@media screen and (max-width: 767px) {
	/****************************************************************************
	* DOWNLOADTABELLEN
	****************************************************************************/
	table.pdfdownload th.description.empty
	{
		white-space: normal;
	}
}


/* 640 px */
@media screen and (max-width: 640px) {
	/****************************************************************************
	 * BOOTSTRAP EXT
	 ****************************************************************************/
	.hidden-xsm
	{
		display: none !important;
	}
	
	/* Header */
	#header {
	    background-image: url("../images/backgrounds/brgd_header_320-640px.png");
	}
	
	#header #navigation .logo.left .csc-textpic-imagewrap img {
	    width: 80px;
	}
	
	#textsuche .anchor .iconWrapper .icon {
		padding: 13px 18px;
	}	
	
	#textsuche .anchor .form {
	    top: 27px;
	}

	#topmenu > ul:first-child > li > a,
	#textsuche .anchor .iconWrapper .icon {
		 background-size: auto;
	}
	
	#logoleiste {
	    padding-top: 11px !important;
	}
	
	#top
	{
		padding-top: 4px;	
	}
	
	#top > .left
	{
		padding-top: 1px;
	}
	
	
	/* Netzwerk-Menu */
	#topmenu > ul:first-child > li > a {
		padding: 6px 18px;
		background-position: center 1.5px;
	}
	
	#topmenu {
		right: 103px;
	}
	
	
	/* Sprachwechsel */
	.tx-srlanguagemenu .tx-srlanguagemenu-flag-linked, 
	.tx-srlanguagemenu .tx-srlanguagemenu-flag-unlinked {
		height: 20px;
	    width: 31px;
	}
	
	.tx-srlanguagemenu .NO {
		padding: 3px;
	}
	
	
	/*Navbar Toggle */
	
	.navbar-toggle {
   		 padding: 7px 10px 6px 10px;
	}
	
	.navbar-toggle .icon-bar:last-child {
	    margin-top: 3px;
	}
	/****************************************************************************
	 * NAVIGATION
	 ****************************************************************************/
	#mainmenu
	{
		display: none;	
	}
	
	#top > .left
	{
		width: 15% !important;
	}
	
	#top > .right
	{
		width: 85% !important;
	}
	/****************************************************************************
	 * HOTSPOTTER
	 ****************************************************************************/
	.tt-wrap
	{
		max-height: 300px;
		overflow-y: auto;	
	}
}



/* 480 px */
@media screen and (max-width: 480px) {
	/****************************************************************************
	 * BOOTSTRAP EXT
	 ****************************************************************************/
	.col-xxs-12
	{
		width: 100%;	
	}
	
	.hidden-xxs
	{
		display: none !important;
	}
	
	.brands .csc-textpic img {
		width: 450px;
	}
	
	/* Content */
	
	#content h2 {
	    font-size: 1.3em;
	}
	
	div.csc-textpic-right .csc-textpic-imagewrap {
   	 	float: none;
	}
	
	/****************************************************************************
	 * BODY
	 ****************************************************************************/
	#body .wrapper h2.title {
		font-size: 1.2em;
	} 
	
	/****************************************************************************
	 * NEWS
	 ****************************************************************************/
	.news-list-item.row .col-xxsm-8
	{
		margin-top: 1em;
	}
	/****************************************************************************
	 * HOTSPOTTER
	 ****************************************************************************/
	.tip-tooltip
	{
		font-size: 0.9em;
	}
	/****************************************************************************
	 * FOOTER
	 ****************************************************************************/
	#footer
	{
		padding-top: 5px;
		padding-bottom: 5px;	
		background-color: #0a4690;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}
	
	#footer .menu
	{
		display: none;	
	}
	
	#footer .brands img
	{
		max-width: 325px;
	}
}

@media screen and (max-width: 479px) {
	h2.title.visible-xs-block
	{
		display: none !important;
	}
	/****************************************************************************
	 * TYPO3 - Bildelemente
	 ****************************************************************************/
	.csc-textpic-intext-right-nowrap-130 .csc-textpic-text,
	.csc-textpic-intext-right-nowrap-160 .csc-textpic-text
	{
		margin-right: 0;	
	}
}

/* Ausnahmsweise ausserhalb unserer Breakpoints für die Google Karte */
@media screen and (max-width: 451px) {
	.gme-map.worldwide
	{
		height: 250px !important;	
	}
}


/* 360 px */
@media screen and (max-width: 360px) {

	/* Header */	
	#body .wrapper h2.title {
		font-size: 1.3em;
	} 
	
}



/* 320 px */
@media screen and (max-width: 320px) {

	/* Header */	
	.brands .csc-textpic img {
		width: 290px;
	}
	
	#content h2 {
	    font-size: 1.4em;
	}	
}

@media screen and (min-width: 769px) {
	#navigation .logo.left img
	{
		max-width: 108px;	
	}
}

@media screen and (min-width: 768px) {
	/****************************************************************************
	 * NAVIGATION
	 ****************************************************************************/
	#navigation .right
	{
		padding-right: 15px;
	}
	
	#header #top .right
	{
		padding-right: 0;	
	}
	/****************************************************************************
	* DOWNLOADTABELLEN
	****************************************************************************/
	table.pdfdownload td.description.col-sm-5, 
	table.pdfdownload th.description.col-sm-5
	{
		width: 41.66666667%;
	}
	
	table.pdfdownload td.download, 
	table.pdfdownload th.download
	{
		width: 70px;
	}
}

@media screen and (min-width: 481px) {
	/****************************************************************************
	 * BOOTSTRAP EXT
	 ****************************************************************************/	
	.col-xxsm-4,.col-xxsm-8,.col-xxsm-6
	{
		float: left;	
	}
	
	.col-xxsm-4
	{
		width: 33.33333333%;
	}
	
	.col-xxsm-6
	{
		width: 50%;
	}
	
	.col-xxsm-8
	{
		width: 66.66666667%;
	}
	/****************************************************************************
	 * FOOTER
	 ****************************************************************************/
	#footer .mobile
	{
		display: none;	
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	/****************************************************************************
	 * NAVIGATION
	 ****************************************************************************/
	#navigation .row .hidden-xs
	{
		display: block !important;	
	}
}

@media screen and (min-width: 641px) and (max-width: 768px) {
	#top
	{
		padding-top: 2px;
		padding-bottom: 0;
	}
}


@media screen and (min-width: 641px) {
	/****************************************************************************
	 * BOOTSTRAP EXT
	 ****************************************************************************/
	.col-xsm-9,
	.col-xsm-3
	{
		width: 75% !important;
		float: left;
		position: relative;
	    min-height: 1px;
	    padding-right: 15px;
	    padding-left: 15px;
	}
	
	.col-xsm-3
	{
		width: 25% !important;
	}
	/****************************************************************************
	 * NAVIGATION
	 ****************************************************************************/
	#mainmenu
	{
		display: block;	
	}
	
	#mobileMenuContainer
	{
		display: none;	
	}
	
	.navbar-toggle {
	    display: none;
	}
}