/* CSS TABLE OF CONTENTS
=====================================
	#BASE CSS
	#SITE-SPECIFIC CSS
===================================== */ 


/* 
========== BASE CSS ===========
*/

/* BASE CSS (Initital Base Setup)
Description: "Base" css is an initial set of core
styles that can be used (and reused) as a start 
for most sites. It should be placed at the top so
it can be over-written by site-specific styling
below. 
=====================================
	#RESET
	#HTML5
	#BASE TYPOGRAPHY
		#BODY
		#HEADINGS
		#PARAGRAPHS
		#LINKS
		#LISTS
	#IMAGES
	#CLEARFIX
===================================== */


/* #RESET */  
* {
	margin: 0;
	padding: 0;
}

/* #HTML5 */
header, section, footer, aside, nav, article, figure {
	display: block;
}

/* #BASE TYPOGRAPHY */

/* #BODY  ==============*/
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%; /* 1em = 16px */
	line-height: 1.5em; /* 16px x 1.5em = 24px */
	color: #333;
}

/* #HEADINGS Scale: 48, 36, 24, 21, 18, 16 */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: .5em;
}
h1 {
	font-size: 3em; /* 48px / 16px = 3em */
	line-height: 1em; 
}
h2 {
	font-size: 2.25em; /* 36px / 16px = 2.25em */
	line-height: 1.1em;
}
h3 {
	font-size: 1.5em; /* 24px / 16px = 1.5em */
	line-height: 1.2em;
}
h4 {
	font-size: 1.3125em; /* 21px / 16px = 1.3125em */
	line-height: 1.3em;
}
h5 {
	font-size: 1.125em; /* 18px / 16px = 1.125em */
	line-height: 1.4em;
}
h6 {
	font-size: 1em; /* 16px / 16px = 1em */
	line-height: 1.5em;
}

/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */

h1 {
    font: 33px sans-serif;
    margin-top: 30px;
	margin-bottom: 150px;
    text-align: center;
    text-transform: uppercase;
}

h1.background {
    position: relative;
    z-index: 1;
}
    
h1.background:before {
    border-top: 1px solid #000000;
    content:"";
    margin: 0 auto; 
    position: absolute; 
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

h1.background span { 
    /* to hide the lines from behind the text, you have to set
     the background color the same as the container */ 
     
     /* Yanone Font */
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.3em; /* made larger for Yanone font */
    background: #fff; 
    padding: 0 40px; 
}

#about_reiko p {
	font-family: 'Droid', sans-serif;
	text-align: left;
	color:#777; 
}

/* #Paragraphs ============== */
p { 
	margin-bottom: .5em; 
}

/* #Links ============== */
a { color: #39c; text-decoration: none; }
a:visited, a:hover, a:focus { color: #069; }

/* #Lists ============== */
ul, ol {
	margin-bottom: .5em;
}
ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}
li {
	/* Yanone Kaffeesatz */
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 1.4em; /* made larger for Yanone font */
	margin-left: 1.875em;
}

/* #Images ============== */
#top img.scale-with-grid {
	max-width: 300em;
	padding: 1em 0;
	/* max-width: 45%; */
	height: auto; 
}
img.scale-with-grid {
	max-width: 20%;
	height: auto; 
}
img.scale-with-grid {
	max-width: 100%;
	height: auto; 
}
a img {
	border: none;
}

/* #CLEARFIX ===================== */
.group:after {
  content: "";
  display: table;
  clear: both;
}
/* 
====== END BASE CSS =======
*/

/* 
===== BEGIN SITE- SPECIFIC CSS ======
*/
   
/* SITE-SPECIFIC CSS (Site-Specific Design)
Description: "Site-specific" css is where all
site-specific visual design styles. Site-specific
css should be placed on the bottom to 
override any base styling above it. 
=====================================
	#SITE-SPECIFIC BASE STYLING
	#SITE-SPECIFIC TYPOGRAPHY
	#LAYOUT/GRID
	#SECTIONS
	#MEDIA QUERIES
	#@FONT-FACE
===================================== */

/* SITE-SPECIFIC BASE STYLING
Description: Adjust general base settings above with 
site-specific styles here. 
(e.g. body background color)
===================================== */
/* SITE-SPECIFIC TYPOGRAPHY
Description: Adjust the base typography settings above 
with site-specific styles here. 
(e.g. headings, paragraphs, colors, etc.)
===================================== */
/* LAYOUT/GRID
Description: Place grid and visual layout styling here. 
(e.g. containers, rows, columns)
===================================== */
.container {
	/* Fixed width: 960px */
    width: 60em; /* 960px / 16px (base) = 60em  */
	margin: 0 auto;
}
section {
	padding: 6em 0;
}
.row { /* between rows of photos */
	margin: 0;
}
.column {
	float: left;
	margin: 0 1%;
}
.one-whole.column {	width: 96%; }
.one-half.column {	width: 48%; 
}
.one-half.column img {
	align:right;
/*	border: 1px solid red;*/ 
}
.one-third.column {	width: 29.3333%; }
.column.right {
	text-align: right;
}

/* SECTIONS
Description: Style major site sections here. 
(e.g. header, navs/navigation, site-specific content sections, 
asides, sidebars, footer, sub page-specific styling, etc.)
===================================== */

header {
	/*position: fixed;
	width: 100%;*/
	padding: .5em 0;
	background: #000;
}
header.stuck {
	position: fixed;
	width: 100%;
	top: 0; /* move to the top of page when it stucks */
	z-index: 100;
}
header a,
header a:visited, 
header a:focus  {
	color: #fff;
}
header .logo a {
	float: left;
	display: none;
}
header.stuck .logo a {
	display: inline;
}
header .logo a img {
	display: block;
	margin-right: 10px;
}
header .logo h1 {
	font-size: 1em;
	line-height: 1.4em;
	margin: 0;
	padding-top: .2em;
	white-space: nowrap;
}
#head_logo {
	background: #fff;
	margin: 0;
	padding:0;
}

	/* Logo max-width goes 50% */
	#top img {
		max-width: 50%;
		height: auto; 
	}
	
	#about_APURI" {	margin-top: 50px;}
	
#mainnav {
	float: right;
}
#mainnav ul {
	text-align: right;
	margin: 0;
}
#mainnav ul li {
	display: inline-block;
	margin: 0;
}
#mainnav ul li a {
	display: inline-block;
	padding: 0 1em;
}
#mainnav ul li a:hover {
	color: #ccc;
}
/*added for under line of selected on 1202*/
#mainnav ul li a:active {
	/*border-bottom:0.2em solid #fff;*/
	border-bottom: 0.2em solid #fff;
}
#mainnav #menu {
    display: none;
    padding: 0 1.5em;
    cursor: pointer;
}
section h1 {
	text-align: center;
}
section p {
	text-align: center;
	padding-bottom: 10em;
}
section#about {
	background: #fff;
}
#about h2 {
	font-family: 'Playfair Display SC', sans-serif; /* this has no effects */
}
#about h3 {
	font-family: 'Droid Sans', sans-serif;
	font-size: 1.3em;
	line-height: 1.5em;
	margin: 2em 0 1em 0;
}
section#gallery {
	background: #fff;
}
#about_APURI h2, h3, p {
	text-align: center;
}
section#contact {
	background: #fff;
	padding-bottom: 0em;
	text- Centering
}
section#contact section {
	margin-bottom: 0em;
	padding-bottom: 0em;
}
section#contact p {
	font-family: 'Droid Sans', sans-serif;
	padding-bottom: 55em;
}
section#contact img {
	margin-bottom: 0;
	padding: 0;
}
footer {
	position: fixed;
	bottom:0;
	width: 100%;
	text-align: center;
	font-size: .8em;
	color: #fff;
	padding: .5em 0;
	background: #000;
	z-index: 100;
}
footer a,
footer a:visited, 
footer a:focus  {
	color: #fff;
}
#footernav ul {
	text-align: center;
	margin: 0;
}
#footernav ul li {
	display: inline-block;
	margin: 0;
}
#footernav ul li a {
	display: inline-block;
	padding: 0 1em;
}
#footernav ul li a:hover {
	color: #ccc;
}

/* MEDIA QUERIES
Description: Define screen-size breakpoints here.
(e.g. Desktop, Tablet, Mobile)
===================================== */

/* Tablet (Between 768px - 992px)*/
@media all and (min-width: 48em) and (max-width: 62em) {
	
	body {
		font-size: 93.75%; /* 15px */
	}
	.container {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	/* Logo max-width goes 100% */
	#top img {
		max-width: 100%;
		height: auto; 
	}
	/* Centering Gallery */
	#gallery img {
	}
}

/* MOBILE (Smaller than 768px)*/
@media all and (max-width: 47.9999em) {
	
	body {
		font-size: 87.5%; /* 14px */
	}
	.container {
		width: 96%;
		margin: 0;
		padding: 0 2%;
	}
	.column {
		float: none;
		margin: 0;
	}
	.one-whole.column,
	.one-half.column,
	.one-third.column {	width: 100%;
	}
	.column.right { text-align: left;
	}
    #mainnav #menu {
        display: block;
		color: #fff;
    }
	#mainnav ul {
        display: none;
        background: #666;
        padding: 1em;
        text-align: right;
    }
	#mainnav ul li {
        display: block;
    }
	#mainnav ul li a {
        display: block;
        padding: 0;
    }

	/* Logo max-width goes 100% */	
	#top img.scale-with-grid {
	max-width: 100%;
	height: auto; 
	}
}

/* @FONT-FACE (Webfonts)
===================================== */

/* 
====== END SITE- SPECIFIC CSS =======
*/