@import url( "http://www.mocasting.com/main/wp-content/sitetemplates/almost-spring/templates/wp-layout.css" ); /* Basics and Typography */ body { margin: 0; padding: 0; background: #425b62; /*#555;*/ color: #333; font-size: 12px; font-family: Lucida Sans Unicode, Lucida Grande, 新細明體, Verdana, Trebuchet MS, Arial, sans-serif; text-align: left; } p { margin-bottom: 20px; line-height : 1.9em; } blockquote { margin: 0 20px; padding: 20px 20px; background: #F4F4E0; border: 2px dotted #A18A1E; } blockquote p { margin: 10px 0; margin-bottom: 20px; font-size: 1em; color: #9B9B9B; word-spacing: 0em; letter-spacing: .05em; line-height: 1.8em; } ol, ul { font-size: 12px; line-height: 1.5em; margin: 1.2em 0 1.2em 2em; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 1.2em 0; font-family: "Lucida Grande", Verdana, Tahoma, Arial, sans-serif; color: #855317; /*#9BBB38;*/ } h1, h2 { font-size: 16px; letter-spacing: .03em; line-height: 1.5em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } a { text-decoration: none; } a:link { color: #B96F17; /*#E58712;*/ } a:visited { color: #B96F17; /*#B96F17;*/ } a:hover, a:active { color: #E58712; /*#9BBB38;*/ } input, textarea, select { border: 1px solid #C1C0B5; background-color: #FAFAF0; color: #333; font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif; } textarea { width:300px; } code { font-family: monospace; color: #666; } form, img { margin: 0; padding: 0; border: 0; } .small { font-size: 1em; color: #999; } /* Layout */ #wrapper { /*margin: 0 auto;*/ margin:0 auto; width: 750px; background-color: #fafaf0; /*#FFF;*/ text-align: left; } #header { height: 135px; padding: 0 0 0 0; /*padding: 30px 0 0 0;*/ background: #F5F5E7 url(http://www.mocasting.com/main/album/89/original/29401.jpg) no-repeat bottom center; border-bottom: 1px solid #76A8DB; /*#9BBB38;*/ } /* Header Styles */ #header h1 { margin: 0px 0 4px 25px; padding-top: 8px; font-size: 1.5em; font-family: "Verdana", Lucida Grande, Tahoma, Arial, sans-serif; } #header h1 a { text-decoration: none; color: #FFFFFF; /*#80904F;*/ } #content { float: left; background-color: #f3f3e9; /*#FFF;*/ padding: 0 20px; width: 520px; voice-family: "\"}\""; voice-family: inherit; width: 480px; } html>body #content { width: 480px; } #menu { float: left; padding: 1.8em 20px 0 20px; width: 230px; voice-family: "\"}\""; voice-family: inherit; width: 190px; } html>body #menu { width: 190px; } * html #content, * html #menu { overflow: hidden; /* For IE */ } /* Lots of menu styles, so they're below */ #footer { clear: both; font-size: 0.9em; text-align: right; } /* Footer Styles */ #footer p { margin: 0; padding: 10px 10px 20px 0; background-color: #C2C2C2; /*#E8E8CE;*/ border-top: 5px solid #76A8DB; /*#9BBB38;*/ font: 8px Trebuchet MS; line-height: 1.2em; text-align: right; color: #585858; } /* menu Styles */ #menu h2 { display: block; margin: 1.2em 0 0.6em 0; padding: 2px 0 0 10px; background: #C3A581; /* url(../images/arrow.gif) no-repeat center right */ border-right: 1px solid #777; border-bottom: 1px solid #777; width: 180px; font-size: 1.1em; color: #FAFAF0; } #menu ul { margin: 0; padding: 0; list-style-type: none; } #menu ul b { font: 12px Trebuchet MS; line-height: 1.5em; font-weight: bold; } #menu ul b a{ padding-left: 18px; color: #B96F17; background: url(http://zoneone.com.hk/images/dot.gif) no-repeat center left; } #menu ul b a:hover{ color: #E58712; } #menu ul li { font : 11px lucida grande, verdana, arial, sans-serif; } #menu ul ul { margin: 1.2em 0; border-top: 1px solid #E8E7D0; background-color: #FAFAF0; font : 11px lucida grande, verdana, arial, sans-serif; } #menu ul ul li a { display: block; margin: 0px 0px 0px -10px; padding: 3px 10px 3px 10px; width: 190px; voice-family: "\"}\""; voice-family: inherit; width: 170px; color: #C3A581; background: url(http://zoneone.com.hk/images/cube_off.gif) no-repeat center right; } #menu ul ul li a:hover { color: #E58712; background: #FFF url(http://zoneone.com.hk/images/cube_on.gif) no-repeat center right; } html>body #menu ul ul li a { width: 170px; } /* Nested lists? */ #menu ul ul ul { margin: 0; border: none; } #menu ul ul ul li { margin: 0 0 0 -10px; padding: 0 0 0 25px; border-bottom: none; border-top: 1px solid #E8E7D0; } #menu ul ul ul li a { margin: 0 0 0 -25px; padding: 2px 10px 0 25px; width: 190px; voice-family: "\"}\""; voice-family: inherit; width: 155px; } html>body #menu ul ul ul li a { width: 155px; } /* Blog */ .post { border-bottom: 1px dashed #9D5D0F; margin-bottom: 50px; } .posttitle { margin-top: 30px; width: 100%; color: #FFF; overflow: auto; /* Width and overflow to clear '.posttitle a' */ } .posttitle a { float: left; padding: 3px 10px 1px 10px; background: #FAFAE0; } .posttitle a:link, .posttitle a:visited { color: #333; border-top: 1px solid #9D5D0F; border-right: 1px solid #9D5D0F; border-left: 1px solid #9D5D0F; } .posttitle a:hover, .posttitle a:active { background: #9D5D0F; color: #fff; /*#80904F;*/ } .postmeta { margin-top: 0; padding-top: 4px; border-top: 1px solid #9D5D0F; font: 13px lucida grande, verdana, arial, sans-serif; word-spacing: .1em; letter-spacing: .03em; text-align: right; color: #999; background: none; } .postentry { font: 13px lucida grande, verdana, arial, sans-serif; letter-spacing : .08em; word-spacing : .1em; } .postentry a:hover{ border-bottom: 2px dashed #E58712; } .permalink { font : 11px lucida grande, verdana, arial, sans-serif; margin: 0 .5em 0 0; padding: 0 0 0 13px; background: url(/main/wp-content/sitetemplates/almost-spring/img/permalink.gif) no-repeat center left; } .commentslink { font : 11px lucida grande, verdana, arial, sans-serif; margin: 0 .5em 0 0; padding: 0 0 0 16px; background: url(/main/wp-content/sitetemplates/almost-spring/img/commentslink.gif) no-repeat center left; } /* Comments */ #commentlist { margin: 1.2em 0; padding: 0; border-bottom: 1px solid #E8E7D0; list-style-type: none; } #commentlist li { border-top: 1px solid #E8E7D0; padding: 1px 20px; background-color: #FFF; } .alt { background-color: #FAFAF0 !important; } .commenttitle { margin-bottom: 0; font-size: 1.1em; } .commentmeta { margin-top: 0; font-size: 0.9em; color: #999; } #comment { width: 98%; } #topbar { margin: 0 auto 5px auto; padding: 0; height:15px; width: 750px; text-align: right; } #topbar a:link { text-decoration: none; page-break-after: always; } #topbar a:visited { text-decoration: none; } #sidebararea #sidebarmenu { text-align: left; } #sidebarcontents { text-align: left; } /* Begin Images */ p img { padding: 0; max-width: 100%; } /* Using 'class="alignright"' on an image will (who would've thought?!) align the image to the right. And using 'class="centered', will of course center the image. This is much better than using align="center", being much more futureproof (and valid) */ img.centered { display: block; margin-top: 15px; margin-bottom 15px; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 5px 15px; display: inline; } img.alignleft { padding: 4px; margin: 0 15px 5px 0; display: inline; } .alignright { float: right; } .alignleft { float: left; } img.linkimg { float: left; margin: 0 0 0 10px; display: inline; } /* End Images */