/*
Theme Name: VILIC's WordPress
Theme URI: http://www.vilic.info/
Description: A simple but nice theme for WordPress.
Author: Vilic Vane
Version: 0.2.0.3
Tags: blue, white, two-columns, flexible-width

2010 Groinup Studio
*/

body { position: relative; margin: 0px; min-width: 960px; font-family: Microsoft Yahei, Segoe UI, Arial; background-color: #F0F0F0; }
.floatclear { clear: both; }
a.anchor { position: absolute; margin-top: -10px; }

/* head */

#head,
#blogtitlebox, #blogtitlebox .left, #blogtitlebox .right,
.nav, .nav .left, .nav .right
{ background-image: url(images/head.jpg); }

#head { position: relative; height: 53px; background-position: 0px 0px; }

#blogtitlebox { display: inline; float: left; position: relative; margin: 3px 5px 0px 15px; height: 42px; background-position: 0px -53px; }
#blogtitlebox .left, #blogtitlebox .right { position: absolute; top: 0px; width: 5px; height: 42px; }
#blogtitlebox .left { left: -5px; background-position: 0px -95px; }
#blogtitlebox .middle { }
#blogtitlebox .right { right: -5px; background-position: 0px -137px; }

#logo { position: absolute; left: 4px; top: 8px; width: 32px; height: 32px; }
#blogtitle { display: block; margin-top: 4px; padding: 6px 8px 2px 42px; line-height: 30px; color: #666666; font-size: 14px; text-decoration: none; }

#navbox { float: left; display: inline; margin-left: 1px; margin-top: 11px; height: 34px; }

.nav { display: inline; float: left; position: relative; margin:0px 5px; height: 34px; background-position: 0px -179px; }
.nav .left, .nav .right { position: absolute; top: 0px; width: 5px; height: 34px; }
.nav .left { left: -5px; background-position: 0px -213px; }
.nav a { display: block; margin-top: 4px; line-height: 30px; padding: 0px 10px; color: #FFFFFF; font-size: 12px; text-decoration: none; }
.nav .right { right: -5px; background-position: 0px -247px; }

.nav:hover, .nav.current { background-position: 0px -281px; }
.nav:hover .left, .nav.current .left { background-position: 0px -315px; }
.nav:hover .right, .nav.current .right { background-position: 0px -349px; }

.subnav { display: none; }

#headfnbox { position: absolute; right: 10px; top: 14px; height: 22px; font-size: 0px; }
#searchbox, #searchbox .left, #searchbt, #rssbt, #twitterbt { background-image: url(images/fn.jpg); }

#searchbox { float: left; position: relative; width: 146px; height: 22px; background-position: 0px 0px; }
#searchbox .left { position: absolute; left: 0px; top: 0px; width: 2px; height: 22px; background-position: 0px -22px; }
#s { border-width: 0px; padding: 0px; margin: 3px 22px 0px 4px; width: 120px; height: 16px; line-height: 16px; font-family: inherit; font-size: 12px; color: #666666; background-color: transparent; }
#searchbt { position: absolute; margin: 0px; padding: 0px; border-width: 0px; right: 0px; top: 0px; width: 20px; height: 22px; cursor: pointer; background-position: -2px -22px; }

#rssbt, #twitterbt { float: left; width: 22px; height: 22px; margin-left: 3px; }
#rssbt { background-position: 0px -44px; }
#rssbt:hover { background-position: 0px -66px; }
#twitterbt { background-position: 0px -88px; }
#twitterbt:hover { background-position: 0px -110px; }

/* side */

#side { position: absolute; right: 4px; padding-bottom: 10px; width: 280px; }

#side ul.articles, ul.meta { width: 248px; padding: 0px; margin: 5px; font-size: 12px; color: #666666; list-style-position: inside; white-space: nowrap; overflow: hidden; }

#side ul.comments { list-style-type: none; padding: 0px; margin: 5px; line-height: 16px; font-size: 12px; }
#side ul.comments li { position: relative; padding: 5px 0px; }

#side ul.comments .comment { margin-left: 40px;  }
#side ul.comments li .gravatar { position: absolute; top: 5px; width: 32px; height: 32px; border-width: 0px; overflow: hidden; }

#side ul.comments li .author { }
#side ul.comments li span.author { color: #7AB4D6; cursor: default; }

#side ul.comments li .content { padding-bottom: 5px; color: #666666; text-align: justify; }
#side ul.comments li a.content:hover { color: #333333; }

#side ul.archives, #side ul.categories, #side ul.links { float: left; position: relative; display: inline; padding: 0px; margin: 5px 0px 5px 5px; width: 124px; font-size: 12px; color: #666666; list-style-position: inside; }

#side ul.tagcloud { list-style-type: none; padding: 0px; margin: 5px; text-align: center; }
#side ul.tagcloud li { display: inline; }

/* main */

#main { margin-left: 4px; margin-right: 288px; }

#main .searchinfo { padding: 5px 20px; height: 20px; line-height: 20px; font-size: 14px; color: #666666; }

#main .notfound { padding: 20px; text-align: center; }
#main .notfound .number404 { font-family: Arial Black; font-size: 256px; color: #CCCCCC; }
#main .notfound .info { font-size: 12px; color: #666666; }

#main .contentbox { padding: 15px 20px 0px 20px; }

#main .infobox { height: 10px; line-height: 10px; font-size: 10px; color: #666666; }
#main .infobox .author { float: left; }
#main .infobox .time { float: right; }

#main .titlebox { margin-top: 10px; line-height: 20px; font-size: 16px; }
#main .titlebox span.title { color: #333333; }
#main .titlebox a.title { color: #333333; text-decoration: none; }
#main .titlebox a.title:hover { color: #000000; text-decoration: none; }

#main .titlebox .commcount { margin-left: 10px; margin-top: 10px; font-size: 10px; color: #666666; text-decoration: none; }

#main .contentbox .content { margin-top: 10px; line-height: 16px; font-size: 12px; color: #666666; text-align: justify; }
#main .contentbox .content p { margin: 5px 0px; }
#main .contentbox .content img { border-width: 0px; }

#main .contentbox .content table { margin: 10px 0px; border: solid 1px #F0F0F0; background-color: #F0F0F0; }
#main .contentbox .content tr { background-color: #FFFFFF; }
#main .contentbox .content tr:hover { background-color: #F9F9F9; color: #333333; }
#main .contentbox .content td { padding: 5px 10px; }

#main .contentbox .content blockquote { margin: 10px 0px; padding: 10px 10px 10px 60px; border-radius: 4px; background: url(images/quote.jpg) no-repeat 10px 5px #F9F9F9; }

#main .contentbox .tags { margin: 5px 0px; font-size: 10px; color: #666666; }

#main .fnholder { height: 25px; }
#main .fnbox { display: none!important; display: inline; float: right; padding: 0px 8px; margin-right: 10px; border-radius: 4px; height: 20px; background-color: #AAAAAA; }
#main .fnbox a { float: left; padding-left: 12px; margin: 5px 4px; height: 10px; line-height: 10px; font-size: 10px; text-decoration: none; color: #FFFFFF; background: url(images/cfn.jpg) no-repeat; }

#main .contentholder:hover .fnbox { display: block!important; }

#main .fnbox .read { background-position: 0px 0px; }
#main .fnbox .read:hover { background-position: 0px -10px; }
#main .fnbox .comm { background-position: 0px -20px; }
#main .fnbox .comm:hover { background-position: 0px -30px; }
#main .fnbox .edit { background-position: 0px -40px; }
#main .fnbox .edit:hover { background-position: 0px -50px; }
#main .fnbox .del { background-position: 0px -60px; }
#main .fnbox .del:hover { background-position: 0px -70px; }

#main .pagenav { padding: 5px 20px; height: 20px; line-height: 20px; font-size: 10px; }
#main .pagenav a { text-decoration: none; color: #666666; }
#main .pagenav a:hover { color: #333333; }
#main .pagenav .previous { float: left; }
#main .pagenav .next { float: right; }

#main .commentbox ul.comments { padding: 0px; margin: 10px 0px; list-style-type: none; font-size: 12px; }
#main .commentbox ul.comments li { position: relative; padding: 0px 10px 5px 10px; margin-top: 2px; border-radius: 4px; line-height: 16px; }
#main .commentbox ul.comments li:hover { background-color: #F9F9F9; }
#main .commentbox ul.comments li.auth { background-color: #F0F0F0; }
#main .commentbox ul.comments .gravatar { position: absolute; top: 4px; width: 32px; height: 32px; border: solid 1px #FFFFFF; }
#main .commentbox .comment { margin-left: 40px; }
#main .commentbox .comment .commentinfo { position: relative; height: 21px; }
#main .commentbox .comment .author { float: left; margin-top: 5px; color: #7AB4D6; cursor: default; }
#main .commentbox .comment .time { float: right; color: #666666; font-size: 10px; line-height: 20px; }
#main .commentbox .comment .content { clear: both; color: #666666; }
#main .commentbox ul.comments li:hover .content { color: #333333; }

#main .commfnbox { display: none!important; display: inline; float: right; padding: 0px 8px; margin-right: 10px; border-radius: 0px 0px 4px 4px; height: 20px; background-color: #AAAAAA; }
#main div.commfnbox a { float: left; padding-left: 12px; margin: 5px 4px; height: 10px; line-height: 10px; font-size: 10px; text-decoration: none; color: #FFFFFF; background: url(images/cfn.jpg) no-repeat; }
#main div.commfnbox a:hover { color: #FFFFFF; }

#main .commentbox ul.comments li:hover .commfnbox { display: block!important; }

#main .commfnbox .reply { background-position: 0px -80px; }
#main .commfnbox .reply:hover { background-position: 0px -90px; }
#main .commfnbox .web { background-position: 0px -100px; }
#main .commfnbox .web:hover { background-position: 0px -110px; }
#main .commfnbox .edit { background-position: 0px -40px; }
#main .commfnbox .edit:hover { background-position: 0px -50px; }
#main .commfnbox .del { background-position: 0px -60px; }
#main .commfnbox .del:hover { background-position: 0px -70px; }

#main .commentbox .nocomment { margin: 10px 0px; padding: 10px 20px; font-size: 12px; color: #666666; background-color: #F9F9F9; border-radius: 4px; }

#commentform { padding: 10px 20px; margin: 10px 0px; background-color: #F9F9F9; border-radius: 4px; font-size: 12px; color: #666666; }

#commentform .userinfo input, #commentform textarea { padding: 2px; margin: 0px; border: solid 1px #CCCCCC; font-size: 12px; font-family: Microsoft Yahei, Segoe UI, Arial; color: #333333; }
#commentform .userinfo input { width: 160px; }
#commentform textarea { overflow: auto; }

#commentform .loggedas { margin-bottom: 10px; }
#commentform .userinfoline { margin: 4px 0px; }

#commentform .textbox { margin-bottom: 10px; }
#commentform .submit { padding: 0px 20px; line-height: 28px; margin: 0px; font-size: 12px; color: #333333; cursor: pointer; border: solid 1px #F0F0F0; border-radius: 4px; background: #FFFFFF url(images/button.jpg) bottom repeat-x; }
#commentform .submit:hover { border-color: #CCCCCC; }
/* side & main */

.contentholder { position: relative; border: solid 1px #E0E0E0; border-radius: 4px; margin-top: 4px; background-color: #FFFFFF; overflow: hidden; }

#main .commentbox, #side .contentbox { padding: 5px 10px; }
#main .commentbox .title, #side .contentbox .title { line-height: 20px; font-size: 14px; color: #333333; }

#main .content a,#main .tags a, #main .commentbox a, #side ul a { text-decoration: none; color: #7AB4D6; }
#main .content a:hover, #main .tags a:hover, #main .commentbox a:hover, #side ul a:hover { color: #339ED8; }

/* foot */

#foot { position: absolute; padding: 10px 20px; }
#groinuplogo { position: absolute; border-width: 0px; width: 68px; height: 24px; }
#copyrightbox { margin-left: 80px; line-height: 12px; font-size: 10px; color: #AAAAAA; }

#foot a { color: #AAAAAA; text-decoration: none; }
#foot a:hover { text-decoration: underline; }