/* -------------------------------------------------- ningkiling.com PAGE STYLES Last revised 26 October 2009 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- HOME -------------------------------------------------- */ /* Gallery */ #home .gallery { min-height: 75px; width: 100%; background: transparent; } #home .gallery li { width: 8.875em; /* 142px */ float: left; margin: 0 1.5em 1.5em 0; /* height: 6.375em; background: #000; */ } #home .gallery li.last { margin-right: 0; } #home .gallery li img { width: 8.675em; /* @140px */ border: .1em solid #DCDCDC; /* Gainsboro */ opacity: 1; /* CSS3 property not widely supported */ -moz-opacity: 1; /* legacy Mozilla */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */ filter: alpha(opacity=100); /* Required for IE browsers */ } #home .gallery li img:hover { opacity: .67; -moz-opacity: .67; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=67)"; filter: alpha(opacity=67); } #home .gallery li p { font-size: 12px; line-height: 2; background: #FFF; /* White */ } #home .gallery li p span { /* status or comment segment */ font-style: italic; } /* -------------------------------------------------- PROJECTS -------------------------------------------------- */ #projects p + .entry.first { margin-top: 1.5em; border-top: .3em double #C0C0C0; /* Silver */ } #projects .entry { position: relative; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: .1em dotted #C0C0C0; /* Silver */ } #projects .entry.last { margin-bottom: 0; border-bottom: none; } #projects .entry h2 { font-size: 1em; line-height: 1.5; text-transform: none; letter-spacing: normal; margin: 1.5em 0 0; } #projects .entry h2 span { color: #FFF; /* White */ font: 10px/1.8 "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", Courier, monospace; text-transform: uppercase; letter-spacing: .1em; margin-left: .9em; padding: .45em; background: #A9A9A9; /* DarkGray */ } #projects .entry .inset img { border: .1em solid #DCDCDC; /* Gainsboro */ opacity: 1; /* CSS3 property not widely supported */ -moz-opacity: 1; /* legacy Mozilla */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */ filter: alpha(opacity=100); /* Required for IE browsers */ } #projects .entry .inset img:hover { opacity: .67; -moz-opacity: .67; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=67)"; filter: alpha(opacity=67); } #projects .entry .inset + p { font-size: 1em; line-height: 1.5; } #projects .entry .inset + p:first-line { color: #696969; /* DimGray */ font-weight: normal; } #projects .entry .posted { clear: both; } #projects .entry .tags dfn { background-color: #D4D4E9 !important; /* Navy 25% */ } #projects .entry .toplink { position: absolute; top: -.375em; right: 0; } /* Project detail */ #projects .tabberlive .tabbertab > h2 { margin-top: 0; } #projects .tabbertab .tags.link { margin-top: 2em; } /* Thumbnail galley */ #projects .galley { } #projects .galley li { width: 4.34375em; /* 69px */ float: left; margin: 0 .75em 1.5em 0; } #projects .galley li.last { margin-right: 0; } #projects .galley li img { width: 4.34375em; /* 69px */ opacity: 1; /* CSS3 property not widely supported */ -moz-opacity: 1; /* legacy Mozilla */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */ filter: alpha(opacity=100); /* Required for IE browsers */ } #projects .galley li img:hover { opacity: .67; -moz-opacity: .67; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=67)"; filter: alpha(opacity=67); } #projects #swap { background: transparent url(http://www.ningkiling.com/images/utility/background-screenshot.png) no-repeat right 58px; } #projects #swap img { max-width: 100%; margin-bottom: 1.5em; } #projects #swap a.link { font-style: italic; } /* -------------------------------------------------- SEARCH -------------------------------------------------- */ #search h1 + .toplink { position: relative; top: .375em; float: right; } #search h2 a.heading:hover:after { content: "\2026"; } #search #hold { cursor: n-resize; } /* Advanced search form */ #search #search_container { float: left; /* fit enclosed contents */ margin-top: .75em; padding: .75em .75em 0; border: .1em solid #DCDCDC; /* Gainsboro */ } #search #search_container .column { width: 18.775em; margin-right: .75em; } #search #search_container .column.right { margin-right: 0; } #search fieldset { width: 17.075em; } #search fieldset div { margin-top: .375em; } #search fieldset input { margin-bottom: .75em; } #search .input { width: 97%; } #search input[name="keywords"] { /* See also global CSS */ width: 92%; } #search #search_submit { float: right; margin: .75em 0; } /* Search results */ #search h1 + p > span:first-child { color: #000080; /* Navy */ font-weight: normal; font-family: "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", Courier, monospace; text-transform: none; letter-spacing: normal; padding: 0 .25em; background-color: #D4D4E9; /* Navy 25% */ } #search .entry { position: relative; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: .1em dotted #C0C0C0; /* Silver */ } #search .entry.first { margin-top: 1.5em; border-top: .3em double #C0C0C0; /* Silver */ } #search .entry.last { margin-bottom: 0; border-bottom: none; } #search .entry h2 { font-size: 1em; line-height: 1.5; text-transform: none; letter-spacing: normal; margin: 1.5em 0 0; } #search .entry .inset img { border: .1em solid #DCDCDC; /* Gainsboro */ opacity: 1; /* CSS3 property not widely supported */ -moz-opacity: 1; /* legacy Mozilla */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */ filter: alpha(opacity=100); /* Required for IE browsers */ } #search .entry .inset img:hover { opacity: .67; -moz-opacity: .67; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=67)"; filter: alpha(opacity=67); } #search .entry .inset + p { font-size: 1em; line-height: 1.5; } #search .entry .inset + p:first-line { color: #696969; font-weight: normal; } #search .entry .link { font-style: italic; } #search .entry .posted { clear: both; } #search .entry .toplink { position: absolute; top: -.375em; right: 0; } /* -------------------------------------------------- BLOG -------------------------------------------------- */ #blog .entry { clear: both; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: .1em dotted #DCDCDC; /* Gainsboro */ } #blog .entry h2 { font-weight: bold; text-transform: none; letter-spacing: normal; margin-top: 0; } #blog .entry h2 span { color: #FFF; /* White */ font: 10px/1.8 "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", Courier, monospace; text-transform: uppercase; letter-spacing: .1em; float: right; padding: 0 .375em; background: #A9A9A9; /* DarkGray */ } #blog .entry.first h2.title { font-weight: bold; font-size: 18px; line-height: 1.3333; text-transform: none; letter-spacing: normal; margin: 0 0 1.3333em; } #blog .entry.single h2 { font-weight: normal; font-size: 15px; line-height: 1.6; text-transform: uppercase; letter-spacing: .1em; margin-top: 1.6em; } #blog .entry.first p { font-size: 18px; line-height: 1.3333; } #blog .entry.first p + p { font-size: 1em; line-height: 1.5; } #blog .entry.first h2 + p:first-line, #blog .entry.first .inset + p:first-line { color: #808080; /* Gray */ font-weight: bold; } #blog .entry.last, #blog #content .entry.single { padding-bottom: none; border-bottom: none; } #blog .entry .date { font-size: 15px; line-height: 1.6; text-transform: uppercase; letter-spacing: .1em; margin: 0; } #blog .link { margin-top: 1.5em; } #blog #content .entry .posted { clear: both; padding-top: 1.5em; background: transparent url(../images/utility/background-posted.gif) no-repeat top left; } /* -------------------------------------------------- ABOUT -------------------------------------------------- */ /* -------------------------------------------------- CONTACT -------------------------------------------------- */ .vcard { } .vcard .org { font-weight: bold; } #mail-form { position: relative; padding: .75em 1em 1em; border: .1em dotted #C0C0C0; /* Silver */ background-color: transparent ; } #mail-form input.field, #mail-form textarea { font: 1em/1 "Gill Sans", "Gill Sans MT", Arial, sans-serif; width: 95%; } #mail-form h2 { margin: 0; } #mail-form h3 { margin: 0; } #mail-form p { margin-bottom: 1em; } #mail-form select { margin-bottom: 1.5em; } #mail-form .buttons { margin-top: 1.5em; } #mail-form .toplink { position: absolute; right: 1.125em; bottom: 1.125em; } /* -------------------------------------------------- REFERRERS -------------------------------------------------- */ #referrers #content { width: 100%; } #referrers table { border: .1em solid #D4D4E9; /* Navy 25% */ } #referrers table th, table td { border-bottom: .1em solid #D4D4E9; /* Navy 25% */ } #referrers table th { font-size: .75em; text-align: left; text-transform: uppercase; letter-spacing: .1em; padding: .5em 1em; border-right: .4em double #FFA280; /* OrangeRed 50% */ } #referrers table td { font-size: .9375em; padding: .4em .8em; } #referrers table a { border-bottom-style: dotted !important; } #referrers #footer { margin-left: 2em; } /* -------------------------------------------------- SITE MAP -------------------------------------------------- */ #sitemap #content p + ul { margin-top: 1.5em; border-top: .3em double #C0C0C0; /* Silver */ } #sitemap #content ul li h3 { margin-bottom: 0; } #sitemap #content ul li p { } #sitemap #content ul li h3 + p { }