@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 */