/*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com 
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 980px; margin: 0 auto; padding: 0; padding-top: 0px; }
    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column                      { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 235px; float: left; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 610px; float: right; }
    .container .twelve.columns                  { width: 980px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }


		

	/* TOP-MENU */
	@media only screen and (min-width: 768px)
	{
		a.open-mobilemenu
		{
			display: none;
		}
		
		#botmenu {
			margin: 0 0 0 225px;
		}

		#subnav {
			clear: both;
			color: #fff;
			font-size: 13px;
			text-transform: uppercase;
			margin: 0 auto;
			overflow: hidden;
			float: left;
			
		}

		#subnav ul {
			float: left;
		}

		#subnav li {
			float: left;
			list-style-type: none;
			font-weight: 400;
		}

		#subnav li a {
			color: #0f9896;
			display: block;
			padding: 8px 40px 8px 0px;
			position: relative;
			text-decoration: none;
			font-size: 15px;
		}

		#subnav li a:hover,
		#subnav li a:active,
		#subnav a.active  {
			/*color: #fff;
			background-color: #0f9896;*/
			text-decoration:underline;
		}

		#subnav .active li a {
			text-decoration: none;
		}

		#subnav li a .sf-sub-indicator {
			display: block;
			overflow: hidden;
			position: absolute;
			text-indent: -9999px;
		}

		#subnav li li a,
		#subnav li li a:link,
		#subnav li li a:visited {
			background-color: #0f9896;
			border-bottom: 1px solid #FFFFFF;
			border-top-width: 0;
			color: #ffffff;
			font-size: 12px;
			padding: 10px 10px;
			position: relative;
			text-transform: none;
			width: 140px;
			font-weight: 350;
		}

		#subnav li li li  a,
		#subnav li li li   a:link,
		#subnav li li li  a:visited {
			background-color: #595959;
			border-bottom: 1px solid #FFFFFF;
			border-top-width: 0;
			color: #ffffff;
			font-size: 11px;
			padding: 10px 10px;
			position: relative;
			text-transform: none;
			width: 140px;
			font-weight: 350;
		}

		#subnav li li a:hover,
		#subnav li li a:active,
		#subnav li li a.active  {
			color: #fff;
			background: #595959;
		}

		#subnav li ul {
			height: auto;
			padding: 0px 0px;
			left: -9999px;
			margin: 0 0 0 0px;
			position: absolute;
			width: 160px;
			z-index: 9999;
		}

		#subnav li ul a {
			width: 160px;
		}

		#subnav li ul ul {
			margin: -35px 0 0 160px;
		}

		#subnav li:hover>ul,
		#subnav li.sfHover ul {
			left: auto;
		}
		
	}


	
	

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) 
	{
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

        .container .one.column                      { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 155px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 100%; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 348px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
		
		#head {
			height: 153px;
		}
			
		#botmenu {
			margin: 0px 0 0 145px;
		}	
			
		#subnav li a {
			padding: 8px 35px 8px 0px;
		}	
			
		.post {
			width: 543px;
		}

		#footer {
			width: 613px;
			background: url(../images/footer_schatten_768.png) no-repeat;
		}
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) 
	{
        .container { width: 300px; height:auto; }
        .columns, .column { margin: 0 10px; }

        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 280px; }
		.container .five.columns { height: 0px; width: 0px; display:none;} 
		.home .container .five.columns { height: auto; width: auto; display:block;} 

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }
       
		/* TOP-MENU */
		
		#subnav {
			margin-bottom: 40px;
		}
		
		.selfservice #subnav {
			margin-top: 20px;
		}
		
		#subnav ul {
			list-style-type: none;
			margin: 0 0 40px 0;
			padding: 0px;
		}

		#subnav li {
			list-style-type: none;
			margin: 0px;
			border-bottom: 1px dotted #595959;
		}

		
		
		#subnav li a { 
			color: ffffff;
			padding: 20px 0px 5px 0px;
			font-weight: bold;
			display: block;	
		}
		
		#subnav li li a { 
			color: ffffff;
			padding: 5px 0px 5px 0px;
			font-weight: normal;
		}
		

		#subnav ul a:hover {
			color: #ffffff !important;
			text-decoration: none;	
		}

		#subnav ul ul {
			list-style-type: none;
			background-repeat: no-repeat;
			margin: 0px;
			padding-left: 10px;
		}

		#subnavul li {
			list-style-type: none;
			margin: 0px;
		}

		/* 20160613 Roman Fischer margin-bottom changed from 10px to 0, border-bottom:none added */
		#subnav ul ul li:last-child {
			margin-bottom: 0px;
			border-bottom: none;
		}

		#subnav ul li a {
			margin: 0;
			padding-left: 10px;
		}

		#subnav ul li a:link,
		#subnav ul li a:visited  {
			color: #595959;
			text-decoration: none;
			display: block;	
		}


		#subnav li a:hover,
		#subnav li a.active:link,
		#subnav li a.active:visited {
			background-color: #0F9896;
			color: #ffffff;
			text-decoration: none;
			display: block;	
		}
	   
	   
		/* Weitere Einstellungen */
	   
	   
		#blogname {
			height: 95px;
		}
	   
		#subnav {
			display: none;
		}
	   
	   .active #subnav {
			display: block;
			position: absolute;
			width: 100%;
			z-index: 999;
			background: rgba(255,255,255,0.9);
			top: 72px;
			left: 0;   
	   }
	   

		/* Navigation */
		
		a.open-mobilemenu {
			float: right;
			display: inline-block;
			text-decoration: none;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			padding: 20px 0px 10px 5px;
			/*position: absolute;
			right: 15px;
			top: 5px;*/
			z-index: 9999;
		}

		a.open-mobilemenu span {
			display: block;
			width: 32px;
			height: 2px;
			background: #0f9896;
			margin: 0 0 8px;
}
		
	   
       /* Float menu left now*/
	   
       
       .menu ul {float:left;}
	   
		#topbar {
			margin-bottom: 0;
		}
	   
		#head {
			height: 60px;
		}
	   
	   .post {
			width: 250px;
			padding: 0px 25px 40px 25px;
		}
		
		.sidebox {
			display: none;
			height: 0;
			width: 0;
		}
		
		.home .sidebox {
			display:block;
			width: auto;
			height: auto;
		}
		
		.home .sidebar
		{
			width: 250px;
			padding: 0 25px 20px 25px;
			background: #fff;
			margin-bottom: 20px;
			box-shadow: 0 0 4px 4px #E0E0E0;
		}
		
		.entry img
		{
			width: 100%;
			float: none;
			height:auto:
		}
		
		
		#footer {
			width: 300px;
			background: url(../images/footer_schatten_300.png) no-repeat;
		}
		
		#search {
			width: 265px;
		}
			
		.fcred, .fcred a, .fcred a:visited {
			text-align: center;
		}

    }

	
/* #Mobile 5 Zoll
================================================== */

    /* Note: Design for a width of 412px */

    @media only screen and (min-width: 400px) and (max-width: 479px) {	
	
		.container {
			width: 380px;
			height: auto;
		}
	
		.post {
			width: 330px;
		}

		.home .sidebar
		{
			width: 330px;
		}
	
	}
	

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0 10px; }

        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 100%; }
		.container .five.columns { height: 0px; width: 0px; display:none; }
		
		.sidebox { height: 0px; width: 0px; display:none; }
        
        /* Float menu left now*/
       
       .menu ul {float:left;}
	   
		   
	   #blogname {
			float: right;
		}
		
	   .post {
			width: 365px;
		}

		.home .sidebar
		{
			width: 365px;
		}
		
		
		
 		#head {
			height: 84px;
		}
			
		#footer {
			width: 420px;
			background: url(../images/footer_schatten_420.png) no-repeat;
		}
			
		#search {
			width: 420px;
		}
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }




	img.scale-with-grid {
		max-width: 100%;
		height: auto; }