@charset "UTF-8";
/*
Hisako Garcia - Responive Template Liquid type - 4 to 5 nav menu CSS
Copyrights - higarcia.com
Creator: HG
July - 2013
-------------------------------------------------------------- */

/* Reset CSS for default browser
Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, 
font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, 
tbody, tfoot, thead, tr, th, td {
	border : 0;
	font-family : inherit;
	font-size : 100%;
	font-style : inherit;
	font-weight : inherit;
	margin : 0;
	outline : 0;
	padding : 0;
	vertical-align : baseline;
}

:focus {
	outline : 0;
	}

ol, ul {
	list-style : none;
}

table.table {
	border-collapse : separate;
	border-spacing : 0;
}

caption, th, td {
	font-weight : normal;
	text-align : left;
}

blockquote:before, blockquote:after,q:before, q:after {
	content : "";
}

blockquote, q {
	quotes : "" "";
}

a img{
	border : 0;
}

figure{
	margin : 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, 
nav, section {
	display : block;
}
/* -------------------------------------------------------------- */

/* Body and General Style 
----------------------------------------------------------------- */
body{
	background: url("images/main_bg.png") repeat-x scroll 0 0 #46c2ca;
    color: #d5f0ee;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 11px;
}

a{
	text-decoration : none;
	color : #533822;
}

a:hover{
	color : #fd9104;
}

.wrapper{
	margin : auto;
	width : 1200px;
	height : auto;
	background: url("images/shadow.png") no-repeat scroll 50% 26px transparent;
    height: 100%;
}


/* Top part - banner, logo, navigation menu
----------------------------------------------------------------- */
#top{
	height : 3%;
}

nav{
	clear : both;
	float : right;
	width : 400px;
	display : block;
	margin : 0px;
	
}

nav ul li{
	display : block;
	width : 25%;
	float : right;
	text-align : center;
	border-left : solid 1px #ffffff;
	box-shadow: 2px 2px 2px #cccccc;
}

nav ul li a{
	width : 90%;
	text-transform : uppercase;
	font-weight : 400;
	line-height : 250%;
	display : block;
}

#top #info{
	float:right;
	margin : 5px 0 0 0;
}

#top #info h2{
	font-size:120%;
}
#top #info h2 a{
	color:#ffffff;
	text-decoration:none;
}
#top #info h2 a:hover{
	color:#fd9104;
}

#top #info h2 .devider{
	color:#4a6e73;
	padding:0 10px 0 10px;
	text-shadow: 2px 2px #ffffff;
}


	
/*section breaker- separate section
----------------------------------------------------------------- */
hr{
	float : left;
	height : 1px;
	width : 100%;
	margin : 0;
}

header{
	float:left;
	margin : 10px 0 50px 600px;
	text-align : left;
}

header h1{
	font-size:18px;
	text-shadow: 2px 2px #6b401d;
}
#title {
	float:left;
	margin:50px 0 0 600px;
}
#title h1{
    font-family: 'Tangerine', serif;
    font-size: 60px;
    text-shadow: 4px 4px 4px #aaa;
}
#title h2{
	font-family: 'Cinzel', serif;
    font-size: 40px;
    text-shadow: 4px 4px 4px #aaa;
}


.clearfix {
	float : none;
	clear : both;
}

/*Home page main container 2 grid  
-----------------------------------------------------------*/
aside{
	margin-top : 2%;
	width : 48%;
	margin-bottom : 2%;
}

aside h3{
	font-size : 200%;
	text-align : left;
	color : #7b5435;
	padding : 0 0 0 20px;
	font-family: 'Cinzel', serif;
    text-shadow: 4px 4px 4px #aaa;
}

aside p{
	color:#000000;
	font-size : 150%;
	line-height : 150%;
	border : solid 1px #999999;
	padding : 20px;
	background-color:#ffffff;
	opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
	border-radius: 10px;
}
aside img{
	margin:10px 0 0 8px;
}

.left{	
	float : left;
}
	
.right{
	float : right;
}

/*Footer  
-----------------------------------------------------------*/
#footer{
	width : 100%;
	padding : 10px 0;
	background-color : #533822;
	color : #ffffff;	
}

#footer a{
	color : #ffffff;
	text-decoration : none;
}

#footer a:hover{
	color : #fd9104;
}

#footer nav{
	clear : both;
	float : left;
    width : 480px;
	margin : 0px;
}

#footer nav ul li{
	width : 23%;
	float : left;
	text-align : center;
	border:hidden;
	box-shadow:none;
}

#footer nav ul li a{
	width : 90%;
	text-decoration : none;
	text-transform : uppercase;
	font-weight : 200;
	line-height : 150%;
	color : #ffffff;
}

#footer nav ul li a:hover{
	color : #fd9104;
}
/* ----------------------------- FORM ----------------------------------- */
#form{
	clear:both;
	width:70%;
	display:block;
	margin:auto;
    color: #533822;
	font-family: 'Cinzel',serif;
	background-color:#FFF;
	opacity:0.7;
	padding:0.9%;
	-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   border-radius:2px;
}
#form h4{
	font-size:200%;
	font-weight:normal;
	margin:2% 0 1% 0;
}

#form p{
	font-size:140%;
	margin:1% 0 2% 0;
	font-family: Tahoma,Arial,Helvetica,sans-serif;
	line-height:150%;
}

#formwrap{
	margin-bottom:2%;
}
#formwrap .form_title{
	float:left;
	width:20%;
	font-size:140%;
}

.formstyle { 
	border: 1px solid #ccc;
	color: #000;
	font-size:120%;
	width: 95%;
	background-color:rgba(255,255,255,1);
	margin-bottom:2%;
	opacity:0.9;
	padding:0.5%;
	-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   border-radius:2px;
}

.formstyletwo { 
	color: #FFF;
	font-size:120%;
	text-align:center;
	width:20%;
	background-color:#533822;
	border:0px;
	padding:1%;
	
}
.formstyletwo a { 
	color:#533822;
	cursor:pointer;

}
.formstyletwo a:hover { 
	color:#fd9104;
	cursor:pointer;

}

textarea{ 
	border: 1px solid #ccc;
	color: #000;
	font-family:Lato, Arial, Helvetica, sans-serif;
	font-size:14px;
	width:95%;
	height:80px;
	background-color:rgba(255,255,255,1);
	background-image:url(../images/backgroundtexture.png);
	margin-bottom:10px;
	border-radius:2px;
	padding:3px;
	opacity:0.9;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}


input:focus, input.focused, textarea:focus, textarea.focused {  
color: #3e3e3e; opacity:1;
}

#error{
	color:#FF7471;
	float:left;
	font-family:Regular, Arial, Helvetica, sans-serif, "Helvetica Neue Light";
	font-size:15px;
}

#error ul{
	list-style-type: none;
	padding-top:5px;
}
	
/*----------------------------about me----------------------------------*/
#about{
	clear:both;
	width:70%;
	display:block;
	margin:auto;
    color: #533822;
	font-family: 'Cinzel',serif;
	border : solid 1px #999999;
	padding : 5px 40px 30px 25px;
	background-color:#ffffff;
	opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
	border-radius: 10px;
	
}
#about h1{
	font-size:210%;
	font-weight:normal;
	margin:2% 0 1% 0;
	text-shadow: 1px 1px 1px #ffffff;
}

#about .container{
	display:block;
	width:100%;
	border : solid 1px #999999;
	padding : 10px;
	background-color:#ffffff;
	opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
	border-radius: 10px;
}

#about p{
	font-size:140%;
	margin:1% 0 2% 0;
	font-family: Tahoma,Arial,Helvetica,sans-serif;
	line-height:150%;
	
}
#about .skill{
	font-size:135%;
	margin:1% 0 2% 0;
	line-height:150%;
}

#about ol li{
	list-style-type: square;
	margin-left:20px;
	font-family: Tahoma,Arial,Helvetica,sans-serif;
	line-height:150%;
	font-size:140%;
}

#koa{
	margin:auto;
	text-align:left;
	width:70%;
}


/* responsive style rules --- (max-width: 320px) // iPhone portrait
　　　　　　　　　　　　　　　      (max-width: 480px)　// iPhone landscape
 　　　　　　　　　　　　　　　　   (max-width: 768px) // iPad portrait
                              (max-width: 1024px) // iPad landscape
------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
.wrapper{
	margin : auto;
	width :99%;
	height : auto;
	background: url("images/shadow.png") no-repeat scroll 50% 26px transparent 80%;
    height: 100%;
}
#title {
	margin:50px 0 0 400px;
}
header{
	margin : 10px 0 50px 400px;
}
aside img{
	width:31%;
	height:auto;
	margin:1% 0 0 1%;
}
	
}

@media only screen and (max-width: 768px) {
.wrapper{
	margin : auto;
	width :100%;
	height : auto;
	background: url("images/shadow.png") no-repeat scroll 50% 26px transparent 80%;
    height: 100%;
}
#title {
	margin:50px 0 0 240px;
}
header{
	margin : 10px 0 50px 240px;
}

	
}

@media only screen and (max-width: 480px) {
	
.wrapper{
	width : 480px;
} 
#title {
	margin:10px 0 0 60px;
}
#title h1{
	font-size:20px;
}
#title h2{
	font-size:18px;
}
header{
	margin :0;
	margin:5px 0 10px 60px;
}
header h1{
	font-size:12px;
}
aside img{
	width:85%;
	height:auto;
	margin:1% 0 0 8%;
}
aside h3 {
    font-size: 16px;
    padding: 0 0 0 20px;
}

}

@media only screen and (max-width: 360px) {
	
.wrapper{
	width : 360px;
} 
#title {
	margin:10px 0 0 20px;
}
#title h1{
	font-size:20px;
}
#title h2{
	font-size:18px;
}
header{
	margin :0;
	margin:5px 0 10px 20px;
}
header h1{
	font-size:12px;
}
aside img{
	width:30%;
	height:auto;
	margin:1% 0 0 1%;
}
aside h3 {
    font-size: 16px;
    padding: 0 0 0 20px;
}
.left{
	clear : both;
	float : left;
	width : 100%;
}

.right{
	float : left;
	width : 100%;
}
#footer nav {
    clear: both;
    margin: 0 0 0 100px;
    width: 360px;
}
#footer .right {
	width:360px;
	clear:both;
	text-align:center;
}
}

@media only screen and (max-width: 320px) {
.wrapper{
	width : 320px;
}
#title {
	margin:2% 0 0 1%;
}
#title h1{
	font-size:18px;
}
header{
	margin:1% 0 1% 1%;
}
#title h2{
	font-size:16px;
}

#top #info{
	clear : both;
	float : left;
}

#top #info h2 {
    font-size : 90%;
    text-align : left;
	margin : 0 0 5px 10px;
}

header h1 {
    font-size : 12px;
}

aside h3 {
    font-size : 16px;
}

aside p {
    font-size : 12px;
}
aside img{
	width:30%;
	height:auto;
	margin:1% 0 0 2%;
}

.left{
	clear : both;
	float : left;
	width : 100%;
}

.right{
	float : left;
	width : 100%;
}
	
#footer nav{
    width : 100%;
	margin: 0 0 0 90px;
}

#footer nav ul li a{
	font-size : 12px;
}

#footer .right h4 {
	font-size : 80%;
	text-align : center;
	margin-top : 5px;
}
}