/*
Theme Name: Zinpho
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

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:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Basic Structure
 * 4.0 - Header
 *   4.1 - Site Header
 *   4.2 - Navigation
 * 5.0 - Content
 *   5.1 - Entry Header
 *   5.2 - Entry Meta
 *   5.3 - Entry Content
 *   5.4 - Galleries
 *   5.5 - Post Formats
 *   5.6 - Attachments
 *   5.7 - Post/Paging Navigation
 *   5.8 - Author Bio
 *   5.9 - Archives
 *   5.10 - Search Results/No posts
 *   5.11 - 404
 *   5.12 - Comments
 *   5.13 - Multisite
 * 6.0 - Sidebar
 *   6.1 - Widgets
 * 7.0 - Footer
 * 8.0 - Media Queries
 * 9.0 - Print
 * ----------------------------------------------------------------------------
 */


/**
 * 1.0 Reset
 *
 * Modified from Normalize.css to provide cross-browser consistency and a smart
 * default styling of HTML elements.
 *
 * @see http://git.io/normalize
 * ----------------------------------------------------------------------------
 */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	/* border-collapse: collapse; */
 	border-spacing: 0;
 }
 
 
a:focus {
    outline: none;
}

html { 

  height:100%;
}


body{
font-family: 'Droid Sans', sans-serif;
font-size:14px;
margin:0px;
padding:0px;
color:#787878;
line-height:20px;
height:100%;
overflow-y: scroll;
}



body#home{
  background: url(../images/bg/home.jpg) no-repeat center right fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}




body#about{
  background: url(../images/bg/home.jpg) no-repeat center right fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
  

body#team{
  background: url(../images/bg/home.jpg) no-repeat center right fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
  

body#resources{
  background: url(../images/bg/home.jpg) no-repeat center right fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
  

body#contact{
  background: url(../images/bg/home.jpg) no-repeat center right fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
p a{ color:#787878;text-decoration:underline; }
p a:link{ color:#787878;  }
p a:visited{ color:#787878;  }
p a:active{ color:#787878;  }
p a:hover{ color:#204079; border-bottom:0px solid #787878; }

  
a{ color:#787878;text-decoration:none; }
a:link{ color:#787878;  }
a:visited{ color:#787878;  }
a:active{ color:#787878;  }
a:hover{ color:#204079; border-bottom:0px solid #787878; }

a.no-color{ color:#ffffff;text-decoration:none; }
a.no-color:link{ color:#ffffff;  }
a.no-color:visited{ color:#ffffff;  }
a.no-color:active{ color:#ffffff;  }
a.no-color:hover{ color:#d57359; border-bottom:0px solid #787878; }




h1{
font-family: 'Gerogia', serif;
font-size:22px;
margin:0px 0px 40px 0px;
padding:0px 0px 0px 0px;
color:#454545;
line-height:24px;
font-weight:400;
text-transform:uppercase;
letter-spacing:0px;
}





h2{
font-size:14px;
margin:20px 0px 10px 0px;
padding:0px 0px 10px 0px;
color:#204079;
line-height:20px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
border-bottom:1px solid #dedede;
}


h3{
font-size:14px;
margin:30px 0px 0px 0px;
padding:0px 0px 0px 0px;
color:#454545;
line-height:24px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
}






ul.bullet{
margin:0px 0px 0px 20px;
}

ul.bullet li { list-style-type: square; padding:3px 0px;}


.italics{
font-style:italic;
}



.gray{
color:#a1a1a1;
}

p{
margin:0px;
padding:7px 0px 7px 0px;
}

img{
border:0px;
margin:0px;
padding:0px;
}

.clear {clear:both;}

header{
width:100%;
height:100px;
background-color:#ffffff;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
margin-bottom:100px;
}


header .content{
width:980px;
margin:0px auto;
text-align: center;
}


header .content #logo{
float:left;
margin:10px 0px 0px 0px;
}

header .content nav{
float:right;
}

nav.large{display:block;}
nav.small{display:none;    text-align:center;}

nav{
text-transform:uppercase;
font-size:12px;
    list-style:none;
    margin-bottom:10px;
    float:left; /* Clear floats */
    position:relative;
    z-index:5;
    text-align:left;
    margin-top:64px;
}


nav li{
    float:left;
    margin-right:0px;
    position:relative;
}
nav a{
    display:block;
    padding:8px 8px 8px 8px;
    background:#ffffff;
    text-decoration:none;
    width:100px;
    text-align:center;
}

nav a.email{
    width:270px;
    margin-left:-70px;
}


	
nav a:hover{
    color:#787878;
    background:#ffffff;
    text-decoration:none;
}

/*--- DROPDOWN ---*/
nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
nav ul li{
font-size:11px;
line-height:15px;
    padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
    border-bottom:1px solid #dedede;
}
nav ul li:last-child{
    border-bottom:0px solid #dedede;
}
nav ul a{
    text-align:left;
}
nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}

nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#ffffff;
    text-decoration:none;
}
nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#f4f4f4;
}



nav.small{
width:100%;
background-color:#ffffff;
border-top:1px solid #dedede;
}
	


nav.small a{
display:inline;
float:left;
padding:8px 10px 8px 10px;
background:#ffffff;
text-decoration:none;
width:16.666666%;
text-align:center;
border-left:1px solid #dedede;

}

nav.small a:first-child{
border-left:0px solid #ff0000;
}


nav.small a:hover{
    text-decoration:none;
    background:#f4f4f4;
}
		

#main{
width:100%;
padding:0px 0px 0px 0px;
background-color:#ffffff;
text-align:left;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
}



#main .content{
width:980px;
margin:0px auto;
padding:0px 0px 70px 0px;
}


#main .content .left{
float:left;
width:20%;
margin-right:5%;
 margin-top:50px;
}

#main .content .right{
float:right;
width:75%;
 margin-top:50px;
 padding-right:10px;
}


#side-nav { width: 100%;}

#side-nav ul
{
font-size:14px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#side-nav a
{
display: block;
padding: 8px 10px 8px 10px;
width: 100%;
background-color: #ffffff;
}

#side-nav ul a#current{
font-size:15px;
color: #204079;
}



#side-nav ul li{
    border-top:1px solid #dedede;
}

#side-nav ul li:last-child{
    border-bottom:1px solid #dedede;
}


#side-nav a:link, #side-nav a:visited
{
text-decoration: none;
}

#side-nav a:hover
{
background-color: #f4f4f4;
color: #787878;
}




#info{
width:420px;
}

#info .row{
margin-bottom:0px;

}
 
#info .row .field{
float:left;
width:60px;
text-align:right;
font-weight:400;
font-size:11px;
}

#info .row .info{
float:left;
width:330px;
padding-left:20px;
margin-left:20px;
border-left:1px solid #dedede;
padding-bottom:10px;
font-weight:400;
}

#info .row .info.last{
padding-bottom:0px;
}




#footer{
font-size:9px;
line-height:14px;
width:100%;
color:#dedede;
left:0px;
bottom:0px;
padding:0px 0px 0px 0px;
background-color:#232323;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
}


#footer.home{
position:fixed;
}



#footer  .content{
width:960px;
margin:0px auto;
padding:10px 0px 10px 0px;
}


#footer .content .left{
float:left;
width:49%;
text-align:left;
}

#footer .content .right{
float:right;
width:49%;
text-align:right;
}



#footer .content .right a{
padding-left:20px;
}


@media all and (max-width: 980px) {




	header{
	height:123px;
	}


	header .content{
	width:100%;
	margin:0px auto;
	}


	
	header .content #logo{
	float:none;
	width:200px;
	height:60px;
	margin:10px 0px;
	}

	header .content nav{
	float:none;
	margin:0px auto;
	}
	
 
	
	nav.large{display:none;}
	nav.small{display:block;} 
	

	
	#main{
	float:none;
	width:100%;
	min-width:240px;
	margin:0px auto 0px;
	padding:0px 0px 0px 0px;
	position:relative;
	bottom:auto;
	right:auto;
	}
	
	#main .content{
	width:100%;
	margin:0px auto;
	padding:0px 0px 20px 0px;
	}
	

	body#home #footer{
	position:absolute;
	left:0px;
	bottom:0px;
	margin:0px 0px;
	padding:0px 0px 0px 0px;
	}	
	
	#footer{
	float:none;
	width:100%;
	min-width:240px;
	margin:0px auto 0px;
	padding:0px 0px 0px 0px;
	position:absolute;
	bottom:0px;
	right:0px;
	}
	
	#footer .content{
	width:100%;
	margin:0px auto;
	padding:10px 10px 10px 10px;
	}
	

}


@media all and (max-width: 860px) and (min-width: 761px) {





}

@media all and (max-width: 760px) {




}


@media all and (max-width: 600px) {



	header{
	height:103px;
	}


	header .content{
	width:100%;
	margin:0px auto;
	}


	
	header .content #logo{
	float:none;
	width:133px;
	height:40px;
	margin:10px 0px;
	}
	
	
	#main .content .left{
	float:left;
	width:100%;
	margin-right:5%;
	margin-top:0px;
	}

	#main .content .right{
	float:right;
	width:100%;
	margin-top:00px;
	padding:10px 10px 10px 10px;
	}


	#side-nav ul
	{
	text-align:center;
	margin-bottom:20px;
	}




	#info{
	width:100%;
	}

	#info .row{
	margin-bottom:0px;

	}

	#info .row .field{
	width:100%;
	float:none;
	text-align:left;
	font-weight:400;
	font-size:11px;
	}

	#info .row .info{
	width:100%;
	float:none;
	padding-left:0px;
	margin-left:0px;
	border-left:0px solid #dedede;
	padding-bottom:10px;
	font-weight:400;
	}

	#info .row .info.last{
	padding-bottom:0px;
	}




	#footer{
	float:none;
	width:100%;
	min-width:240px;
	margin:0px auto 0px;
	padding:0px 0px 0px 0px;
	position:static;
	bottom:0px;
	right:0px;
	}
	

	#footer .content .left{
	float:none;
	width:94%;
	text-align:center;
	margin:0px auto;
	border-bottom:1px solid #454545;
	padding:10px 0px 15px 0px;
	}

	#footer .content .right{
	float:none;
	width:94%;
	text-align:center;
	margin:0px auto;
	padding:15px 0px 5px 0px;
	}



	#footer .content .right a{
	padding-left:20px;
	padding-right:20px;
	}




	
}


@media all and (max-width: 400px) {



	
}