/**
 * @package Site Template
 * @subpackage Crystalline
 * @since Crystalline 1.0
 * 
 * Responsive Design CSS Rules
 * Created by CMSMasters
 * 
 */


/* ---------- Large Monitor (Note: Design for a width more than 1440px) ---------- */

@media only screen and (min-width: 1440px) {
	
	#page, 
	.boxed #header {width:1240px;}
	
	.header_inner, 
	.liquid .headline .headline_inner, 
	.liquid .top_sidebar_outer, 
	.liquid .pj_sort_block, 
	.liquid .content_wrap, 
	.liquid .middle_sidebar_outer, 
	.liquid .bottom_outer, 
	.liquid .footer_inner {width:1160px;}
	
}


/* ---------- Small Tablet (Note: Design for a width more than 540px but less than 768px) ---------- */

@media only screen and (min-width: 541px) and (max-width: 767px) {
	
	.one_fourth {width:46%;}
	
	.one_sixth {width:31%;}
	
	.portfolio.four_columns .project:nth-child(odd), 
	.format-album.cmsms_four .resize figure:nth-child(odd),
	.post_type_shortcode article.one_fourth:nth-child(odd),
	.cmsms_sitemap_category > li:nth-child(odd), 
	.cmsms_sitemap_archive li:nth-child(odd),  
	.cmsms_sitemap > li > ul > li:nth-child(odd) {
		float:left;
		padding-right:0;
		width:50%;
	}
	
	.portfolio.four_columns .project:nth-child(even),  
	.format-album.cmsms_four .resize figure:nth-child(even), 
	.post_type_shortcode article.one_fourth:nth-child(even), 
	.cmsms_sitemap_category > li:nth-child(even), 
	.cmsms_sitemap_archive li:nth-child(even), 
	.cmsms_sitemap > li > ul > li:nth-child(even) {
		float:right;
		padding-right:0;
		width:50%;
	}
	
	.cl_resp, 
	.divider_resp {display:block;}
	
}


/* ---------- Small Monitor (Note: Design for a width less than 1024px) ---------- */

@media only screen and (max-width: 1023px) {
	
	#page {width:100%;}
	
	.boxed #header {
		width:90%;
		padding:0 3.25%;
	}
	
	.header_inner, 
	.liquid .headline .headline_inner, 
	.liquid .top_sidebar_outer, 
	.liquid .content_wrap, 
	.liquid .middle_sidebar_outer, 
	.liquid .bottom_outer, 
	.liquid .footer_inner {width:100%;}
	
	.liquid .pj_sort_block {width:93.5%;}
	
	.liquid .content_wrap {
		background-position:73% 0;
		padding:0 3.25%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	
	.liquid .content_wrap.l_sidebar {
		background-position:27% 0;
	}
	
	#navigation > li > a {min-width:80px;}
	
	#navigation > li > a > span.link_after {margin-left:-40px;}
	
	#navigation > li.current_page_item > a > span.link_after,
	#navigation > li.current-menu-ancestor > a > span.link_after,
	#navigation > li:hover > a > span.link_after,
	#navigation > li > a:hover > span.link_after {
		border-left:40px solid transparent;
		border-right:40px solid transparent;
	}
	
	#page {width:90%;}
	
	.widget_custom_popular_entries li .ovh {overflow:visible;}
	
	#middle_content .commentlist, 
	#middle_content #commentform > p {width:100%;}
	
	.one_fourth .tabs > li.current a span {padding:9px 10px;}
	
	.one_fourth .tabs > li a span {text-align:left;}
	
	.one_fourth .tabs > li {
		display:block;
		list-style:none;
	}
	
	.one_fourth .tabs > li.current:first-child a {margin:0 0 -1px;}
	
	.one_fourth .tabs > li a,
	.one_fourth .tabs > li:first-child a {
		margin:0 0 -1px 10px;
		border:1px solid #edecec;
		-webkit-transition:margin-left .3s ease-in-out;
		-moz-transition:margin-left .3s ease-in-out;
		-ms-transition:margin-left .3s ease-in-out;
		-o-transition:margin-left .3s ease-in-out;
		transition:margin-left .3s ease-in-out;
	}
	
	.one_fourth .tabs > li.current a {margin-left:0;}
	
	.one_fourth .tabs > li.current a:before {
		right:-20px;
		bottom:0;
		left:auto;
		width:20px;
		height:100%;
	}
	
	.one_fourth .tab .tab_content {border:1px solid #ebecec;}
	
	.one_fourth .widget_custom_posts_tabs_entries .tabs > li {width:100%;}
	
}