/*global css 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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

body {font-family: Verdana, Microsoft JhengHei; font-size: 13px; background: white; color: black; min-width: 980px;}
.hidden {display: none;}
a {color: #5098A5; text-decoration: none; border-bottom: 1px dotted #aaa;}
a:hover {color: #61A5B2; border-bottom: 1px solid black;}
form {padding: 15px 10px;}
form fieldset {margin: 15px 0;}
form fieldset legend {font-size: 90%; letter-spacing: 1px; padding-bottom: 4px;}
form fieldset .text {width: 200px;}
form fieldset input:focus, textarea:focus {background: #FCFED8;}
form fieldset input, textarea {font-family: Verdana; font-size: 90%;}

#top_banner {background: url('../images/top_banner.jpg') no-repeat; height: 145px;}
#extend {background: url('../images/top_extend.jpg') repeat-x; height: 145px; z-index: -1; position: relative; top: -145px; width: 100%;}
#nav {position: absolute; top: 100px; left: 370px; width: 560px;}
#nav ul {position: relative; top: -22px; left: 50px; font-size: 120%;}
#nav ul li {float: left; background: black; list-style: none; display: block; margin: 1px;}
#nav ul li.selected a {background: #5098A5; color: white;}
#nav ul li a {display: block; border: none; text-align: center; width: 70px; padding: 20px;}
#nav ul li a:hover {background: #5098A5; color: white;}

#content {width: 90%; margin-left: 20px; position: relative; top: -125px;}
#content .content_wrap {padding: 20px 5px;}
#content .content_wrap h1 {font-size: 145%; padding-bottom: 15px;}
#content .content_wrap h1 .blog_date {float: left; background: #EDFD7B; width: 70px; height: 60px; margin-right: 10px;}
#content .content_wrap h1 .blog_date_day {display: block; text-align: center; margin-top: 8px;}
#content .content_wrap h1 .blog_date_ym {font-size: 60%; display: block; text-align: center; margin-top: 5px; font-weight: normal;}
#content .content_wrap h2 {font-size: 120%; padding: 10px 5px; background: #5098A5; color: white; font-weight: bold;}
#content .content_wrap .comment {padding: 15px 10px; margin: 15px 10px; border-left: 8px solid #eee;}
#content .content_wrap .comment p {margin-top: -5px;}
#content .content_wrap .comment .comment_date {font-size: 75%; padding: 35px 0 0 12px; display: block; font-weight: bold;}
#content .content_wrap .comment .reply_to_com {margin: 20px 0 0 10px; border-left: 8px solid #5098A5; padding: 10px; background: #eee;}
#content p {line-height: 18px; margin-top: 30px;}
#content ul {list-style: square; margin-left: 15px; padding: 5px;}
#content li {background: #eee; width: 250px; padding: 3px;}
#content del {text-decoration: line-through; color: #ccc;}
#content .status {background: #eee; display: block; padding: 7px; font-size: 80%; margin-top: 15px; font-weight: bold;}
#content .black {color: black;}
#content .brown {color: #804000;}
#content .red {color: red;}
#content .orange {color: orange;}
#content .yellow {color: yellow;}
#content .green {color: green;}
#content .blue {color: blue;}
#content .violet {color: #8000FF;}
#content .white {color: white;}
#content .warning {color: red;}
#content #home_pic {position: relative; top: -80px; float: right; padding: 10px; border: 5px solid #5098A5; margin: 20px; text-align: center; font-size: 90%; height: 320px;}
#content #home_pic:hover {border: 5px solid #61A5B2;}
#content .home_link {font-size: 115%;}

#content .portfolio {padding: 10px; margin-bottom: 20px;}
#content .portfolio:hover {background: #eee;}
#content .portfolio a img {border: 3px solid;}
#content .portfolio a:hover img {border: 3px solid;}
#content #nohover:hover {background: transparent;}

/*album*/
#content .edit_pd {background: #F7F7F7; border: 1px dotted black; margin: 5px; height: 100%; padding: 0 0 0 20px;}
#content .edit_pd:hover {border: 1px solid;}
#content .edit_pd .edit_pd_imgwrap {width: 140px;}
#content .edit_pd .edit_pd_imgwrap_text {font-size: 70%; text-align: center; background: #aaa; color: white; opacity: .7; position: relative; top: 20px; padding: 4px; display: block; cursor: pointer;}
#content .edit_pd .edit_pd_imgwrap_delete {font-size: 70%; text-align: center; background: #aaa; color: white; opacity: .7; position: relative; bottom: 20px; padding: 4px; display: block; cursor: pointer;}
#content .edit_pd .edit_pd_imgwrap_text:hover {opacity: .85;}
#content .edit_pd .edit_pd_imgwrap_delete:hover {opacity: .85;}
#content .edit_pd .edit_pd_text {display: block; font-size: 70%;}
#content .edit_pd .edit_pd_com {float: left; position: relative; left: 170px; top: 15px; height: 0;}
#content .edit_pd .edit_pd_com .edit_pd_photo_details {float: right; position: relative; left: 80px; top: -15px;}
dl {font-size: 90%; width: 300px;}
dt {font-size: 70%; margin-top: 3px; border-bottom: 1px dotted;}
dd {font-size: 85%; text-indent: 6px;}

#foot {padding: 30px; background: #2C2C2C; border-top: 3px solid #5098A5; height: 35px; display: block;}
#foot #feed_float_left {width: 200px; float: left; position: relative; top: -15px;}
#foot #feed_float_left p {float: right; font-size: 60%; position: relative; top: 10px;}
#foot p {text-align: center; font-weight: normal; color: white; font-size: 90%; letter-spacing: 1px; position: relative; top: -15px; clear: both; display: block;}