/*
Theme Name: Handgloves
Theme URI: http://handgloves.co.uk/
Description: A clean theme that uses whites, greys & helvetica. Now with theme options in a back-end admin panel. V1.1 co-developed with the super talented <a href="http://jeremy.infinicastonline.com/">Jeremy Boyd</a>
Version: 1.1
Author: George Wiscombe
Author URI: http://www.georgewiscombe.com
Tags: two columns, clean, white, grey, helvetica, jquery

Handgloves is a clean theme that uses whites, greys & helvetica. It is built ready for Flickr & Twitter and uses jQuery to make the magic happen. 

*/




body {
background: url(css/images/see_bg.jpg) top left repeat;
font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
font-size: .7em; /* Resets 1em to 10px */
margin:0;
}



/*-------------------------------------------------------------

				     Header & Pre-Header

------------------------------------------------------------*/

/* ----		Pre-Header Search Area		---- */

XXXX#pre-header #ph-nav {
width:960px;
margin:0 auto;
height:30px;
padding-right:25px;
}

	XXXX#ph-nav .search {
	width:160px;
	float:right;
	margin:0;
	height:30px;
	background:#2a2a2a url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/pre-header/module-left.jpg) top left no-repeat;
	}
	
		XXXX#ph-nav .search input.search-input {
		width:123px;
		height:23px;
		margin:0 0 0 15px;
		padding:0 0 0 0;
		background:url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/pre-header/search-input-bg.jpg) top left no-repeat;
		border:none;
		float:left;
		color:#fff;
		font-weight:bold;
		padding:4px 0 0 6px;
		}
		
		XXXX#ph-nav .search input.search-button {
		width:14px;
		height:14px;
		float:left;
		margin:6px 0 0 0;
		padding:0;
		}

	XXXX#ph-nav .search-end {
	width:14px;
	float:right;
	height:30px;
	margin: 0;
	float: right;
	padding: 0;
	background:#2a2a2a url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/pre-header/module-right.jpg) top left no-repeat;
	}

/* ----		Header, Blog Name & Description		---- */

#name {
width:960px;
height:268px;
text-indent:-9000px;
float:left;
font-size:4em;
line-height:1.5em;
background-image:url(css/images/header/see_header.jpg);
margin-top:12px;

}
	#name h1 {
	margin:20px 14px 0 0;
	}

		#name a {
		text-decoration:none;
		color:#F00;
		font-style:italic;
		}
		
		#name a:hover {
		text-decoration:underline;	
		}

#description h2 {
width:960px;
float:left;
line-height:15px;
font-size:2.5em;
color:#FFF;
margin-top:-17px;
text-align:right;
font-style:italic;
}





/*-------------------------------------------------------------

				   Navigation with Subtitles

------------------------------------------------------------*/

#navigation {
margin:0;
padding:0;
float:left;
height:87px;
width:713px;
background:url(css/images/navigation/nav-bg.jpg) left repeat-x;
list-style:none;
display:inline;
}

#main-column ul, #main-column ul, li {
margin:0;
display:inline;
}

	.navigation-element {
	float:left;
	display:inline;
	height:84px;
	width:140px;
	background:url(css/images/navigation/nav-divide.jpg) top right no-repeat;
	padding:21px 0 0 20px;	
	font-size:18px;
	font-weight:bold;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
	font-weight: bold;
	clear:right;
	color:#2a2a2a;
	text-decoration:none;
	}
	
	.navigation-element:hover, #navigation li.active a {
	background:#fff;
	}
	
	
	
	.navigation-element span {
	float:left;
	font-size:10px;
	width:110px;
	margin-top:5px;
	}
	
	
	
	
	
	
	
/*-------------------------------------------------------------

						Post

------------------------------------------------------------*/

.post {
Xfloat:left;
Xwidth:615px;
margin: 10px 0 10px 20px; 
}

.post img {
float:left;
border:3px solid #dfdede;
margin:0 0 15px 0;
}

.post p {
font-size:1.3em;
line-height:1.3em;
}

.post h3 {
font-size:15px;
letter-spacing:-0.01em;
margin:20px 0 0 0;
}

.post-wrap .post ul {
font-size: 13px;
padding: 10px 20px;
margin: 0 0 0 20px;
float: left;
width: 615px;
color: #2a2a2a;
}

	.post-wrap .post ul li {
	padding: 5px 10px 5px 15px;
	clear: left;
	float: left;
	font-weight: bold;
	background: url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/templates/bullet.png) center left no-repeat;
	}

.post-header {
Xfloat:left;	
Xwidth:615px;
margin-bottom:25px;
padding-bottom:13px;
border-bottom:4px solid #dfdede;
}

	.post-header h2 {
	font-size:40px;
	line-height:44px;
	letter-spacing:-1px;
	margin:0;
	width:500px;
	}

		.post-header h2 a {text-decoration:none;}
		.post-header h2 a:hover {text-decoration:underline;}
		
	
	.post-header p {
	width:200px;
	font-size:1em;
	margin-top:8px;
	float:right;
	line-height:15px;
	text-align:right;
	}
	
	.meta {
	Xfloat:left;
	Xwidth:615px;
	font-weight:bold;
	margin-top:10px;
	border-bottom:2px solid #dfdede
	}
	
		.meta .meta-comments {float:right}
	
	.meta p {
	margin-top:5px;	
	}
	
	.meta a {
	background:#cae0da;
	text-decoration:none;
	font-size:13px;
	letter-spacing:-0.01em;
	padding:4px 6px 3px 6px;
	}
	
	.meta a:hover {
	background:#2a2a2a;
	color:#fff;
	}
	
	
/* posts nav */

#post-nav-wrap {
float:left; 
width:920px; 
background-color:#fff; 
font-size:13px; 
padding:0px 20px; 
color:#2e2e2e; 
border-top:1px solid #ece8e6;
}

#post-nav-wrap .post-nav {
float:left; 
width:120px; 
margin:7px 0; 
font-weight:bold;
}

	#post-nav-wrap .post-nav a {
	text-decoration: none;
	}

.post-nav-newer {
background: url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/arrow-left.gif) center left no-repeat;
padding-left: 15px;
}

.post-nav-newer, .post-nav-older  { text-decoration:none; }
.post-nav-newer:hover, .post-nav-older:hover { color: #000; }

.post-nav-older {
background: url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/arrow-right.gif) center right no-repeat;
text-align: right;
padding-right: 15px;
}

#post-nav-wrap .info {
float:left; 
width:390px; 
text-align:center; 
margin:7px 0; 
color:#ccc;
}	





/*-------------------------------------------------------------

						Sidebar

------------------------------------------------------------*/


#sidebar {
padding:18px 0 0 15px;
width:207px;
margin:10px 0 15px 5px;
float:left;
list-style:none;
background:url(css/images/sidebar/header-bg.jpg)) top right no-repeat;
}

	#sidebar h2 {
	background:#cae0da;
	width:auto;
	float:left;
	font-size:15px;
	letter-spacing:-0.01em;
	margin:30px 0 0 0;
	padding:5px 9px 4px 9px;
	clear:right;
	}
	
	#sidebar ul, #sidebar ul li {
	margin:0;
	padding: 0;
	list-style:none;
	font-size:13px;
	float:left;
	width:178px;
	}
	
	#sidebar ul {
	margin-top: 5px;
	} 

	#sidebar ul li {
	border-bottom:2px dotted #ccc;
	padding:0 0 0 0;
	}
	
		#sidebar ul li ul {
		margin-top:0;
		}
	
		#sidebar ul li ul li {
		border-top: 2px dotted #ccc;
		border-bottom: none;
		padding: 0 0 6px 19px;
		width: 160px;
		height: 19px;
		}

		#sidebar ul li a {
		font-weight:bold;
		text-decoration:none;
		color:#999;
		line-height: 26px;
		padding:0 0 0 19px;
		}
		
			#sidebar ul li a:hover {
			font-weight:bold;
			text-decoration:none;
			color:#2a2a2a	
			}
			
			#sidebar ul li.current-cat {
			padding-left:19px;
			width:157px;
			}
			
			#sidebar ul li.current-cat a, #sidebar ul li .currenttab {
			color:#2a2a2a
			}
			
				ul#archive-year a {
				padding:0 0 0 20px;
				}
				
				ul#archive-year {
				margin:0;
				}
		
/* */

#handgloves-query {
width:auto;
float:left;
}

#handgloves-query ul {
width:auto;
height:auto;
float:left;
margin:15px 0 10px 0;
padding:0;
}


#handgloves-query ul li {
width:auto;
height:auto;
float:left;
margin:0 8px 0 0;
padding:1px;
border:0;
}

#handgloves-query ul li a {
background:#cae0da;
float:left;
font-size:15px;
letter-spacing:-0.01em;
padding:1px 9px 0 9px;
color: #2a2a2a;
}

#handgloves-query ul li a:hover {
background:#2a2a2a;
color:#fff;
}

X#handgloves-query ul.tabs-nav li.tabs-selected a {
	background:#fff;
}

X#handgloves-query ul.tabs-nav li.tabs-selected a {
	color:#2a2a2a;
}

#handgloves-query .tabs-hide {
	display: none;
}	

/*latest posts */
	.latest-post {
	width:197px;
	height:55px;
	font-size:13px;
	float:left;
	Xbackground:url(css/images/navigation/nav-bg.jpg) left repeat-x;
	color:#999;
	text-decoration:none;
	margin-bottom:10px;
	display:block;
	}

	.latest-post:hover {
	background:#d7e5e1;
	}
	
	.latest-post p {
	width:140px;
	margin:15px 0 0 15px;
	float:left;
	font-weight:bold;
	}
	
	.latest-post p.times {
	font-size:10px;
	margin-top:5px;
	}
	
	.latest-post .next {
	float:right;
	width:34px;
	height:53px;
	Xbackground:url(css/images/sidebar/module-bg.png) bottom right no-repeat;
	}
	
	.latest-post:hover {
	color:#2a2a2a;
	}
	
	  .latest-post:hover .next {
	Xbackground:url(css/images/sidebar/module-bg.png) top right no-repeat;
	}
	
		
		
/*latest tweets */
.latest-tweet {
width:180px;
font-size:13px;
line-height:15px;
float:left;
background: url(css/images/sidebar/twitter-bg.png) bottom left repeat;
color:#2a2a2a;
text-decoration:none;
padding:15px 15px 0 15px;
float:left;
font-weight:bold;
}

.latest-tweet:hover p.follow-twitter {
color:#2a2a2a;
text-decoration:none;
}

.latest-tweet p {
background:#fff;
width:149px;
padding:10px 10px 8px 10px;
margin:0 0 0 1px;
}

	.latest-tweet p.follow-twitter {
	float:left; 
	background:none; 
	text-align:center; 
	text-decoration:underline; 
	color:#999
	}

	.follow-twitter span {
	padding:5px 0 7px 0;
	float:right;
	}
	
/* flickrs */

#ani3 a img {
	border:2px solid #ccc;
	margin:0 8px 9px 0;
	height:55px;
	width:55px;
}

#ani3 a img:hover {
	border:2px solid #eaeaea;
}


.jq-error {
font-size:15px; 
font-weight:bold; 
text-align:center; 
width:200px; 
float:left;
margin-top:8px;
}

.jq-error-p {
font-size:13px; 
font-weight:bold; 
width:200px; 
text-align:center; 
margin-top:5px;
float:left;
}










/*-------------------------------------------------------------

						Structure

------------------------------------------------------------*/

img {border:none;}

.times {
font-family: Times "Times New Roman", Times, serif;
text-transform:uppercase;
letter-spacing:0.2em;
font-weight:bold;
}

h2 {
font-size:20px;
margin:10px 0 5px 0;}


h2 + ul {
margin: -10px 0 0 0;
}

a {color:#2a2a2a;}

a:hover {text-decoration:none;}

blockquote {
margin: 0 0 25px 0;
padding: 30px 55px 1px 55px;
font-size: 1.15em;
line-height: 1.35em;
font-weight: bold;
float: left;
background: url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/templates/blockquote-bg.png);
}

	blockquote a {
	background-color: #CAE0DA;
	padding: 3px 3px 2px 3px;
	color: #2a2a2a;
	text-decoration: none;
	}
	
	blockquote a:hover {
	background-color: #2a2a2a;
	color: #fff;
	}

/* ----		Wraps to determine structure		---- */

#handgloves {
width:960px;
margin:0 auto;
} 

#pre-header {
border-top:7px solid #2a2a2a;
width:100%;
}

#header {
float:left;
width:960px;
}

#content-wrap {
float:left;
width:960px;
margin:15px 0 0 0;
}

.post-wrap {
float:left;
width:713px;
border-top:8px solid #fff;
} 

#sidebar-wrap {
float:left;
width:100%;
margin:0;
border-bottom:8px solid #fff;
background:#fff url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/sidebar/stripe-bg.jpg) 670px 500px repeat-y;
}

#main-column {
float:left;
width:713px;
}

#comment-wrap {
width:610px;
margin:0 25px;
padding:0;
float:left;
font-size: 12px;
}



/* ----			Footer Area			---- */
	
#footer {
height:52px;
width:100%;
background:#f3f1f0 url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/footer/wordpress-bg.jpg) 10px 0 no-repeat;
float:left;
margin-top:4px;
font-size:1.1em;
font-weight:bold;
line-height:1.3em;
margin-bottom:30px;
color:#999;
}

	#footer a {color:#999;}
	#footer a:hover {color:#666;}

#footer p#theme-info {
width:350px;
float:left;
margin:13px 0 0 90px;
}

#footer p#subscribe {
background:#f3f1f0 url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/footer/rss-icon.jpg) right top no-repeat;
width:350px;
float:right;
padding:1px 20px 0 0;
margin:26px 26px 0 0;
text-align:right
}



/* Templates */

#error-404 #handgloves {
padding:26px 0 206px 0;
margin:100px auto;
background:url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/templates/404.png) top center no-repeat;
}

#error-404 #handgloves #header {
margin-top:100px;
}

#error-404 .error-message {
font-size:21px;
width:300px;
float:left;
line-height:29px;
margin-left:350px;
font-weight:bold;
}

.archive-header {
background:#fff url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/templates/comment-stripe.gif) bottom right no-repeat;
color: #ccc;
border-bottom:4px solid #eaeaea;
}
















/*-------------------------------------------------------------

						  Comments

------------------------------------------------------------*/

/* Comments List */

#comment-wrap ol {
list-style-type:decimal;
list-style-position: inside;
padding:0;
}

#comments .box {
padding: 20px;
background:url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/bg.jpg);
width: 255px;
float: left;
line-height: 15px;
margin: 5px;
}

#comments div.box1 {
width: 100px;
}
#comments div.box2 {
width: 280px;
}


/* Comment Meta-Data */

.comment-meta{
float: left;
margin: 0 0 10px 0;
width: 100%;
}

.avatar {
float: left;
border: 2px solid #fff;
margin: 0 10px 5px 0;
}

.comment-author {
font-weight: bold;
margin-top: 5px;
width: 202px;
float: right;
}

.comment-date{
width: 202px;
float: right;
margin-top: 3px;
}

.comment-text {
float: left;
}


/* Form Area */

#comments-form {
float: left;
width: 605px;
padding-top: 5;
margin-top: 25px;
border-top: 1px solid #dfdede;
}

#comments-form p {
float: left;
width: 400px;
margin: 5px 0 7px 0;
}

#comments-form p.comments-txtarea {
width: 600px;
}

#comments-form label {
font-weight: bold;
float: left;
padding: 10px 0 0 0;
}

#comments-form input {
float: right;
padding: 6px 4px;
border: 3px solid #eaeaea;
width: 250px;
clear: both;
}

#comments-form p.comments-txtarea textarea {
width: 590px;
height: 125px;
padding: 6px 4px;
border: 3px solid #eaeaea;
margin: 0;
}

#comments-form #sub {
	float: left;
}

.ifrequired {
	font-weight: bold;
	width: 100px;
	float: right;
	text-align: right;
	padding: 6px 0 0 0;
}

#sub {
	background: url(../../handgloves-theme%20v1-1%202/themes/handgloves/css/images/templates/button.png) top left no-repeat;
	color: #2a2a2a;
	border: none;
	font-weight: bold;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	height: 25px;
	width: 67px;
}

#sub:hover {
	color: #000;
	cursor: pointer;
}





/*----------------------------------------

				Slider 
				
				
-----------------------------------------*/





/*	Invisible left hotspot */
Xdiv.scrollingHotSpotLeft
{
	/* 	The hotspots have a minimum width of 100 pixels 
	and if there is room the will grow and occupy 15% 
	of the scrollable area (30% combined). Adjust it 
	to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/*	There is a big background image and it's used 
		to solve some problems I experienced
		with Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/*	Visible left hotspot */
Xdiv.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
Xdiv.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
Xdiv.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/*	The scroll wrapper is always the same width and 
	height as the containing element (div). Overflow 
	is hidden because you don't want to show all of 
	the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 207px;
	height: 279px;
	margin-top:-10px;
	
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

.scrollableArea img{
	padding-left:7px;
}

	#makeMeScrollable div.scrollableArea 
	{
		position: relative;
		float: left;
		margin-left: 4px;
		padding: 0px;
	}