/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */






	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#brand{
			font-size: 12.5em;	/* scaled */
			color: black;
		}
		ul.portfolio li{      
			margin-right: 3px;
			height: 150px;
		}

		/* title of the link in the portfolio button */
		li.portfolio-item a{
			font-size: 1.75em; 	/* scaled */
		}
		ul.navigation a{
			font-size: 1.5em;
		}
	 	
		div.entry-content p{
			margin-right: 0; 
		}

		article {
			margin-bottom: 30px;    
			margin-top: 0;
		/*	margin-top: 30px; */
		}

		#reader-followup{
			padding-left: 10px;
			padding-right: 10px;
		}
		article.post{
			padding-left: 10px;	/* this sets the margins for the narrowest, most economic format */
			padding-right: 10px;
		}
		


/* 		switch the arrow menus around */
		div.menu_at_right{
			display: none;
		}
		div.menu_at_bottom{
			display: inline;
		}

		#teaser-headline {
			color: orange;
		}

	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	/* ipad landscape: */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#brand{
			font-size: 20.5em;	/* scaled */
			color: black;
		}
		#tag{
			font-size: 2.05em;	/* scaled */
/* 			line-height: 0.6em; */
/* 			margin-left: 10px; */
			margin-bottom: 0px;
		}


		#reader-followup{
			padding-left: 20px;
			padding-right: 20px;
		}
		article.post{
			padding-left: 20px;	/* this sets the margins for the narrowest, most economic format */
			padding-right: 20px;
		}

		  li{
			margin-right: 5px;
		}           


		span.salmiakSample, span.salmiakSampleItalic{
			font-size:4.2em;
		}
		#teaser-headline {
			padding-left: 10px;
			font-size: 6em;
			color: white;
/* 			color: blue; */
		}



	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#brand{
			font-size: 7.5em;	/* scaled  7.5*/
			color: blue;
		}
		#tag{
			font-size: 1.33em;	/* scaled */
/* 			line-height: 0.4em; */
			margin-bottom: 10px;
		}
		footer.entry-utility, div.entry-meta{
			display: none;
		}
		
		#menu-main-navigation{
			margin-left: 10px;
			margin-top: 5px;
			margin-bottom: 0;
		}

/* 		switch the arrow menus around */
		div.menu_at_right{
			display: none;
		}
		div.menu_at_bottom{
			display: inline;
		}
		#teaser-headline {
			color: green;
		}



	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
   		#brand{
			font-size: 10.625em;	/* scaled */
		}
		#tag{
			display: none;
/*
			font-size: 2.05em;
			line-height: 0.6em;
			margin-bottom: 10px;
*/
		}
		#additional{
			display: none;
		}
		ul.navigation li{
			float: left;
		}

		/* headlines for the narrowest screen */
		article	h1, entry-title h1{
			font-size: 8.33em;	/* scaled */
			line-height: 0.75em;
		}
		article	h2, entry-title h2{
			font-size: 3em;	/* scaled */
			line-height: 1em;
		}
		article	h3, article	h4, article	h5, article	h6, entry-title	h3, entry-title	h4, entry-title	h5, entry-title	h6{
			font-size: 2.5em;	/* scaled */
			line-height: 0.75em;
		}
                

		aside.sidebar-article{
			margin-top: 50px;
		}

		/* cazy big size for 404 */
		#crazybig{
			font-size: 31,66em;	/* scaled */
		}

		#teaser-panel {
			height: 200px;
/* 			margin-bottom: 10px; */
			background-size: cover;
			background-image: none;
		}
		#teaser-headline{
			padding-left: 10px;
			font-size: 6em;
			color: white;
/* 			color: red; */
		}
		#frontpage-teaserpanel{
			height: 250px;
/* 			height: 75%; */
		}
		#frontpage-teaserpanel h1{
			font-size: 4.58em;	/* scaled */
		}

/* 		drop the bottom arrows, replace it with the horizontal one */
		#menu-main-navigation li{
			margin-right: 5px;       
			background-image: none;
			height: 1em;
			padding-top: 5px;
		}           
		#menu-main-decorative-leftarrow{
			background-image: url("/ltrimg/arrowleft.png");
			background-repeat: space;
			background-position: center -1px;
			padding-top: 3px;
			width: 70px;
			height: 1em;
			float: left;
		}
		
/* 		switch the arrow menus around */
		div.menu_at_right{
			display: inline;
		}
		div.menu_at_bottom{
			display: none;
		}
		

		#reading-column {
			padding-left: 5%;
			padding-right: 5%;
		}
		#reading-column-byline{
			font-size: 2.25em;
		}


		
		span.salmiakSample, span.salmiakSampleItalic{
			font-size:3.7em;
		}



	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {                                            3
	

		#brand{
			font-size: 9.6em;
			color: rgba(206,27,27,0.81);
		}
		#tag{
			display: none;
/*
			font-size: 2.05em;
			line-height: 0.6em;
			margin-left: 10px;
*/
		}
		#additional{
			display: none;
		}
		
		/* headlines for the narrowest screen */
		article	h1{
			font-size: 7em;
			line-height: 0.75em; 
		}
		article	h2{
			font-size: 5em;
			line-height: 1em;
		}
		article	h3, article	h4, article	h5, article	h6{
			font-size: 3em;
			line-height: 0.75em;
		}     
		
		#menu-main-navigation li{
			margin-right: 5px;     
			background-image: none;
			height: 1em;
		}           
		
		ul.portfolio li{
			float: none;
			margin-right: 3px; 
			margin-bottom: 5px;
			height: 100px;
			width: 90%;
		}
		
		#nav-sidebarcontainer{
			/* left offset for the header menu nav items */
			padding-left: 0;
			padding-top: 10px;
		}

		/* cazy big size for 404 */
		#crazybig{
			font-size: 21.6em;	/* scaled */
		}
		
		#teaser-panel {
			height: 200px;
			margin-bottom: 10px;
			background-size: cover;
		}
		#teaser-headline {
			font-size: 6em;	/* scaled */
			padding-left: 10px;
			color: white;
/* 			color: yellow; */
		}
		
/*
		#teaser-byline{
			display: none;
		}
*/
		
		#frontpage-teaserpanel{
			height: 250px;
		}
		#frontpage-teaserpanel h1{
			font-size: 5.5em;
/* 			line-height: 50%; */
		}

		#reading-column {
			padding-left: 2%;
			padding-right: 2%;
		}
		#reading-column-byline{
			font-size: 2.25em;
		}

/* 		switch the arrow menus around */
		div.menu_at_right{
			display: inline;
		}
		div.menu_at_bottom{
			display: none;
		}


		span.salmiakSample, span.salmiakSampleItalic{
			font-size:2.5em;
		}


	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/