/* 
Theme Name: MAI
Theme URI: http://www.drewsymo.com
Description: A Responsive Starter Theme
Author: @FoundationZURB, @drewsymo
Author URI: 
Version: 3.0
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
*/

@import url("stylesheets/foundation.css");
@import url("stylesheets/app.css");
[if lt IE 9] @import url("stylesheets/ie.css");

small {
	font-size: 0.75em;
	}

.left {
	float: left;
	}

.right {
	float: right;
	}
	
.clear {
	clear: both;
	}

.container {
	padding: 0;
	margin: 0;
	}
		
	@media (max-width: 1200px) {
		
		.container {
			width: 100%;
			}
		
		}
		
	@media (min-width: 1200px) {
	
		.container {
			max-width: 1200px;
			margin: 0 auto;
			}
			
		}
	
	#masthead {
		background-color: #f9f9f9;
		border-bottom: 1px solid #ddd;
		padding-top: 20px;
		}
		
		#masthead.with-slideshow {
			padding-bottom: 40px;
			}
		
		#masthead #logo {
			text-indent: -9999px;
			background-image: url('images/mai/mai.png');
			background-size: 211px 50px;
			width: 211px;
			height: 50px;
			}
			
			@media (max-width: 800px) {
				
				#masthead #logo {
					margin: 10px auto 25px auto;
					text-align: center;
					}
				
				}
			
			@media (min-width: 800px) {
				
				#masthead #logo {
					margin: 10px 35px 35px 35px;
					float: left;
					}
				
				}
		
		#masthead nav {
			font: 12px/20px "galette",verdana,sans-serif;
			text-transform: uppercase;
			}
			
			@media (max-width: 800px) {
				
				#masthead nav {
					margin: 0 auto 20px auto;
					padding: 0 20px;
					text-align: center;
					}
					
					#masthead nav ul li {
						margin-bottom: 10px;
						}
				
				}
			
			@media (min-width: 800px) {
				
				#masthead nav {
					width: 60%;
					float: right;
					}
					
					#masthead nav ul {
						float: right;
						}
				
				}
			
			#masthead nav ul {
				margin: 0 10px;
				letter-spacing: 1px;
				}
				
				#masthead nav ul li {
					display: inline-block;
					}
				
				@media (max-width: 800px) {
				
					#masthead nav ul#meta {
						margin: -8px 0 15px 0;
						}
						
					}
					
				@media (min-width: 800px) {
				
					#masthead nav ul#meta {
						margin: 10px 0;
						}
				
					}
				
					#masthead nav ul#meta a, #masthead nav ul#meta a:visited {
						color: #333;
						text-decoration: none;
						padding: 9px;
						}
						
						#masthead nav ul#meta a:hover, #masthead nav ul#meta a:focus {
							color: white;
							}
					
					#masthead nav ul#meta li#social-media {
						margin: 0 20px;
						}

					    
					    #masthead nav ul#meta li#social-media a {
						    padding: 0;
						    display: inline-block;
						    width: 23px;
						    height: 23px;
						    text-indent: -9999px;
						    overflow: hidden;
					    	}
					
							#masthead nav ul li#social-media a+a {
							    margin-left: 5px;
							    }
							    
							#masthead nav ul li#social-media a#twitter {
								background: url('images/mai/button_tw.png') top;
								background-size: 23px 46px;
								}
								
								#masthead nav ul li#social-media a#twitter:hover, #masthead nav ul li#social-media a#twitter:focus {
									background-position: bottom;
									}
								
							#masthead nav ul li#social-media a#facebook {
								background: url('images/mai/button_fb.png') top;
								background-size: 23px 46px;
								}
								
								#masthead nav ul li#social-media a#facebook:hover, #masthead nav ul li#social-media a#facebook:focus {
									background-position: bottom;
									}
								
							#masthead nav ul li#social-media a#google {
								background: url('images/mai/button_gp.png') top;
								background-size: 23px 46px;
								}
								
								#masthead nav ul li#social-media a#google:hover, #masthead nav ul li#social-media a#google:focus {
									background-position: bottom;
									}
									
							#masthead nav ul li#social-media a#rss {
								background: url('images/mai/button_rss.png') top;
								background-size: 23px 46px;
								}
								
								#masthead nav ul li#social-media a#rss:hover, #masthead nav ul li#social-media a#rss:focus {
									background-position: bottom;
									}
			
				#masthead nav ul#main {
					clear: right;
					}
						
					#masthead nav ul#main a, #masthead nav ul#main a:visited {
						color: #333;
						text-decoration: none;
						padding: 9px;
						}
						
						#masthead nav ul#main a:hover, #masthead nav ul#main a:focus {
							background-color: #f1f1f1;
							color: black;
							}
	
		#carousel {
			width: 100%;
			clear: both;
			}
			
			#carousel img {
				width: 100%;
				height: auto;
				display: none;
				}

			#carousel.orbit {
				background: none;
				}
			
			#carousel.orbit img {
				display: block;
				}
				
			.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
			
			.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
			
			    .orbit-caption {
				    font-size: 12px; 
				    text-align: left !important;
				    padding: 30px 0 !important;
				    left: 0;
				    }
			    
			    .orbit-caption h2 {
				    font: 18px/20px "galette",verdana,sans-serif;
				    margin-bottom: 5px;
				    }
				    
				    
			    .orbit-caption h2, .orbit-caption p {
				    margin: 0 35px;
				    }
				    
				    .orbit-caption h2 {
					    margin-bottom: 10px;
					    }
					    
					.orbit-caption a h2, .orbit-caption a:visited h2, .orbit-caption p a, .orbit-caption p a:visited {
					    color: white;
				    	}
				    	
				    	.orbit-caption a:hover, .orbit-caption p a:hover {
					    	text-decoration: none;
					    	}
			
				@media (max-width: 640px) {
					
					.orbit-wrapper .slider-nav {
						display: none;
						}
						
					.orbit-caption {
						padding: 10px 0 !important;
						}
						
						.orbit-caption h2, .orbit-caption p {
							margin: 0 20px;
							}
							
							.orbit-caption h2 {
								margin-bottom: 5px;
								}
					
					}
		
		ul#features {
			margin-bottom: 10px;
			}
			
			/* Clearfix */
			ul#features:after {
			    content: ".";
			    display: block;
			    height: 0;
			    clear: both;
			    visibility: hidden;
		    	}
			
			@media (max-width: 640px) {
				
				ul#features {
					padding: 35px 20px 0 20px;
					}
				
				}
				
			@media (min-width: 640px) {
				
				ul#features {
					padding: 35px 35px 0 35px;
					}
				
				}
			
			ul#features li {
				display: block;
				float: left;
				margin-bottom: 35px;
				}
				
				@media (max-width: 400px) {
					
					ul#features li {
						width: 100%;
						}
					
					}
				
				@media (min-width: 400px) {
					
					ul#features li {
						width: 48%;
						}
						
						ul#features li.even {
							margin-left: 4%;
							}
					
					}
					
				@media (min-width: 800px) {
					
					ul#features li {
						width: 22%;
						}
						
						ul#features li+li {
							margin-left: 4%;
							}
					
					}

				
				ul#features li img {
					width: 100%;
					height: auto;
					border-radius: 4px;
					}
					
				ul#features li h4 {
					font: 11px/20px verdana,sans-serif;
					color: #aaa;
					text-transform: uppercase;
					text-align: center;
					margin: 5px 0;
					}
					
					ul#features li h4 a, ul#features li h4 a:visited {
						color: #aaa;
						}
						
						ul#features li h4 a:hover {
							text-decoration: none;
							color: #39B54A;
							}
					
				ul#features li h3 {
					font: 600 18px/20px "galette",verdana,sans-serif;
					margin: 0 20px 10px 20px;
					text-align: center;
					color: black;
					}
					
					ul#features li h3 a {
						color: black;
						}
						
						ul#features li h3 a:hover {
							text-decoration: none;
							color: #39B54A;
							}
					
				ul#features p {
					font: 12px/20px verdana,sans-serif;
					padding: 0 10px;
					}
	
	#content {
		}
		
		@media (max-width: 640px) {
			
			#content {
				padding: 10px 20px;
				}
			
			}
			
		@media (min-width: 640px) {
			
			#content {
				padding: 20px 35px;
				}
			
			}
		
		#content:after {
			content: ".";
		    display: block;
		    height: 0;
		    clear: both;
		    visibility: hidden;
			}
			
		#content h4 {
			font: 400 11px/20px verdana,sans-serif;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: grey;
			margin-bottom: 30px;
			}
		
		#blog {
			float: left;
			font: 400 12px/20px verdana,sans-serif;
			}
			
			.page #blog {
				padding-top: 10px;
				}
			
			@media (max-width: 640px) {
				
				#blog {
					width: 100%;
					}
				
				}
			
			@media (min-width: 640px) {
			
				#blog {
					width: 74%;
					}
			
				} 
			
			@media (min-width: 1000px) {
				
				#blog {
					width: 52%;
					}
				
				}
			
			#blog article {
				position: relative;
				margin-top: 15px;
				}
				
				#blog article h4 {
					font: 400 11px/20px verdana,sans-serif;
					letter-spacing: 1px;
					text-transform: uppercase;
					margin: 30px 0 10px 0;
					font-weight: bold;
					color: #333;
					}
				
				#blog article h5 {
					font-weight: bold;
					margin: 30px 0 10px 0;
					}
				
				#blog article+article {
					margin-top: 50px;
					}
				
				#blog article h5.article-category {
					font: 400 11px/20px verdana,sans-serif;
					letter-spacing: 1px;
					text-transform: uppercase;
					color: grey;
					margin-bottom: 5px 0;
					}
					
					#blog article h5.article-category a, #blog article h5.article-category a:visited {
						color: grey;
						}
						
					#blog article h5.article-category a:hover {
						text-decoration: none;
						color: #39B54A;
						}
			
				#blog article h3 {
					font: 600 28px/35px "galette",verdana,sans-serif;
					}
					
					@media (max-width: 1200px) {
						
						#blog article h3 {
							width: 142%;
							}
						
						}
						
					@media (max-width: 1000px) {
						
						#blog article h3 {
							width: 100%;
							}
						
						}
					
					#blog article h3 a {
						color: black;
						}
						
						#blog article h3 a:hover, #blog article h3 a:focus {
							color: #39B54A;
							text-decoration: none;
							}
					
				#blog article .article-date {
					color: gray;
					margin: 5px 0 20px 0;
					}
					
				#blog article .article-meta {
					border-left: 1px dotted #ddd;
					padding-left: 10px;
					color: grey;
					}
					
					@media (max-width: 1000px) {
						
						#blog article .article-meta {
							margin: 20px 0;
							}
						
							#blog article .article-meta ul li.article-author, #blog article .article-meta ul li.article-tags {
								display: inline;
								}
								
								#blog article .article-meta ul li.comment-count {
									margin: 0;
									}
									
								#blog article .article-meta ul li.article-blog:after {
									content: ",";
									}
						
					}
					
					@media (min-width: 1000px) {
					
						#blog article .article-meta {
							position: absolute;
							left: 107.69%;
							width: 25%;
							}
													
						}
				
					#blog article .article-meta .article-category {
						letter-spacing: 1px;
						text-transform: uppercase;
						color: grey;
						}
					
				#blog article img {
					width: 100%;
					height: auto;
					}
					
					#blog article img.auto {
						width: auto;
						height: auto;
						}
					
				#blog article p.caption {
					margin-top: -20px;
					font: 11px/20px verdana,sans-serif;
					}
					
				#blog article p, #blog article img, #blog article iframe, #blog article iframe object, #blog article embed {
					margin-bottom: 20px;
					}
					
					#blog article p img {
						margin: 0;
						}
						
				#blog article .entry ul, #blog article .entry ol {
					margin: 0 0 20px 20px;
					}
					
					#blog article .entry ul {
						list-style: disc;
						}
						
					#blog article .entry ol {
						list-style: decimal;
						}
						
				#blog article.page .entry {
					padding-top: 40px;
					}
					
					#blog article.page .entry h4:first-child {
						margin-top: 0;
						}
				
				#blog article table td {
					padding: 5px;
					}
				
				#blog article .entry {
					margin-bottom: 30px;
					}
					
					#blog article .entry blockquote, #blog article .entry pre {
						margin: 0 0 20px 10px;
						padding-left: 10px;
						border-left: 2px solid #ddd;
						}
						
						#blog article .entry code {
							font: 12px/20px courier,monospace;
							}
						
					#blog article.single .entry {
						padding-bottom: 20px;
						border-bottom: 1px dotted #ccc;
						}
						
				#blog article hr {
					margin-bottom: 20px;
					}
						
				fieldset legend {
					margin-bottom: 20px;
					}
					
				.comment-count {
					margin: 10px 0;
					}
				
				.comment {
					margin-bottom: 20px;
					}
					
					.comment-meta {
						color: #999;
						}
					
					.comment-author {
						font-weight: bold;
						}
					
						.comment-author img {
							display: none;
							}
					
					.comment-content p+p {
						margin-top: 20px;
						}
						
					#comments-list h4, #comments-list h4.subheader, #trackbacks-list h3, #trackbacks-list h3.subheader {
						margin: 20px 0;
						font: 400 11px/20px verdana,sans-serif;
						letter-spacing: 1px;
						text-transform: uppercase;
						color: grey;
						}
						
					#trackbacks-list ol li, #comments-list ol li {
						margin-bottom: 40px;
						}
						
					#form-allowed-tags p {
						font: 400 11px/20px verdana,sans-serif;
						margin: 20px 0;
						}
		
		#blog ol.wp-paginate {
			margin: 65px 0 35px 0;
			}
			
			#blog ol.wp-paginate .page, #blog ol.wp-paginate .next, #blog ol.wp-paginate .prev {
				background-color: #f3f3f3;
				color: #333;
				border: none;
				}
				
				#blog ol.wp-paginate .page:hover, #blog ol.wp-paginate .next:hover, #blog ol.wp-paginate .prev:hover {
					background-color: #dddddd;
					}
				
				#blog ol.wp-paginate .page.current {
					background-color: #39B54A;
					color: #fff;
					border: none;
					}
		
		#sidebar {
			font: 12px/20px verdana,sans-serif;
			padding-top: 15px;
			}
			
			.page #sidebar {
				padding-top: 10px;
				}
			
			@media (max-width: 640px) {
				
				#sidebar {
					width: 100%;
					}
				
				}
			
			@media (min-width: 640px) {
				
				#sidebar {
					width: 22%;
					float: right;
					}
					
				}
				
			#sidebar ul.menu li {
				margin-left: 10px;
				text-indent: -10px;
				}
				
			#sidebar h4 {
				margin: 30px 0 10px 0;
				}
			
			#sidebar h5 {
				font: 400 11px/20px verdana,sans-serif;
				letter-spacing: 1px;
				color: #bbb;
				}
				
			#sidebar form {
				}
				
				#sidebar .formfield {
					margin-bottom: 5px;
					-webkit-appearance: textfield;
					}
			
				#sidebar .formbutton {
					margin-top: 5px;
					}
				
			@media (max-width: 640px) {
		    	
		    	#sidebar ul li {
		    		float: left;
		    		width: 90%;
		    		}
		    		
		    		#sidebar ul li li {
			    		position: relative;
			    		width: 100%;
			    		margin: 0;
		    			}
		    	
		    	}
		    	
		    @media (min-width: 640px) {
		    	
		    	#sidebar ul {
		    		border-left: 1px dotted #ccc;
		    		padding: 0 20px 20px 10px;
		    		}
		    		
		    		#sidebar ul ul {
			    		border: 0;
			    		padding: 0;
			    		}
		    	
		    	}
		    	
		    .widget_latest_twitter_widget { 
		   		padding: 0 !important;
		   		}
		   		
			.latest-twitter-tweet {
				font-style: normal !important;
				margin-bottom: 0 !important;
				}
				
			#latest-twitter-follow-link {
				text-align: left !important;
				}
				
			.latest-twitter-tweet-time {
				margin-bottom: 20px !important;
				line-height: 20px !important;
				}
			
	#footer {
		background-color: #222;
		}
		
		#footer nav {
			}
			
			@media (max-width: 640px) {
			
				#footer nav {
					padding: 20px;
					}
					
				}
				
			@media (min-width: 640px) {
				
				#footer nav {
					padding: 20px 40px 30px 40px;
					}
				
				}
				
			#footer nav ul {
				margin-bottom: 20px;
				float: left;
				font: 400 11px/20px verdana,sans-serif;
				}
				
				#footer nav ul li {
					padding: 0 50px 0 10px;
					text-indent: -10px;
					}
				
				@media (max-width: 640px) {
				
					#footer nav ul {
						width: 50%;
						}
					
					}
				
				@media (min-width: 640px) {
					
					#footer nav ul {
						width: 25%;
						}
					
					}
			
			#footer nav h4 {
				color: #777;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding-right: 50px;
				}
				
				#footer nav h4 a, #footer nav h4 a:visited {
					color: #777;
					}
			
			#footer nav a, #footer nav a:visited {
				color: #555;
				}
			
		#footer #copyright {
			clear: both;
			color: #555;
			text-align: left;
			font: 11px/20px verdana,sans-serif;
			padding-top: 20px;
			}