/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/
/*  Table of Contents 
	01. TESTING TEXT
	02. COMMON FIXES
	03. DEFAULT STYLES
	04. TABLET (Portrait)
	05. MOBILE (Portrait)
	06. MOBILE (Landscape)
*/


/*
=============================================== 01. TESTING TEXT ===============================================
*/
body:after {content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff;
display:none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */}
.resize {display:none; position:fixed; bottom:0px; right:0px; width:80px; height:80px; background:url(images/resize.png); z-index:55;  }

/*
=============================================== 02. COMMON FIXES ===============================================
*/
html {-webkit-text-size-adjust: none;}	/* Removes webkit font resizing */ 
.container, img, .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .grid5column {
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
img {max-width: 100%; height: auto;}
body {max-width:100%; width:100%; overflow:hidden;}

/*
=============================================== 03. DEFAULT STYLES ===============================================
*/
body:after {content: "Wider than 959px";background-color: hsla(270,60%,40%,0.7);/* Notify what @media browser is using, Disable above by display:none; */ 	

}


/*
=============================================== 04. TABLET (Portrait) ===============================================
*/
@media only screen and (min-width: 959px) and (max-width: 1000px) { body {min-width:0px; width:100%; overflow:hidden; }  } /*Fix for non-responsive version*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
	body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 	
	
	.content-sidebar {width:486px;}
	
	body { min-width:768px;}
    .container	{ width: 758px; }
	.sf-menu a {padding-left:10px;	padding-right:10px;}
	ul.sf-menu {right:-15px; }
	
	.grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .grid5column, .grid6column {margin-right:20px;}
	.grid2column 							{width:369px;}
	.grid3columnbig 						{width:498px; }
	.grid3column 							{width:239px;}
	.grid4column 							{width:174px;}
	.grid4columnbig 						{width:562px;}
	.grid5column 							{width:135px;}
	.grid6column 							{width:109px;}

	.content-sidebar .grid2column 		{width:232px;  }
	.content-sidebar .grid3column 		{width:148px; }
	.content-sidebar .grid4column 		{width:106px; }
	.content-sidebar .grid3columnbig 	{width:316px; }
	.content-sidebar .grid4columnbig 	{width:358px;}
	.content-sidebar .grid5column 		{width:81px; }
	.content-sidebar .grid6column 		{width:64px; }

	/* Misc fixes */
	.date-homepage {width:10%;  padding-right:2%;}
	.blog-homepage-content { width:86%; }
	.commentlist {width:380px;left:101px;}
	#header-addition {width:514px;}

}


/*
=============================================== 05. MOBILE (Portrait) ===============================================
*/

@media only screen and (max-width: 767px) {
	body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 
	
	body { min-width:300px;}
    .container { width: 300px; }
    .columns, .column { margin: 0; }

    .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .grid5column, .grid6column, .content-sidebar .grid2column, .content-sidebar .grid3column, .content-sidebar .grid3columnbig, .content-sidebar .grid4column, .content-sidebar .grid4columnbig, .content-sidebar .grid5column, .content-sidebar .grid6column 
	{ width: 300px; }
	.content-sidebar, .sidebar {width:300px; margin:0px; float:none; }
	
	#header-addition {font-size: 14px; text-align:center; padding-bottom:8px; width:100%; float:none; }
	#header-addition .social-networking-icons {display:block; float:none; margin:0px auto;  padding-top:8px;}

	/* Removes traditional menu */ 
	nav ul { display: none; }  
	nav {position:static;}
	nav select { font-size:120%; display:inline-block; margin:15px auto 20px auto; width:100%; color: #555; min-width: 285px; max-width: 100%;  border: 1px solid #ccc; padding: 6px 4px;}/* Adds in menu select */

	/* Centering the logo and search form */
	#logo {float:none; text-align:center;}
	.searchform {position:static;  text-align:center; }
	
	/* Centering the footer contents */
	ul#footer-navigation {float:none;  width:100%;  text-align:center; padding-bottom:20px;}
	ul#footer-navigation li {display:inline; float:none; margin-right:10px; }
	footer {text-align:center;}
	#footer-base-right { width:100%; float:none; margin:0 auto; text-align:center; padding-bottom:10px;}
	.ie7 #footer-base-right {text-align:right;}
	
	/* Misc fixes */
	.date-homepage {width:10%;  padding-right:2%;}
	.blog-homepage-content { width:86%; }
	.unoslider_caption {padding: 3px 12px; font-size: 10px;}
	#page-title h2 span {display:block; padding:8px 0px;}	
	.resize {display:none;}	
	
	.commentlist {width:318px; left:0px;}
	.comment-author .avatar  {display:none;}
	.comment-author {padding-left:0px;}
	.commentlist .children li.comment .comment-meta {margin-left:0px ;}
	textarea#comment  {width:90%;}
	
}


/*
=============================================== 06. MOBILE (Landscape) ===============================================
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {

	body:after { content: "480 to 767px"; background-color: hsla(150,50%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ 
	
	body { min-width:420px;}
    .container, .content-sidebar, .sidebar { width: 420px; }
    .columns, .column { margin: 0; }

    .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, .grid5column, .grid6column, .content-sidebar .grid2column, .content-sidebar .grid3column, .content-sidebar .grid3columnbig, .content-sidebar .grid4column, .content-sidebar .grid4columnbig, .content-sidebar .grid5column, .content-sidebar .grid6column 
	 { width: 420px; }
	.commentlist {width:318px;left:101px;}
	.comment-author .avatar  {display:inherit;}
	.commentlist .children li.comment .comment-meta {margin-left:63px ;}
	

}