@charset "utf-8";
/* CSS Document */

/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { 
	border:0;
}
pre{
	font-size: 1em ;
}

/*general*/
body{
	background:url(../images/mainbg01.gif) top repeat-x #120c0c;
	font-family:Arial, Helvetica, sans-serif;
}
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
input {
	border: #e7e7e7 1px solid;
	padding: 2px 4px; 
	font-size: 0.7em;
	margin-bottom: 4px; 
	vertical-align: middle;
	color: #333; 
	line-height: 18px; 
	background-color: #fff;
}
textarea {
	border: #e7e7e7 1px solid; 
	padding: 2px 4px;
	font-size: 0.7em;
	margin-bottom: 4px;
	vertical-align: middle; 
	color: #333;  
	background-color: #fff;
}
hr{
	height:1px;
	border:1px solid #e4e7e1;
	margin-bottom:15px;
	clear:both;
}
blockquote{
	margin-bottom:15px;
	background:url(../images/quote_top.gif) no-repeat left top;
	clear:both;
}
blockquote p.thequote{
	font-size:1.1em;
	text-align:center;
	color:#004a80;
	letter-spacing:2px;
	line-height:1.4em;
	padding:0 40px;
	font-family:Georgia, "Times New Roman", Times, serif;
	background:url(../images/quote_bottom.gif) no-repeat right bottom;
}
blockquote p.theauthor{
	font-size:0.8em;
	color:#999;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-align:center;
	margin:0;
}
.clear{
	clear:both;
}
.middle{
	vertical-align:middle;
}
.center{
	text-align:center;
}
.submit{
	font-size:0.8em;
	padding:3px 6px 2px 6px;
	overflow:visible;
	letter-spacing:1px;
	color:#fff;
	border:1px solid #e7e7e7;
	background-color:#0066cc;
}
.submit_design{
	font-size:0.8em;
	font-weight:bold;
	padding:3px 6px 1px 6px;
	overflow:visible;
	letter-spacing:1px;
	color:#fff;
	background-color:#ff6633;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ff9933;
	border-right-color: #ff3333;
	border-bottom-color: #ff3333;
	border-left-color: #ff9933;
}
.partition{
	padding-left:7px;
	padding-right:7px;
}
.photobox a img {
	border:1px solid #ccc;
	padding:3px;
	background-color:#fff;
}
.photobox a:hover img {
	border: #aaa 1px solid;
}
.photobox span{
	margin:3px 0 8px 0;
	display:block;
}
.photobox span img{
	border:none;
	padding:0;
}
.photobox span a:hover img{
	border:none;
	padding:0;
}
.floatleft{
	float:left;
	margin:0 5px 8px 0;
}
.floatright{
	float:right;
	margin:0 0 8px 5px;
}
.changecss{
	position:absolute;
	right:0;
	top:0;
	color:#8dc6f7;
	font-size:0.65em;
	letter-spacing:1px;
	background-color:#000;
	padding:2px 4px;
}
.changecss a, .changecss a:hover{
	color:#8dc6f7;
}
.textsize{
	float:right;
	padding-right:5px;
	padding-top:7px;
	font-size:10px;
	margin-bottom:-30px;
	color:#777;
}
.textsize a{
	border:1px solid #ccc;
	padding:2px 2px 1px 3px;
	margin-right:2px;
	background-color:#fff;
	line-height:18px;
	color:#777;
}
.textsize a:hover{
	border:1px solid #999;
	color:#000;
	text-decoration:none;
}

/*wrapping*/
#wrap{
	background-image:url(../images/wrapbg01.gif);
	position:relative;
}
.decoration_left{
	position:absolute;
	left:10px;
	top:400px;
	width:85px;
	height:70px;
	background:url(../images/fish_left.png) left top no-repeat;
}
.decoration_right{
	position:absolute;
	right:0;
	top:250px;
	width:125px;
	height:180px;
	background:url(../images/fish_right.png) left top no-repeat;
}

/*header class*/
#headerbg{
	background-image:url(../images/headerbg.gif);
	background-position:top;
	background-repeat:repeat-x;
	height:120px;
}
#header{
	height:120px;
	background-image:url(../images/header2.gif);
	background-position:center;
	background-repeat:no-repeat;
	width:1000px;
	margin:0 auto;	
}
#logo h1{
	margin:0;
	width:420px;
	height:120px;
	float:left;
	text-indent:-9999px;
	background:url(../images/logo.png) left top no-repeat;
}
#logo h1 a{
	height:120px;
	display:block;
}
#navigation{
	float:right;
	padding-top:0px;
	width:580px;
	font-family:微軟正黑體;
}
#navigation ul{
	margin:0;
	padding:0 0 0 5px;
}
#navigation li{
	float:left;
	list-style:none;
	padding-top:48px;
	margin:0;
	font-size:13px;
}
#navigation li a{
	color:#fff;
	padding:0 18px 0 15px;
	background:url(../images/partition01.gif) right 0px no-repeat;
}
#navigation li a:hover{
	color:#c4df9b;
}
#navigation #on{
	padding:48px 0 0 0;
	font-weight:bold;
}
#navigation #on a{
	color:#77c7ff;
}
#navigation #on a:hover{
	color:#8ecffc;
}
#navigation #on div{
	text-align:center;
	margin-top:2px;
	display:block;
	z-index:-1;
}

/*content class*/
#content{
	width:900px;
	margin:0 auto;
	padding:0;
	clear:both;
	position:relative;
}
.content_top{
	background:url(../images/content_top.gif) no-repeat left top;
	height:6px;
	overflow:hidden;
}
.content_bottom{
	background:url(../images/content_bottom.gif) no-repeat left top;
	height:6px;
	overflow:hidden;
	clear:both;
}
.container{
	background-color:#fff;
	background-image:url(../images/container_bg.gif);
	background-repeat:repeat-x;
	background-position:center 6px;
	padding:25px 20px 15px 20px;
	clear:both;
}
.leftside{
	float:left;
	width:580px;
	border-right:1px solid #e4e7e1;
}
.leftside p{
	margin:0 10px 15px 0;
	font-size:0.75em;
	line-height:1.5em;
	letter-spacing:2px;
	color:#333333;
}
.leftside p a{
	color:#ed185d;
}
.container h3{
	font-family:微軟正黑體;
	font-size:1.5em;
	color:#0054a6;
	letter-spacing:1px;
	border-bottom:1px solid #e4e7e1;
	margin-bottom:15px;
	clear:both;
}
.container h3 span{
	color:#959595;
	font-size:0.7em;
	font-family:Georgia, "Times New Roman", Times, serif;
	padding-left:10px;
	border-left:1px solid #e4e7e1;
	margin-left:5px;
	vertical-align:middle;
}
.container h6{
	font-size:0.8em;
	color:#0054a6;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-bottom:10px;
	padding-bottom:5px;
	border-bottom:1px dashed #e4e7e1;
	font-weight:bold;
	letter-spacing:1px;
	clear:both;
}

/*rightside class*/
.rightside{
	float:right;
	width:260px;
	padding-left:19px;
	height:100%;
}
.rightside h3{
	font-size:0.8em;
	font-family:Arial, Helvetica, sans-serif;
	color:#0054a6;
	font-weight:bold;
	margin-bottom:6px;
	padding: 2px 0 1px 16px;
	border-bottom: 1px solid #ddd;
	letter-spacing:normal;
}

.callme{
	background:url(../images/callme_bg.gif) no-repeat left top;
	padding:0 0 10px 0;
	height:90px;
	margin-bottom:10px;
	position:relative;
}
.callme p{
	font-size:0.8em;
	padding:0 15px 35px 45px;
	background: url(../images/callme_bottom.gif) left bottom #b9b6ad no-repeat;
	color:#fff;
	letter-spacing:1px;
}
.callme p strong{
	font-size:2em;
	font-weight:bold;
	margin-top:5px;
}
.callme div{
	position:absolute;
	left:8px;
	top:5px;
	height:78px;
	width:30px;
	background:url(../images/phone.gif) left top no-repeat;
}
.contact{
	padding:10px;
	background-color:#f4f1ea;
	margin-bottom:15px;
	clear:both;
}
.contact h5, .hyperlink h4{
	color:#6e9739;
	border-bottom:1px solid #dad7c8;
	padding-bottom:3px;
	margin:0 0 10px 0;
	font-size:0.8em;
	letter-spacing:1px;
}
.contact label{
	font-size:0.7em;
	display:block;
	color:#555;
}
.contact p{
	margin-bottom:3px;
}
.leftform{
	float:left; 
	width:115px
}
.rightform{
	float:right; 
	width:115px
}
.testimonial{
	margin-bottom:15px;
	background-color:#f8f7f2;
	padding:10px;
}
.testimonial p.testimonial_author{
	font-size:0.7em;
	color:#999;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}
.hyperlink{
	margin-bottom:15px;
}
.hyperlink li{
	font-size:0.75em;
	background:url(../images/list_01.gif) left 60% no-repeat;
	padding-left:10px;
	margin-bottom:5px;
}
.hyperlink li a{
	color:#3f7936;
}
.googlead{
	margin-bottom:15px;
}

/*mootools*/
.toggler {
	cursor:pointer;
}
.element {
	background:url(../images/testimonial_bg.gif) top repeat-x #f8f7f2;
	margin-bottom:5px;
}
.element p {
	margin: 0 0 5px 0;
	padding: 4px;
	font-size:0.75em;
	color:#333;
	letter-spacing:1px;
}

.dis_h1{
	font-family:微軟正黑體;
	color:#fff;
	font-size:1.4em;
	margin-bottom:15px;
}
.dis_p{
	color:#fff;
	font-size:0.75em;
	margin-bottom:5px;
}
.dis_p a{
	color:#777;
	font-style:italic;
}

/*error notification*/
#alertMessagePlaceHolder {
	background-color: #ffcccc;
	padding: 8px;
	display: none;
	margin: 5px 0 10px 0;
	font-size:0.7em;
	line-height:20px;
}
/* Asterisk on required fields */
form .reqMark {
	color: #f00;
	padding: 0 4px;
}
/* Field w/ a validation error */
form .errFld {
	padding: 1px;
	border: 1px solid #f00;
}
/* Styling for message associated with a validation error. */
form .errMsg {	
	color: #CC3333 !important;
	font-size:0.6em;
	display:inline;
}

/*upload*/
.upload{
	background: url(../images/uploadbg.gif) top repeat-x #ececec;
	padding:10px;
	margin-right:10px;
}
.upload label{
	width:150px;
	font-size:0.75em;
}

/*site text*/
.greytext{
	color:#999;
	font-size:0.75em;
}
.blacktext{
	color:#333;
	font-size:0.75em;
}
.blacktext a, .blacktext a:hover{
	color:#ed185d;
	cursor:pointer;
}
.redtext{
	color:#b51a1e;
	font-size:0.6em;
}
.smalltext{
	font-size:0.6em;
	color:#999;
}
.smalltext a{
	color:#999;
}
.hilight{
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	background-color:#d0efff;
}

/*css layer description*/
.message {
	position:relative;
	text-decoration:none;
}
.message:hover {
	border: #aaa;
	z-index:50;
	cursor:default;
}
.message span {
	display: none; 
}
.message:hover span {
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	position:absolute;
	text-decoration:none;
	top:20px;
	left:0px;
	width:120px;
	padding:5px;
	color:#fff;
	font-size: 11px;
	line-height:16px;
	background-color: #000;
	font-weight:normal;
	text-align:justify;
}
.showhand:hover {
	cursor:pointer !important;
}
.info {
	position:relative;
	padding:0px 3px 0px 3px;
	text-decoration:none;
	color:#ff0000;
	border:1px solid #ccc;
	background-color: #fff;
	font-size: 11px;
	font-weight: bold;
	letter-spacing:normal;
}
.info:hover {
	background-color:#fff;
	color:#333;
	border:1px solid #aaa;
	cursor:help;
	z-index:1000;
	text-decoration:none;
}
.info span {
	display: none; 
}
.info:hover span {
	display:block;
	position:absolute;
	background-color: #000;
	top:38px;
	left:0px;
	width:160px;
	padding:5px;
	text-align:left;
	color:#fff;
	line-height:18px;
	margin:0px;
	font-size: 11px;
	font-weight:normal;
	z-index:100;
	text-decoration:none;
	font-style:normal;
	text-align:justify;
}

/*list style*/
.list01{
	margin-bottom:15px;
	clear:both;
}
.list01 li{
	background:url(../images/icon_ok.gif) left 50% no-repeat;
	margin-bottom:6px;
	padding-left:20px;
	letter-spacing:1px;
}
.list02 {
	width:580px;
	margin-bottom:10px;
}
.list02 li{
	font-size:0.8em;
	float:left;
	line-height:2.8em;
	width:49%;
	letter-spacing:1px;
}
.list02 li span{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #e0e0e0;
	text-decoration:underline;
	font-size: 2.2em;
	font-weight: bold;
	font-style: italic;
	padding-right:8px;
}
.example li{
	clear:both;
	border-bottom:1px dashed #e4e7e1;
	margin:10px 0 0 0;
	padding:5px 0;
}
.example li img{
	float:left;
	margin:0 10px 8px 0;
}
.example a img {
	border:1px solid #ccc;
	padding:3px;
	background-color:#fff;
}
.example a:hover img {
	border: #aaa 1px solid;
}
.example li h5{
	font-size: 0.8em;
	font-weight: bold;
	margin-top:0;
	margin-bottom:5px;
	color:#0054a6;
	letter-spacing:1px;
}
.example li br {
	display: none
}
.launch{
	float:right;
	margin-top:-23px;
	padding-right:10px;
	background:url(../images/link.gif) left 50% no-repeat;
	padding-left:12px;
}

/*footer class*/
#footer{
	background:url(../images/footer_bg.gif) repeat-x bottom;
	height:177px;
	width:100%;
	margin-top:-60px;
}
#footer_container{
	width:900px;
	margin:0 auto;
	padding-top:80px;
	padding-bottom:15px;
}
#footerlogo h4{
	margin:0;
	width:214px;
	height:68px;
	float:right;
	text-indent:-9999px;
	background:url(../images/footerlogo.png) left top no-repeat;
}
#footerlogo h4 a{
	height:68px;
	display:block;
}
#footer p{
	font-size:0.7em;
	color:#7c7c7c;
	margin:0;
	line-height:1.5em;
	letter-spacing:1px;
}
#footer p a{
	color:#7c7c7c;
}
#footer p a:hover{
	color:#a4a3a3;
}
#certificate{
	padding-top:5px;
}
#certificate li{
	float:left;
	text-indent:-9999px;
	margin-right:5px;
}
#certificate li a{
	display:block;
}
#certificate li#css{
	background:url(../images/icon_css.gif) left top no-repeat;
}
#certificate li#xhtml{
	background:url(../images/icon_xhtml.gif) left top no-repeat;
}
#certificate li#css a{
	height:16px;
	width:45px;
}
#certificate li#xhtml a{
	height:16px;
	width:59px;
}

/*share block*/
#share {
	margin: 5px 0 0 0;
	padding: 0;
}
#share li {
	margin: 2px 4px 0 0;
	list-style: none;
	float:left;
}
#share li.fb {
	margin-top: 3px;
}