/*  
Theme Name: unartifex
Theme URI: http://www.unartifex.com/
Description: WP theme for unartifex.com
Version: 3.5
Author: Colin Tan
Author URI: http://www.unartifex.com/
*/

/* Generic Elements */
html, body { margin: 0 0; padding: 0 0; height: 100%; }
body { margin: 0 0; font-family: Arial, sans-serif; font-size: 75%; color: #444; background: #fff url('images/bg1.jpg') repeat-x top left; }
/*div { border: 1px solid grey; }*/
p { font-size: 1.0em; line-height: 1.5em; }
a, a:visited, a:active { color: #ff3388; text-decoration: none; border: none; }
a:hover { color: #888; }
h1, h2, h3, h4 { margin: 0 0; padding: 0 0; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
ul { list-style: square; list-style-position: inside; color: #888; margin: 0 0; padding: 0 0; }
li { margin: 0 0 5px; }
small { text-transform: uppercase; }
a img { border: none; }

.thumbnail img, .thumbnail span, .post img { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* Sections */
#wrapper { width: 960px; margin: 0 auto; }
#welcome, #header, #mainmenu, #footer { width: 920px; margin: 0 auto; }
#welcome { height: 40px; background: url('images/bg2.jpg') no-repeat top; padding: 0 0; }
#header { height: 120px; padding: 0 0; background: url('images/bg3.jpg') no-repeat top; }
#mainmenu { height: 30px; padding: 0 0; background: url('images/bg4.jpg'); }
#content { width:  920px; margin: 20px auto; }
#footer { font-size: 0.9em; color: #888; padding: 10px 0; background: url('images/border1.png') no-repeat top; line-height: 1.5em; margin: 40px auto; }

/* Welcome */
#welcome .hello { font: normal 1em Futura, Arial; color: #fff; float: left; margin: 13px 0 0; padding: 0 0; text-shadow: 1px 1px 0 #000; }
.socialnetwork { float: right; margin: 5px 0 5px 5px; }

/* Menu */
 .menu { position: relative; height: 32px; padding: 0 0; margin: 0 0; overflow: hidden; float: left; }
 	.menu li { float: left; list-style: none; }
	.menu li.back { border-bottom: 2px solid #ff3388; width: 9px; height: 29px; z-index: 8; position: absolute; }
	.menu li a , .menu li a:visited, .menu li a:active { font-size: 1.1em; color: #888; letter-spacing: 0; text-transform: uppercase; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: 0 10px; padding: 8px 5px;  }   
	.menu li a:hover { color: #222; }
	
/* Portfolio */
.thumbnail { width: 920px; height: 260px; margin: 0 0; position: relative; clear: both; background: url('images/bg-thumbnail.png') no-repeat; }
.thumbnail span { width: 880px; height: 60px; position: absolute; top: 0; left: 0; text-transform: uppercase; text-shadow: 1px 1px 1px #000; padding: 180px 20px 0; background: url('images/bg5.png') repeat-x bottom; }
.thumbnail a, .thumbnail a:visited, .thumbnail a:active, .thumbnail a:hover { color: #fff; }
.tabs { list-style: none; margin: 0 0; padding: 0 0; float: right; right: 0; }
.tabs li { display: block; float: left; border: 1px solid #eee; padding: 6px; margin: 10px 3px; }
.backtotop { width: 920px; text-align: center; clear: both; font-size: 0.9em; }

/* Misc */
.left-col { width: 450px; float: left; margin: 10px auto; }
.right-col { width: 450px; float: right; margin: 10px auto; }
.left-col p, .right-col p { margin: 5px 0; padding: 0 5px; font-size: 0.8em; text-transform: uppercase; color: #888; }
.left-col a img, .right-col a img { border: 1px solid #ccc; }

/* Footer */
#footer { margin: 20px auto 10px; }
#footer a, #footer a:visited, #footer a:active { color: #444; }
#footer a:hover { color: #111; }

/* Blog */
#sidebar { width: 300px; float: right; background: #f3f3f3; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 2px solid #ddd; }
#main-col { width: 600px; }

#twitter { width: 300px; margin: 0 0 20px 0; padding: 0 0; }
#twitter .twitter-ava { margin: 5px 5px 10px 0; display: block; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
#tweet { width: 222px; margin: 5px 0 0 78px; color: #222; }
#tweet ul { list-style: none; }
#tweet li { margin: 0 5px 5px; color: #444; }
#tweet small a, #tweet small a:visited, #tweet small a:active { color: #aaa; }
#tweet small a:hover { text-decoration: underline; }
#twitter .clear { clear: both; }

.menu-headers { margin: 0 0; padding: 0 0 5px 0; color: #444; font: bold 0.9em Georgia; text-transform: uppercase; border-bottom: 1px dotted #ccc; }
.menu-headers a, .menu-headers a:visited, .menu-headers a:active { color: #444; }
.menu-headers a:hover { text-decoration: underline; }
#sidebar ul { margin: 0 0 20px 0; }
.sidebar-menu { list-style: none; }
.sidebar-menu li { margin: 0 0; }
.sidebar-menu li a { width: 280px; padding: 10px; margin: 0 0; border-bottom: 1px dotted #ccc; font: normal 1.0em Arial; text-transform: uppercase; display: block; width: 280px; }
.sidebar-menu li a, .sidebar-menu li a:hover, .sidebar-menu li a:visited { color: #222; }
.sidebar-menu li a:active { color: #ff3388; }
.sidebar-menu li a:hover { background-color: #fff; }
.blog-menu { clear: both; }

.post { width: 540px; margin: 0 0 20px 0; padding: 0 0 5px 0; }
.title-date { width: 540px; padding: 0 0; margin-bottom: 10px; }
.title-date small { text-transform: uppercase; color: #888; }
.title-date a, .title-date a:visited, .title-date a:active { color: #444; }
.title-date a:hover { color: #888; }
.date-stamp { width: 50px; height: 50px; background-color: #eee; -webkit-border-radius: 5px; -moz-border-radius: 5px; float: right; }
.month { background-color: #444; color: #fff; font: bold 0.9em Georgia; text-transform: uppercase; padding: 3px; margin: 0 0; text-align: center; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 4px; }
.day { color: #444; font: bold 2em Georgia; text-transform: uppercase; margin: 0 0; padding: 0 0; text-align: center; }

.page-title { width: 540px; border-bottom: 1px dotted #ccc; padding: 0 0 5px; margin-bottom: 20px; font-size: 1.3em; font-weight: bold; }
.page-nav { width: 540px; font-family: Georgia; padding: 5px 0 0; color: #888; margin-bottom: 20px; border-top: 1px dotted #ccc; }
.page-nav a, .page-nav a:visited, .page-nav a:active { color: #888; }
.page-nav a:hover { text-decoration: underline; }
.page-nav .current { color: #222; }
.pages, .page { padding: 5px; margin: 0 3px; color: #aaa; }
.page a:hover { text-decoration: underline; }
#archives ul { list-style: none; }
#archives li { border-bottom: 1px dotted #ccc; }

#comments { margin-top: 40px; }
#comments p { margin-left: 46px; }
#comments .headers { font-size: 1.2em; color: #999; text-align: right; padding: 3px 0; border-bottom: 3px solid #eee; }
.commentlist { margin: 0 0; padding: 0 0; list-style: none; }
.commentlist .avatar { margin: 0 10px 10px 0; display: block; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.commentlist cite, .commentlist cite a, .commentlist cite a:visited, .commentlist cite a:active { font: bold 1.1em Georgia; color: #3a4346; padding-top: 10px; }
.commentlist cite a:hover { color: #ff3388; }
.commentmetadata, .commentmetadata a, .commentmetadata a:visited, .commentmetadata a:active { font-size: 0.9em; color: #999; }
.commentmetadata a:hover { color: #3a4346; }
.commentlist li { border-bottom: 1px solid #e5e5e5; padding: 10px 0; }

#searchbar { float: right; padding: 4px 0 0;}
#searchbar input { border: 1px solid #fff; text-align: right; font: normal 1.1em Arial; text-transform: uppercase; color: #888; }
#searchform #s { border: 1px solid #ccc; }

.snap_nopreview li {
	display: block; float: left; margin-right: 10px;
}