/* =================================================

Theme Name: Rafolio
Theme URI: http://www.sgibbons.co.uk/
Description: 
Version: 1.0
Author: Steven Gibbons
Author URI: http://www.sgibbons.co.uk/

================================================= */

/* ========= Global ========= */
* { margin: 0; padding: 0; }
html { font-size: 100%; }
body { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: #FFF url('./img/bg.gif') repeat; margin: 0; }

p.nocomments { display: none!important; }

div#container { margin: 0 auto; width: 1000px; }
	div#container div#hdr { margin: 0 0 10px 0; padding: 0; width: 1000px; height: 70px; background-color: #000; }
	div#container div#hdr h1 a { float: left; width: 210px; height: 70px; background: url('./img/h1_logo.gif') no-repeat; }
	div#container div#hdr h2 a { float: right; width: 260px; height: 70px; background: url('./img/h2_logo.gif') no-repeat; }

	div#container div#groupLeft { float: left; width: 890px; }
		div#container div#groupLeft div#left { float: left; width: 110px; }
			div#container div#groupLeft div.block { margin: 0 0 10px 0; padding: 10px; width: 80px; background: #FFF; }
			div#container div#groupLeft div.block h3 { margin: 0 0 2px 0; font: bold 1.2em Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; }
			div#container div#groupLeft div.block ul { margin: 0 0 10px 0; }
			div#container div#groupLeft div.block ul.last { margin: 0; }
			div#container div#groupLeft div.block ul li { list-style: none; background: url('./img/li_bg.gif') no-repeat 0 4px; }
			div#container div#groupLeft div.block ul li a { padding: 0 0 0 6px; color: #29AAE2; text-decoration: none; font-size: 1.1em; }	
				div#container div#groupLeft div.block ul li a:hover { padding: 0 0 0 6px; color: #29AAE2; text-decoration: underline; }				

			div#container div#groupLeft div.block ul.social { margin: 10px 0 -10px 0; }
				div#container div#groupLeft div.block ul.social li { margin: 0 0 15px 0; list-style: none; background: none; }
					div#container div#groupLeft div.block ul.social li a.facebook { padding: 5px 0 5px 30px; background: url('./img/icon_facebook.gif') no-repeat; }	
					div#container div#groupLeft div.block ul.social li a.delicious { padding: 5px 0 5px 30px; background: url('./img/icon_delicious.gif') no-repeat; }	
					div#container div#groupLeft div.block ul.social li a.flickr { padding: 5px 0 5px 30px; background: url('./img/icon_flickr.gif') no-repeat; }	

		div#container div#groupLeft div#flickrFeed { margin: 0 0 10px 0; padding: 10px; float: right; width: 760px; height: 94px; background: #FFF; }
			div#container div#groupLeft div#flickrFeed h3 { margin: 0 0 5px 0; font: bold 1.2em Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; }
			
			div#container div#groupLeft div#flickrFeed div#feed ul { margin: 0 -10px 0 0; }
			div#container div#groupLeft div#flickrFeed div#feed ul li { float: left; list-style: none; margin: 0 10px 0 0; }
			div#container div#groupLeft div#flickrFeed div#feed ul li img { border: none; width: 75px; height: 75px; }
		
		div#container div#groupLeft div#blog { margin: 0!important; float: right; width: 780px; background: #FFF; overflow: auto; overflow-x: hidden; }
			div#container div#groupLeft div#blog div#content { width: 760px; padding: 10px; overflow: visible!important; }
			div#container div#groupLeft div#blog div#content div.title { margin: 0 0 10px 0; list-style: none; width: 745px; background: #000; }
			div#container div#groupLeft div#blog div#content div.title ul { list-style: none; margin: 0!important;  }
				div#container div#groupLeft div#blog div#content div.title ul li { float: left; }
				div#container div#groupLeft div#blog div#content div.title h3 { padding: 5px; font: bold 1.2em Arial, Helvetica, sans-serif; color: #FFF; text-transform: uppercase;!important }
				div#container div#groupLeft div#blog div#content div.title ul li.title { padding: 5px; font: bold 1.1em Arial, Helvetica, sans-serif; color: #FFF; text-transform: uppercase;!important }
				div#container div#groupLeft div#blog div#content div.title ul li.title a { text-decoration: none; color: #FFF; }
					div#container div#groupLeft div#blog div#content div.title ul li.title a:hover { text-decoration: underline; }
				div#container div#groupLeft div#blog div#content div.title ul li.meta { margin: -1px 0 0 0; padding: 5px; color: #B2B2B2; font-size: 1.2em; }
				
				div#container div#groupLeft div#blog div#content p { padding: 0 0 10px 0; width: 745px; color: #000; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; text-align: left!important; }
				div#container div#groupLeft div#blog div#content p.data { text-align: center!important; padding: 10px 0 40px 0; width: 745px; color: #000; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; }
				div#container div#groupLeft div#blog div#content p.data a { color: #29AAE2; text-decoration: none; }
					div#container div#groupLeft div#blog div#content p.data a:hover { text-decoration: underline; }
					
					div#container div#groupLeft div#blog div#content p a { color: #29AAE2; text-decoration: none; }
					div#container div#groupLeft div#blog div#content p a:hover { text-decoration: underline; }
					
					div#container div#groupLeft div#blog div#content p a img{ border: none!important; }
					
					div#container div#groupLeft div#blog div#content ul { margin: 0 0 0 15px!important; padding: 0 0 10px 0; color: #000; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; text-align: left!important; }
					div#container div#groupLeft div#blog div#content ol { margin: 0 0 0 15px!important; padding: 0 0 10px 0; color: #000; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; text-align: left!important; }
				
	div#container div#right { float: right; width: 100px; }
		div#container div#right div.block { margin: 0 0 10px 0; padding: 10px; width: 80px; background: #FFF; }
		div#container div#right div.block h3 { margin: 0 0 2px 0; font: bold 1.2em Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase; text-decoration: none!important; }
		div#container div#right div.block input { width: 76px; border: 1px solid #000; padding: 2px; font-size: 1.0em; }
		div#container div#right div.block a { color: #29AAE2; text-decoration: none; }
			div#container div#right div.block a:hover { text-decoration: underline; }

div.navigation { margin: 0 0 20px 0; }
div.navigation div.alignleft a { font-size: 1.2em; color: #29AAE2; text-decoration: none; }
	div.navigation div.alignleft a:hover { text-decoration: underline; }
	
div.navigation div.alignright a { font-size: 1.2em; margin: 0 20px 0 0; color: #29AAE2; text-decoration: none; }
	div.navigation div.alignright a:hover { text-decoration: underline; }	

/* ========= Comment Classes ========= */
div#content ul#commentlist { list-style: none!important; margin: 0; width: 710px!important; }
div#content ul#commentlist li { margin: 0 0 10px 0; padding: 10px; }
div#content ul#commentlist li.alt { background: #eaeaea!important; }
div#content ul#commentlist li img.avatar { float: left; margin: 0 20px 0 0; }
div#content ul#commentlist li a { color: #29AAE2; text-decoration: none; }
	div#content ul#commentlist li a:hover { text-decoration: underline; }
	
	div#content input#author,
	div#content input#email,
	div#content input#url { width: 200px; border: 1px solid #CCC; padding: 3px; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; }
	div#content textarea { width: 737px!important; height: 150px!important; border: 1px solid #CCC; padding: 3px; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; }

div#content ul#commentlist li p { width: 690px!important; }


/* ========= Important Classes ========= */
.imgReplace { background-position: top; background-repeat: no-repeat; display: block; }
.imgReplace span { width: 0px; height: 0px; overflow: hidden; display: block; }

.alignleft { margin: 0 10px 10px 0; float: left!important;}
.alignright { margin: 0 0 10px 10px; float: right!important;}
.aligncenter { display: block; margin: 0 auto 10px auto; float: none!important; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix {height: 1%;}