/* Stylesheet to allow mobile styling 
 * Author: Paul Combrink
 * Compatible with Clean Style One 
 * Inspired by WordPress Twenty Thirteen
 * Date: 30 December 2013
 */
 
 
/* --------- Structure --------- 

#wrappper {}
  #container {}
	  #top {}
		#top table td { display:block}
		#logo {}
		#header_widget { display: none;}
	#menu {}
	  #menu ul {}
	  #menu ul li {}
	#header {}
	#main {}
	  #main table {}
	  #leftbar {}
	  #content {}
	  #rightbar {}
	  
	#footer {}
*/	
 
 
 
/* ============== Enhancements  ============== */
h1, h2, h3, h4, h5, h6, p, li, a, span, input, label, time {
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}


/* Sticky class */
.sticky {  
	position: fixed;  
	width: 100%;  
	left: 0;  
	top: 0;  
	z-index: 100;  
	border-top: 0;  
}  


#top-link  {
	position: fixed;
	bottom: 1em;
	right: 1em;
	text-decoration: none;
	color: white;
	background-color: rgba(0,0,0,0.3);
	font-size: 90%;
	padding: 0.6em;
	display: none;
	font-family: sans-serif;
	border-radius: 2px;
	}
#top-link:hover {background-color:rgba(0,0,0,0.6);}

/* ============================ Toggle menu (General settings)  ============================ */

/* Assistive text */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

.menu-toggle {
	display: none;
}

/* --- Setting submenu toggle styles just in case it displays on desktop view --- */

.nav-menu .sdrn_icon_par:before {
	content:"\25BE";
}
	
.nav-menu .sdrn_par_opened:before {
	content:"\25BF";
}
	
.nav-menu .sdrn_icon_par {
	display: inline;
	color: #CFCFCF;
	cursor: pointer;
	float: right;
	clear: none;
	width: 10px;
}

.nav-menu .sdrn_parent_item_li {
	padding-right: 10px;
}

.nav-menu .sdrn_parent_item_li a{
	padding-right: 10px;
}

.nav-menu .sub-menu .sdrn_parent_item_li .sdrn_icon_par {
	float: left;
}

.nav-menu .sub-menu .sdrn_parent_item_li {
	padding-left: 10px;
	background-image: none;	
}

.nav-menu .sub-menu .sdrn_parent_item_li a{
	padding-left: 10px;
}

#menu .sub-menu li.sdrn_parent_item_li:hover {
	background-position: -30px;
	background-image: none;
}

#menu .sub-menu li.sdrn_parent_item_li a:hover {
	font-style: italic;
}

/* /------ end setting submenu toggle styles ------ */


/* ============================ iPad / Large tablet - Portrait  ============================ 
 * This typically sizes for devices size 768 x 1024
 */
 
@media (max-width: 979px) {
/* ---------- General reset ------- */
	img { max-width: 100%; height:auto; }
	iframe { max-width:100%; }
	
	
/* ---------- Structure ------- */	

	#container {
		margin: 0px auto;
		height: 100%;
		width: 98%;
		text-align: left;
		padding-right: 1%;
		padding-left: 1%;
	}

	  #leftbar { padding-left: 5px;}
	  #content { padding: 5px; }
	  #rightbar { padding-right: 5px;}	
	
	
/* ---------- Reset border, padding and margins on gallery items reset ------- */	
	
	img[class*="align"], img[class*="wp-image-"], 
	#content .gallery .gallery-icon img {
		border: 1px solid #ddd;
		padding: 2px;
		margin-right:0px;
	}	

	#content .gallery-columns-2.gallery-size-thumbnail .gallery-item { width:48% }
	#content .gallery-columns-3.gallery-size-thumbnail .gallery-item { width:30% }
	#content .gallery-columns-4.gallery-size-thumbnail .gallery-item { width:23% }
	#content .gallery-columns-5.gallery-size-thumbnail .gallery-item { width:18% }


	#content .gallery-item { margin-right: 2%; }


}


/* ============================ General tablet  ============================ 
 * This typically sizes for devices sizes 
 * Small tablet: 480 x 640
 * Samsung S4 mini: 540 x 960
 * Samsung S3 720 x 1280
 * iPhone 4: 640 x 960
 */


@media (max-width: 767px) {
	
	#container {
		margin: 0px auto;
		height: 100%;
		width: 100%;
		text-align: left;
		padding-right: 0%;
		padding-left: 0%;
	}
	
	
	#leftbar { width: 100%; margin: 0px; padding: 0px; clear:both;  border: none;}
	#leftbar .leftSideBar { width: 96%; padding: 2%; clear:both; }
	
	#rightbar { width: 100%; margin: 0px; padding: 0px; clear:both;  border: none;}
	#rightbar .rightSideBar { width: 96%; padding: 2%; clear:both; }
	
	#footer { width: 98%; display: block; clear: both; float: none; text-align: center; padding-right: 1%;padding-left: 1%;}
	#footer div { width: 100%; display:block; clear:both; float:none; text-align:center;}
	
		

	/* Collapse oversized image and pulled images after iPad breakpoint. */
	.entry-content img.alignleft,
	.entry-content .wp-caption.alignleft {
		margin-left: 0;
	}

	.entry-content img.alignright,
	.entry-content .wp-caption.alignright {
		margin-right: 0;
	}

	.attachment .image-navigation,
	.attachment .entry-attachment .attachment {
		max-width: 604px;
		padding: 0;
		width: 100%;
	}

	.gallery-caption {
		display: none;
	}
	
	/* reset tables in the top section */
	/* Force table to not be like tables anymore */
	#main table,
	#main thead,
	#main tbody,
	#main th,
	#main td,
	#main tr {
		display: block;
	}


}




/* ==================== Mobile devices ==================== */
@media (max-width: 480px) {

	iframe { max-width:100%;}
	
	#logo {
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
		width: calc(100% - 20px);					
		text-align: center;
	} 
	
	#site-description {
		font-size: 100%;
		color: #999;
		height: auto;
		vertical-align: middle;
		padding: 0%;
		margin: 0px;
	}	
	
	/* reset tables*/
	/* Force table to not be like tables anymore */
	#top table,
	#top thead,
	#top tbody,
	#top th,
	#top td,
	#top tr {
		display: block;
	}
	
	
	/* Gallery */
	
	#content .gallery .gallery-icon img { /*reset padding */
	padding: 0px;
	margin:0px;	
	}
	
	#content .gallery-columns-3.gallery-size-thumbnail .gallery-item {
		max-width: none;
		width: 47%;
		width: -webkit-calc(47% - 4px);
		width:         calc(47% - 4px);
	}
	
	#content .gallery-columns-3.gallery-size-thumbnail .gallery-item {
	padding: 2px;
	margin: 2px;
	}
	
	
	
	.gallery {
		margin-left: 0;
	}

	.gallery .gallery-item,
	.gallery-columns-2.gallery-size-thumbnail .gallery-item {
		max-width: none;
		width: 49%;
		width: -webkit-calc(50% - 4px);
		width:         calc(50% - 4px);
	}

	.gallery-columns-1.gallery-size-medium,
	.gallery-columns-1.gallery-size-thumbnail,
	.gallery-columns-2.gallery-size-thumbnail,
	.gallery-columns-3.gallery-size-thumbnail {
		display: block;
	}

	.gallery-columns-1 .gallery-item,
	.gallery-columns-1.gallery-size-medium .gallery-item,
	.gallery-columns-1.gallery-size-thumbnail .gallery-item {
		text-align: center;
		width: 98%;
		width: -webkit-calc(100% - 4px);
		width:         calc(100% - 4px);
	}

	.gallery-columns-3 .gallery-item:nth-of-type(3n),
	.gallery-columns-5 .gallery-item:nth-of-type(5n),
	.gallery-columns-7 .gallery-item:nth-of-type(7n),
	.gallery-columns-9 .gallery-item:nth-of-type(9n) {
		margin-right: 4px;
	}

	.gallery br {
		display: none;
	}

	.gallery .gallery-item:nth-of-type(even) {
		margin-right: 0;
	}

	/* Comments */
	.comment-author {
		margin: 0 0 5px;
		max-width: 100%;
	}

	.comment-author .avatar {
		display: inline;
		margin: 0 5px 0 0;
		max-width: 20px;
	}

	.comment-metadata,
	.comment-content,
	.comment-list .reply {
		width: 100%;
	}
				

		
} /* === END Mobile Devices === */