@charset "utf-8";
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
list-style:none;
}

@font-face {
font-family: "Luna";
src: url'../assets/luna.ttf') format("truetype");
}

/******* GENERAL CSS */
body {
	font-family: arial,helvetica;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #666666;
	line-height:14px;
	font-size: 12px;
	cursor:default;	
	background:#000000;
	scrollbar-face-color:#8080FF;
	/*background:#000 url('../assets/_bg.jpg') 50% 50% no-repeat;*/
	

	

	
}

.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

a{
	text-decoration: none;	
	color: #666666;
	outline: none;
}

a:hover{
	
}

strong{
	font-weight: 700;
}

#container {
	text-align:center;	
	width : 1024px;
	height:768px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	background: #000 url('../assets/bg.png') no-repeat center top;

	
}
#header {	
	height:105px;		
	margin: 0px auto;
	text-align:left;	
}

#logo{
	padding: 30px 0 0 40px;
	width:123px;
	float:left;
	height:53px;
}

#sitemap_header{
	padding: 30px 0 0 0;
	width:639px;
	height:53px;
	float:left;
	text-align:right;
}

#sitemap_header h1{

}

.wrapper{
	margin: 0px auto;
}


#content {
	width: 580px;
	height:455px;
	margin: 0px auto;
	text-align:justify;
	margin: 0px auto;
	/*background:#FFFFFF;*/	
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	border:0pt none;
	font-family:inherit;
	font-style:inherit;
	font-weight:inherit;
	margin:0pt;	
	vertical-align:baseline;
	list-style:none;
	color:#ff0033;
	font-size:26px;
}

#footer { 
	margin:0xp;
	padding:0px;
	height: 114px;		
	width : 580px;
	margin: 0px auto; 
}

br .clear {
clear:both;
}
/******* GENERAL CSS */

/***** PHOTO GALLERY **/
#thumbnail{
height:63px;
width:605px;
}
#photo_link{width:580px; float:left;background:#FFFFFF;height:63px;}

#phote_more{ width:25px; height:51px;float:left; padding:8px 0px 4px 0px;}

#phote_more #more_prev{
width:25px;
height:26px;
cursor:pointer;
}

#phote_more #more_next{
width:25px;
height:25px;
cursor:pointer;
}

#phote_more a#mnext{background:url('../assets/next.png') 0 0 no-repeat;display:block;}
#phote_more a#mprev{background:url('../assets/previous.png') 0 0 no-repeat;display:block;}
#phote_more a#mnext:hover{background:url('../assets/next.png') 0 -25px;}
#phote_more a#mprev:hover{background:url('../assets/previous.png') 0 -26px;}

#photo_link ul{
margin:0px;
padding:8px 5px 4px 5px;
background:#FFFFFF;

}

#photo_link ul li{
float:left;
padding:0px 3px 0px 3px;
list-style:none;
margin:0px;
height:51px;
width:51px;
display:block;
}

#photo_link ul li:hover{

}

#photo_link ul li.thumb{
/*background:#fff url('../assets/spinner.gif') 50% 50% no-repeat;*/
}

#photo_link ul li img{
height:51px;
width:51px;
}

#photo_link ul li a{
height:51px;
width:51px;
display:block;
}

#photo_link ul li a img:hover{
}

#fullframe{
height:392px;
background:#FFFFFF;
}
#photo{
padding:4px 8px 8px 8px;

}

#photo img{
height:381px;
width:564px;
}
/***** PHOTO GALLERY **/

/***** DETAIL **/
#left_column, #right_column{
width:290px;
height:455px;
background:#FFFFFF;
padding:0 0 0px 0px;
}

#left_column{
float:left;
}

#right_column{
float:right;

}

#right_column_header{
padding:20px 8px 8px 0px;
}

#right_column_header h1{
color:#ff0033;
font-size:2.5em;
padding:0 0 0 0;
margin:0 0 0 4px;

}

#left_content{
padding:8px 4px 5px 8px;
}

#right_content{
padding:0px 12px 8px 2px;
margin-top:8px;
height:382px;
overflow:auto;
}

#right_content p{
text-align:justify;

}

#right_content h2{
padding:10px 0 0 0;
font-weight:bold;

}
#right_content h3{
padding:10px 0 0 0;
margin:0px;
font-style:italic;

}

#left_content img, #right_content img{
height: 439px;
width: 276px;
}

/***** DETAIL **/

/***** GUEST BOOK **/
#right_content_guest{
padding:12px 8px 8px 0px;
}

#left_content_guest{
padding:8px 8px 8px 8px;
}

#testimonial_previous{ float:left; }
#testimonial_next{ float:right; }

#testimonial_previous a:hover{ color:#ff0033;}
#testimonial_next a:hover{ color:#ff0033;}

.testimonial{
	text-align:center;
	padding:20px 0 10px 0;
}

.tmessage{
	font-style:italic;
	font-size:14px;
	width:255px;
	word-break:break-all; 
	word-wrap:break-word;
	white-space:pre-line;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	
}

.tname{
	font-weight:bold;
}

#testimonial_container{
overflow:auto;
height:416px;
}

#testimonial_paging{
height:24px;
}

#guest_form{
	border-left:dashed #333333 1px;
	height:426px; 
	padding:10px 0 0px 8px;	
}

#gform{
margin:100px 0px 0px 0px;
padding:0px;
width:220px;
}

#guest_form h1{
color:#ff0033;
font-size:2.5em;
}

#gform label{
	display: block;
	line-height: 1.4em;
}

#gform input{
	width: 258px;
	padding: 6px;
	color: #ff0033;	
	font-size: 11px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #ff0033;
}

#gform input.error{
	background: #f8dbdb;
	border-color: #e77776;
}

#gform textarea{
	width: 258px;
	height: 80px;
	padding: 6px;
	font-size: 11px;
	color:#ff0033;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #ff0033;

}

#gform textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}

#gform #send{	
	color: #000;
	background: #fff;
	font-weight: 700;
	font-style: normal;
	border: 0;
	cursor: pointer;
	width:45px;	
}

#gform #send:hover{
	color: #ff0033; 
}



/***** GUEST BOOK **/

/***** Navigator Style *****/

#announcement_alert{ width:8px; float:left;margin-top:10px;padding:8px 8px 0 0px;}
#announcement_content { color: #ff0033;text-align:left; padding:4px 0px 0 0px; margin-top:11px;float:left; width:300px;}
#announcement_content p{ padding:0px; margin:0px;}
#announcement_content p.message{ margin-top:8px; padding:0px;}

#info {height:400px;}



/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
z-index:1000;
padding-top:9px;
text-align:right;
float:right;

}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;

}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;

height:31px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:31px;
font-family: "Luna";
font-size:20px;
line-height:25px;
width:150px;
color: #ff0033;


}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited { width:150px; w\idth:149px;}

/* style the link hover */
* html .menu a:hover {color: #ff3366; background:}

.menu :hover > a {
color: #ff3366; 

}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
width:150px; 
text-align:left;
}

.menu ul ul li{

}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}



#n_fashion{background:url('../assets/fashion.png') 0 0 no-repeat;display:block;}
#n_advertising{background:url('../assets/advertising.png') 0 0 no-repeat;display:block;}
#n_wedding{background:url('../assets/wedding.png') 0 0 no-repeat;display:block;}
#n_event{background:url('../assets/event.png') 0 0 no-repeat;display:block;}
#n_scenery{background:url('../assets/scenery.png') 0 0 no-repeat;display:block;}
#n_people{background:url('../assets/people.png') 0 0 no-repeat;display:block;}
#n_commercials{background:url('../assets/commercials.png') 0 0 no-repeat;display:block;}
#n_others{background:url('../assets/others.png') 0 0 no-repeat;display:block;}

#n_fashion:hover{background:url('../assets/fashion.png') 0 -31px no-repeat;}
#n_advertising:hover{background:url('../assets/advertising.png') 0 -31px no-repeat;}
#n_wedding:hover{background:url('../assets/wedding.png') 0 -31px no-repeat;}
#n_event:hover{background:url('../assets/event.png') 0 -31px no-repeat;}
#n_scenery:hover{background:url('../assets/scenery.png') 0 -31px no-repeat;}
#n_people:hover{background:url('../assets/people.png') 0 -31px no-repeat;}
#n_commercials:hover{background:url('../assets/commercials.png') 0 -31px no-repeat;}
#n_others:hover{background:url('../assets/others.png') 0 -31px no-repeat;}

#n_portfolio{background:url('../assets/portfolio.png') 0 0 no-repeat;display:block;}
#n_guest{background:url('../assets/guest.png') 0 0 no-repeat;display:block;}
#n_about{background:url('../assets/about.png') 0 0 no-repeat;display:block;}
#n_contact{background:url('../assets/contact.png') 0 0 no-repeat;display:block;}

#n_portfolio:hover{background:url('../assets/portfolio.png') 0 -31px no-repeat;}
#n_guest:hover{background:url('../assets/guest.png') 0 -31px no-repeat;}
#n_about:hover{background:url('../assets/about.png') 0 -31px no-repeat;}
#n_contact:hover{background:url('../assets/contact.png') 0 -31px no-repeat;}

.li_about{
padding:0px;
margin:0px;
list-style:none;

}

.ul_about{
padding:0px;
margin:0px;
list-style:none;
}

.p_about{
padding:0px;
margin:0px;

}



</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
/***** Navigator Style *****/