/* --------------
CSS styles Pelanidea 
---------------------*/

/* reset styles */
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display: block;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	border: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
}

/* global styles */
@font-face  { font-family: "Avant"; src: url("../font/Avant.ttf") format("truetype"); font-family: "forte"; src: url("../font/FORTE.otf") format("opentype");}
h2 .font01 { font-weight: bold; }
.clearfix { clear: both; }
.font-width{ float: left; font-weight: bold; width: 50px; display: block; }
.clear{ clear: both; }
.clear-border { clear: both; border-bottom: 1px solid #ccc; padding: 0 0 5px 0; margin: 0 0 5px 0; }
.font02 { color:#C60000;}
/* default styles */
body {  font: 12px Arial, Helvetica, sans-serif; width: 100%; background:url(../images/bg.gif) repeat-x; color: #333; line-height: 1.6em; padding: 0; margin: auto; }

/* header */
header.container { width: 960px; margin: 0 auto;position:relative; clear:both; height: 185px; }
header.deepcontainer { width: 960px; margin: 0 auto;position:relative; clear:both; height: 115px; }
header figure { position:absolute; margin:0; background:url(../images/tweetme.gif) no-repeat 0 -7px; height: 38px; width:128px; padding:0; top: 0; right: 0; }
header figure a { display:block; font: 12px Arial, Helvetica, sans-serif; color: #fff; height: 38px; width:128px; padding:0; top: 0; right: 0; text-indent:-9999px; text-decoration: none; }
header figure a:hover { display:block; color: #FFCC00; text-indent:-9999px; text-decoration: none; }
header h1 { position: absolute; top: 0; left: 2px; font: 18px Arial, Helvetica, sans-serif; color: #000; display: block; height:48px; width: 225px; }
header h1 a { font: 18px Arial, Helvetica, sans-serif; color: #000; display: block; height:48px; background:url(../images/logo.gif) no-repeat -4px 0; width: 225px; text-indent: -9000px; text-decoration: none;}
header h1 a:hover { font: 18px Arial, Helvetica, sans-serif; color: #000; display: block; height:48px; width: 225px; text-indent: -9000px; text-decoration: none;}
header hgroup { clear: both; width: 960px; position: absolute; top: 60px; left:0; }
header h2 { position: absolute; font: normal 19px "Avant", arial;  color:#272727; width: 960px; text-align:center; margin: 0; padding: 0; top: 65px; left: 0; clear: both; line-height: 1.4em; }


/* nav */
nav { position: absolute; width: 585px; height: 50px; top: 60px; right: 0px; text-align: left; }

/* content */
#content { clear:both; width: 100%;  }
.bigheader { clear:both; display:block; overflow: hidden; width: 960px; height: 390px; margin: 0 auto;}
.bigheader img { display:  block; height: 390px; }

/* portfolio */
section#portfolio {clear: both; padding: 0; width: 960px;  margin: 1px auto 0; }
section#portfolio2 {clear: both; width: 960px;  margin: 0 auto; }  
section#portfolio h3 { font: 24px "forte", arial; color: #000;} 

.port-column { float: left; width: 212px; margin: 10px 37px 8px 0; }
.port-column ul { list-style: none; display: block; }
.port-column li { list-style: none; display: block; }
.port-column ul li h6 { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column ul li h6 a { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column ul li h6 a:hover { font: bold 1.1em Arial, Helvetica, sans-serif; color: #000; text-decoration:none; margin: 4px 0 0 0; }
  

.port-column-margin2 { float: left; width: 212px; margin: 10px 0 8px 0; }
.port-column-margin2 ul { list-style: none; display: block; }
.port-column-margin2 li { list-style: none; display: block; }
.port-column-margin2 ul li h6 { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column-margin2 ul li h6 a { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column-margin2 ul li h6 a:hover { font: bold 1.1em Arial, Helvetica, sans-serif; color: #000; text-decoration:none; margin: 4px 0 0 0; }
  
 
.port-column2 { float: left; width: 218px; margin: 10px 28px 8px 0; }
.port-column-margin { float: left; width: 218px; margin: 10px 0 8px 0; }
.port-column2 figure, .port-column-margin figure  { width: 216px; border: 1px solid #ccc; padding: 2px; }
.port-column2 h6, .port-column2 h6 { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column2 h6, .port-column2 h6 a { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column-margin h6, .port-column-margin h6 a { font: bold 1.1em Arial, Helvetica, sans-serif; color: #be0000; text-decoration:none; margin: 4px 0 0 0; }
.port-column h6 a:hover { font: bold 1.1em Arial, Helvetica, sans-serif; color: #000; text-decoration:none; }
.port-column2 h6 a:hover, .port-column-margin h6 a:hover { font: bold 1.1em Arial, Helvetica, sans-serif; color: #000; text-decoration:none; }
.port-column2 ul, .port-column-margin ul  { list-style: none; display: block; }
.port-column2 ul li, .port-column-margin ul li { list-style: none; }
.detail { clear: both; border-top: 1px dotted #333; text-align: right; padding: 5px 0 0 0; }
.detail a {color: #333; text-decoration: none;}
.detail a:hover {color:#be0000; text-decoration: none;}


/* top button */
.first-top { clear: both; background:url(../images/red-border.gif) no-repeat bottom; height: 23px; padding: 10px 0 0 0; }
.first-top2 { clear: both; background:url(../images/red-border.gif) no-repeat bottom; height: 23px; padding: 0; }
.first-top a, .first-top2 a { background:url(../images/top-black.gif) no-repeat; width: 42px; height: 23px; text-indent: -9999px; float: right;}
.first-top a:hover, .first-top2 a:hover { background:url(../images/top-black-on.gif) no-repeat; width: 42px; height: 23px; text-indent: -9999px; }

.second-top { clear: both; height: 23px; }
.second-top a { background:url(../images/top-white.gif) no-repeat; width: 42px; height: 23px; text-indent: -9999px; float: right;}
.second-top a:hover { background:url(../images/top-white-on.gif) no-repeat; width: 42px; height: 23px; text-indent: -9999px; }


/* About me */
section.clear-width {  clear: both; padding: 0 0 0 0; background-color:#000; width: 100%;} 
section #aboutme {  width: 960px; margin: 0 auto; padding: 15px 0 0 0; } 
section #aboutme h3 { font: 24px "forte", arial; color: #fff; margin: 0 0 8px 0; } 
section #aboutme p {  color: #fff; width: 470px; border-bottom: 1px dotted #464646; padding: 0 0 10px 0; margin: 0 0 10px 0; }
section.clear-left { float: left; width: 470px; } 
/* column box */
.col-box { float: left; margin: 0 10px 0 0 ; }
.col-box h6 { font: bold 12px Arial, Helvetica, sans-serif; margin: 0 0 10px 0; color: #fff; } 
.col-box figure { float: left; margin: 0 5px 0 0; padding: 0; }

/* photography * */
section #aboutme section.photograhpy { display:block; float: left; margin: 0 0 0 70px;  }
section #aboutme section.photograhpy p {text-align: left;  width: 420px; border: none;}

figure.gallery { clear: both; width: 278px; height: 152px; margin: 0 0 0 70px; } 
figure.gallery img, a { border:none;} 
/* contact me */
section#contactme {clear: both; padding: 10px 0 0 0; background: url(../images/red-border.gif) no-repeat top center; width: 960px;  margin: 0 auto; } 
section#contactme h3 {  font: 24px "forte", arial; color: #000; margin: 0 0 12px 0;} 
section#contactme form { float: left; display: block; width: 400px; margin: 5px 0 0 0;}
section#contactme .result { float: left; display: block; width: 400px; min-height: 180px; margin: 5px 0 0 0;}
section#contactme .result input.back {
	background-color: #272727;
	font: 11px bold Arial, Helvetica, sans-serif;
	cursor:pointer;
	color: #fff;
	border: none;
	width: 25px;
	margin: 5px 0 0 0;
	padding: 2px 3px 2px 3px;
}

section#contactme form p { clear:both; display:block; }
section#contactme form label { float: left; width: 70px; font:bold 12px Arial, Helvetica, sans-serif;  margin: 0 0 5px 0;}
section#contactme form input { float: left; font: 12px Arial, Helvetica, sans-serif; width: 200px; color: #fff; margin: 0 0 5px 0; background-color:#898989; padding: 2px; border: 1px solid #898989; border-radius: 85px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;  }
section#contactme form input:focus { background-color:#000; border-color: #000;}
section#contactme form textarea { float: left; font: 12px Arial, Helvetica, sans-serif; width: 300px; height:100px; color: #fff; margin: 0 0 5px 0; background-color:#898989; padding: 2px; border: 1px solid #898989; border-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
section#contactme form textarea:focus { background-color:#000; border-color: #000;}
section#contactme form input.send { clear: both; background:url(../images/btn-send.gif) no-repeat; border: none;  width: 40px; height: 17px; text-indent: -9000px; cursor:pointer; margin: 0 0 0 70px; }
section#contactme form input.send a { display:block; background:url(../images/btn-send.gif) no-repeat;  width: 40px; height: 17px; text-indent: -9999px; margin: 0 0 0 70px; text-indent: -9000px; }
section#contactme form input.send:hover { display:block; background:url(../images/btn-send-on.gif) no-repeat; width: 40px; height: 17px; text-indent: -9000px; }

.info { float: right; width: 550px; }
.info h4 { font: bold 18px Arial, Helvetica, sans-serif; color:#000; margin: 0; } 
.info p { margin: 0; }
.add-info { float: left; width: 100px; margin: 20px 0 0 10px; }
.add-info p { font-weight: bold; }
.add-info figure { text-align: center; display: block; margin: 5px 0 0 0; }
.add-info a { color:#333; text-decoration:none; }
.add-info a:hover { color: #CC0000; text-decoration:none; }

/* deep header */
figure#deepheader { width: 960px; margin: 0 auto; display:block; }

/* breadcrumb */
section#breadcrumb { margin: 0; border-bottom: 1px solid #000; padding: 0 0 5px 0; width: 960px; margin: 0 auto; height: 25px; }
section#breadcrumb h3 { float: left; display:block; font: 24px "forte", arial; color: #000; margin: 0; width:400px; }
#right-bc { float: right; margin: 8px 0 0 0; color:#c60000;  }
#right-bc ul { margin: 0; padding: 0; }
#right-bc li { display: inline; list-style: none; border-right: 1px solid #c60000; font-size: 10px; padding:0 5px 0 3px; margin: 0 ;}
#right-bc li a { font: 12px Arial, Helvetica, sans-serif; color:#c60000;text-decoration: none; }
#right-bc li a:hover {  color:#000; text-decoration: none;}
#right-bc .border-bc { border: none; }

/* footer */
footer { clear: both; width: 100%; margin: 0; background-color: #000; padding: 20px 0 50px 0; }
footer #nav { margin: 0 auto; width: 960px; }
footer #nav ul { float: left; display: inline; width: 400px; }
footer #nav ul li { display: inline; list-style: none; margin: 0; padding: 0 5px; }
footer #nav ul li a:hover { color:black; background-color:#fff; padding: 4px; }
footer #nav ul li a { font-weight: bold; color:#fff; text-decoration: none; padding: 4px; }
footer #nav ul li.on, #nav ul li.on a { color:black; background-color:#fff; padding: 4px;  }
footer .copyright { float: right; width: 300px; color: #fff; text-align: right; }
footer .copyright p {font: 10px Arial, Helvetica, sans-serif; line-height: 1em; float: left; display:block; margin: 1px 0 0 15px; }
footer .copyright figure { float: right; display:block;}