body{ margin: 0; padding: 0; font-family: "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif; background: url("../Images/bodyBg.png") repeat; color: #5f5f5f;}
h1{ margin: 0; padding: 0; font-weight:normal;}
h4{ margin: 0; padding: 0; font-weight: normal;}
p{ margin: 0; padding: 0;}
a{ color: #5f5f5f;}
a img{ border: 0;}
a:hover{ color:#3992ec;}
.clearFloat{ clear: both;}
/*div,article,section{border: thin solid black;}*/
.divider{ display: block; height: 4px; width: 960px; border-bottom: thin solid #e6e6e6; margin: auto auto;}
.shadow{ -webkit-box-shadow: 0px 0px 3px #cacaca; -moz-box-shadow: 0px 0px 3px #cacaca; box-shadow: 0px 0px 3px #cacaca; }

#wrapper{ width:960px; margin: auto auto;}

/*Message Banners*/
.msg-success{ width:600px; color:#060; background:#BBFFBD; border:thin solid #090; padding:5px; font-size: 12px;}
.msg-info{ width:600px; color:#f3af4d; background:#FFE9C9; border:thin solid #FFCF81; padding:5px; font-size: 12px;}
.msg-error{ width:600px; color:#900; background:#FFC4C4; border:thin solid #C00; padding:5px; font-size: 12px; }

/* Header Banner*/
#bannerWrapper{}
header{width:960px; height: 110px; margin:auto auto;}
	header #logo{ float: left; width: 380px; overflow: hidden; height: 90px; margin: 10px 0 10px 10px; display: block;}
	header #stampWrapper{ position:absolute; margin: -12px 0 0 400px; z-index: 99; width: 160px; height: 160px; overflow:hidden;}
		header #stampWrapper a:hover #stamp{ margin-top: 2px;}
	header nav{ float: right;  width: 380px; height:90px; margin: 10px 10px 0 0; display: block;}
		header nav ul{ list-style: none; margin: 30px 0 0 0; padding: 0;}
		header nav li{ float: left; display: block; margin: 3px 5px 3px 5px; padding: 7px 2px 0px 2px;}
		header nav a{ color: #5f5f5f; text-decoration: none;}
		header nav ul a:hover li, header nav a.on li{border-bottom:2px solid #3992ec; color: #505050;}

#shortabout{ font-size: 18px; width: 520px; text-align: left; float: left; margin: 10px 0 20px 50px;}
	#shortabout a{ color: #3992ec; text-decoration: none;}
	#shortabout span{ color: #3992ec;}

#contentWrapper{ width: 960px; margin: 20px auto 0 auto;}

footer{ font-size: 12px; color: #999; margin: 40px 0 10px 0;}
	footer .divider{ margin-bottom: 10px;}
	
#redirect{ width: 100%; display: block; height: 50px; background:url("../Images/redirectBg.png") repeat-x; line-height: 50px; color: #fff; margin-bottom: 10px;}
	
/*404*/
#notFoundScissors{ position: absolute; width: 247px; height: 246px; margin: -93px 0 0 234px; z-index: 999; display: block;}
#notFoundFour{ float: right; font-size: 60px; margin-right: 60px; color: #d8d8d8;}
#notFound{ margin-top: 140px; width: 590px;}
	#notFoundFour h2{ margin: 10px 0 0 0; color: #999; font-size: 14px; font-weight: normal;}

/* Thumbnail Window*/
#thumbWindow{ width: 100%; overflow: hidden; border-top:thin solid #cecece; border-bottom:thin solid #cecece; padding: 2px 0 2px 0;}
#thumbWrapper{ width:1650px; overflow: hidden; margin:auto auto;}

/*Tags*/
#latestWork #latestWorkTag{ float: left; width: 50px; height: 180px; margin:10px 0 0 -50px;}
#randomGoodiesTag{ float: right; width: 302px; height: 50px; margin: -20px 60px 0 0; }
#workTabs #atozTag{ float: left; width: 153px; height: 50px;}
#categories #categoryTag{ float: right; width: 215px; height: 50px;}
#blogSearchTag{ margin-top: 10px; float: right; width: 174px; height: 50px;}

/*Latest Work*/
#latestWork{ width:850px; margin: 10px auto 0 auto;}
	#latestWork .latestWorkFrame{ position: relative; float:left;background: url("../Images/thumbFrame.png"); width: 270px; height: 190px; padding: 10px 0 0 0; margin: 5px;}
	#latestWork #latestWorkArrow{ float: right; width: 50px; height: 180px; margin: 10px -50px 0 0;}
	
/*Work Page*/
#workTabs{ width: 600px; float: left;}
	#workTabs ul{ list-style: none; width: 200px; float: right; margin-right: 50px;}
	#workTabs ul li{ float: right; margin: 5px 10px;}
	#workTabs ul li a{font-size: 14px;}
	#workTabs ul li.ui-tabs-selected a{ color: #222; text-decoration: none; cursor: default;}
	.atozFrame{width: 180px; height: 80px; margin: 2px; background: #fff; float: left;}
#search{ float: right; width: 350px; height: 80px;}
	#search .divider{ width: 350px; margin: 20px 0 20px 0;}
	#searchBox{ background: #fff; padding: 8px; width: 250px; -webkit-border-radius: .5em;  -moz-border-radius: .5em; border-radius: .5em;}
	#searchInput{ background: #fff; border: none; font-size: 16px; width: 210px; float: left; margin-left: 5px;}
	#searchSubmit{ background: url("../Images/searchButton.png") no-repeat center top; border: none; width: 20px; height: 20px; float: right; margin: 3px 1px 0 0; cursor: pointer;}
		#searchSubmit.searching{ background: none; }
	#search #suggestions{ max-height: 400px; overflow-y: auto;}
		#suggestions a:hover .item{ background: #222;}
		#suggestions a:hover .item .name h2{ color: #fff;}
		#suggestions .item{ margin-bottom: 2px;}
		#suggestions .item img{ float: left; margin-right: 5px;}
		#suggestions .item .name{ width: 160px; text-align: left; float: left;padding:0;margin: 7px 0 0 0;}
		#suggestions .item .name h2{ font-size: 12px; font-weight: normal; margin: 0; padding: 0;}
#categories{ float: right; width: 350px;}
	#categories .divider{ width: 350px; margin: 20px 0 20px 0;}
	
/*Work Category*/
#catTabs{ width: 940px;margin-top:0px; padding: 0; }
	#catTabs #catTitle{ background: #fff; width: 550px; float: left; margin: 15px 0 -20px 10px; padding: 15px;}
	#catTabs #catTitle h1{ font-size: 20px; text-align: center;}
	#catTabs #catTitle p{ font-size: 14px; text-align: left;}
	#catTabs #chooseTag{ width: 291px; height: 50px; margin-top: 80px; float: right;}
	#catTabs ul{ list-style: none; width: 200px; float: right; margin-right: 50px;}
	#catTabs ul li{ float: right; margin: 5px 10px;}
	#catTabs ul li a{font-size: 14px;}
	#catTabs ul li.ui-tabs-selected a{ color: #222; text-decoration: none; cursor: default;}
	#catTabs #tabs-1, #catTabs #tabs-2{ margin-left: 0px;}

/*View Work*/
#back{ width: 400px; font-size: 14px; height: 30px; text-align: left; line-height: 30px; display: block; float: left; margin-top: -15px;}
#workView #thumb{ float: left; width: 270px; height: 190px; margin: 10px 0 0 70px;}
	#workView #thumb .frame{ float:left;background: url("../Images/thumbFrame.png"); width: 270px; height: 190px; padding: 10px 0 0 0; margin: 5px;}
	#workView #thumb #liveSite{ height: 84px; width: 92px; display: block; position: absolute; margin: -8px 0 0 1px;}

#workView #rating{ float: left; width: 250px; background: #fff; height: 35px; padding: 5px; margin: 20px 0 0 80px; font-size: 14px;}
	#workView #rating #current{ float: left; width: 80px; height: 35px;}
		#workView #rating #current h2{ float: left; line-height: 35px; font-size: 20px; margin: 0 0 0 15px; padding: 0; color: #222;}
		#workView #rating #current p{ float: left; line-height: 35px; font-size: 12px; margin: 0 0 0 10px; padding: 0; color: #999;}
	#workView #rating #new{float: right; width: 170px;  line-height: 35px;}
	
#workView #info{ float: right; margin: 20px 70px 0px 10px; padding: 5px; background: #fff; width: 500px; min-height: 180px; position: relative;}
	#workView #info h1{ font-size: 20px; margin: 15px 0 0 0;}
	#workView #info p{ text-align: left; font-size: 13px; margin: 10px 20px 30px 20px;}
	
	#workView #info #date{ width:200px; position: absolute; bottom: 15px; color: #9d9d9d;}
	#workView #info #date p{margin: 0 0 0 20px; padding: 0; font-size: 12px;}
	
	#workView #info #views{ width:200px; position: absolute; bottom: 15px; right: 0px; color: #9d9d9d; }
	#workView #info #views p{margin: 0 20px 0 0; padding: 0; font-size: 12px; text-align: right;}
	
#workView #flashWrapper{ margin: 20px 40px 10px 10px; padding: 5px; background: #fff;display: block; }
	#workView #flashSwf *{ margin: 0; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

#workView #webWrapper{ background: #fff; width: 500px; float: right; margin: 10px 70px 0 0; padding: 10px 5px;}
	#workView #webWrapper p{ font-size: 12px; color: #999;}
	#workView #webWrapper.web{ background: url("../Images/view_website.png") left center  #fff no-repeat;}
	#workView #webWrapper.development{ background: url("../Images/view_develop.png") left center #fff no-repeat;}

#workView #flashLoading{display: block; cursor: pointer; position: absolute; z-index: 9999; background: url("../Images/flashLoading.png") repeat;}
	#workView #flashLoading p{ color: #fff; font-size: 14px; margin-top: 30px;}
	#workView #flashLoading span{ color: #999; font-size: 12px; }

/*About*/
#about #photo{ width: 350px; height: 490px; float: left; margin: -10px 0 0 20px; position: relative;}
#about #me, #about #skills, #about #cv{ float: right; background: #fff; width: 500px; padding: 15px; margin: 20px 40px 0 0;}
	#about #me h1, #about #skills h1, #about #cv h1{ text-align: left; font-size: 20px; margin-bottom: 5px;}
	#about #me p, #about #skills p, #about #cv p{ font-size: 14px; text-align: left; padding-left: 5px;}
	#about #cv #pdf{ line-height: 40px; margin: 0px; font-size: 14px; height: 40px; width: 170px; text-align: right; float: right;}
		#about #cv #pdf img{ float: right;}
	#about #skills ul{ list-style: none; font-size: 14px; margin: 0; padding: 0; width: 160px; float: left; text-align:left; text-align: center;}
		#about #skills #listWrapper{ margin-left: 5px;}

/*Contact*/
#leftCol{ float: left; width: 300px;}
#midCol{ float: left; width: 350px;}
#rightCol{ float: left; width: 300px;}

#contact #info{ width: 240px; background: #fff; padding: 20px; font-size: 14px; text-align:left;}

#contact #social{ width: 240px; background: #fff; padding: 20px;}
	#contact #social h1{ font-size: 20px; margin: 0 0 20px 0;}
	
#contact #emailAddress{ width: 240px; background: #fff; padding: 20px; font-size: 14px; text-align:center; margin-top: 20px;}
	#contact #emailAddress h1{ font-size: 20px; margin: 0 0 10px 0; text-align: center;}

#contact #form{ width: 300px; background: #fff; text-align: left; padding: 20px;}
	#contact #form h1{ font-size: 20px; margin: 0px 0 10px 0; text-align: center;}
	#contact #form input,#contact #form textarea{ width: 100%; border: thin solid #cacaca; padding: 2px;}
	#contact #form textarea{ min-width: 100%; max-width: 100%; min-height: 75px;}
	#contact #form label{ font-size: 12px;}

/*BLOG STYLES*/
#blog{ margin-top: 0px;}
	#blog h2{ margin: 0; font-weight: normal;}
	#blog #left{ float: left; width:630px;}
	#blog #right{ float: right; width:300px;}

.postWrapper{ margin: 20px 0 40px;}
	.postWrapper .post{ text-align: left; margin: 5px; background: #fff; padding: 10px 10px 10px 10px; font-size: 14px;}
		.postWrapper .post h3{ font-size: 22px; font-weight: normal; border-bottom: thin solid #f1f1f1; text-align: left; margin: 5px 0 20px 0; padding: 0;}
		.postWrapper .post p{ text-align: left; font-weight: normal; font-size: 14px;}
		.postWrapper .post b{ text-align: left; }
	.postWrapper .post-meta{ text-align: right;}
		.postWrapper .post-meta p{ font-size: 12px; color: #999;}
		.postWrapper .post-meta p a {}
	
#feature ul{ list-style: none; margin: 20px 0 0 0; padding: 0;}
	#feature ul li{ background: #fff; display: block; padding: 10px;}
		#feature ul li .selectedWrapper{ float: left; display: block; width: 30px; height: 80px; margin-left: -39px; line-height: 80px;}
		#feature ul li.selected{ background: #333;}
		#feature ul li.selected .selectedWrapper{ background: url("../Images/blog_current.png") no-repeat left center;}
		#feature ul li.selected h3{ color: #fff; border-bottom: thin solid #555;}
		#feature ul li .img{ display: block; height: 80px; width: 90px; float: left; margin-right: 10px;}
		#feature ul a{ text-decoration: none;}
		#feature ul a li{ margin-bottom: 5px;}
		#feature ul a li h3{ margin:0; padding: 0; font-size: 16px; font-weight: normal; text-decoration: none; text-align: left; border-bottom: thin solid #f1f1f1; display: block; float: left; color:#111;}
		#feature ul a li .desc{ float: left; width: 170px; margin-top: 3px;}
		#feature ul a li p{ font-size: 12px; text-align: left;}
		#feature ul li.all{ height: 20px; line-height: 20px;}
		#feature ul li.all .selectedWrapper{ height: 20px; line-height: 20px;}
		#feature ul li.all .desc{ float: right; margin-top: -1px;}
		
#blog #search{ width: 300px; height: auto; margin-top: 0px;}
	#blog #search .divider{ width: 300px; margin-top: 0px;}
	#blog #search #suggestions{ max-height: 500px; overflow-y: auto;}
	#blog #search #suggestions .name{ margin: 0; padding: 5px;}
		
#tags{ margin-top: 30px;}

#pageNav{}
#pageNav #left{ width: 100px; float: left;}
	#pageNav #left a,#pageNav #right a{ text-decoration: none;}
#pageNav #right{ width: 100px; float: right;}

.img-float-left{ float: left; margin: 10px;}
.img-float-right{ float:right; margin: 10px;}

.curvedButton{ display: block; width:100px; background: #333; height: 30px; font-size: 16px; line-height: 30px;}
	a .curvedButton{ color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; }

/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:200px;
	height:100px;
	margin:2px;
	background:#111 url(../Images/Mosaic/progress.gif) no-repeat center center;
	text-align: left;
}
.latest-block {
	position:relative;
	overflow:hidden;
	width:250px;
	height:180px;
	background:#111 url(../Images/Mosaic/progress.gif) no-repeat center center;
	text-align: left;
}
.atoz-block {
	position:relative;
	overflow:hidden;
	width:174px;
	height:74px;
	background:#111 url(../Images/Mosaic/progress.gif) no-repeat center center;
	text-align: left;
	margin: 3px;
}
.cat-block {
	position:relative;
	overflow:hidden;
	width:230px;
	height:180px;
	background:#111 url(../Images/Mosaic/progress.gif) no-repeat center center;
	text-align: left;
	margin: 0px;
	float: left;
}
.mosaic-block a, .latest-block a, .atoz-block a, .cat-block a{ text-decoration: none; color: #fff;}
.mosaic-block h4{ margin: 6px; font-size: 14px;}
.latest-block h4{ margin: 10px; font-size: 20px;}
.cat-block h4{ margin: 10px; font-size: 16px;}
.cat-block p{ font-size: 12px; margin: 5px; color: #777;}
.latest-block p{ margin: 10px; font-size: 12px; color: #777;}
.atoz-block h4{ margin: 10px 5px 5px 5px; font-size: 12px;}
.mosaic-block p{ font-size: 12px; margin: 5px; color: #777;}
.mosaic-backdrop, .latest-backdrop, .atoz-backdrop{
	display:none;
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background:#111;
}	
.mosaic-overlay, .latest-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
	background:#111;
}
.bar3 .mosaic-overlay {
	bottom:-100px;
	height:100px;
	background:url("../Images/Mosaic/bg-black.png");
}
.fade .mosaic-overlay {
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	background:url(../Images/Mosaic/bg-black.png);
}

/*Button Styles*/
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin: 10px;
}
.button:hover {
	text-decoration: none;
	color:#fff;
}
.button:active {
	position: relative;
	top: 1px;
}
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* Tabs*/
.ui-tabs-hide {  
display: none;  
}