/* reset */
html {height:100%;}
body {height:100%;font-family:Arial, Helvetica, sans-serif;font-size:10pt;line-height:12pt;margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;}
div, ul, li {position:relative;zoom:1;overflow:hidden;}
a {text-decoration:none;cursor:pointer;}
a img {border:none;}
p {margin:0 0 5px 0;}
form {margin:0;display:inline;}

/* default */
body {background:#000000;color:#666666;}
a {color:#999999;}
a:hover {color:#ffffff;}

/* styles */
.tooltip {display:none;}
.fancybox {cursor:pointer;}

/* fonts */
@font-face {
	font-family: custom_impact;
	src: url('fonts/custom_impact.otf');
}
@font-face {
	font-family: custom_cursive;
	src: url('fonts/custom_cursive.otf');
}

/* fancybox */
#fancybox_wrap {padding-bottom:50px;}

/* blocks */
html {}
body {padding:2px 20px 15px 278px;overflow-x:hidden !important;}

#page_left {position:fixed;top:0;left:0;width:275px;text-align:right;}
#page_left a {display:block; font-weight:normal; font-family:custom_impact,arial,helvetica,sans;}
#page_left a:hover {color:#ffffff;}
#page_left a.selected {color:#cccccc;}

	#left_top {width:278px;}
	#left_top a {font-size: 38pt;line-height: 38pt;}
		#top_nav {min-height:1000px;}
			#top_nav_title {height: 40pt;padding: 16px 12px;position: absolute;width: 40pt;}
				#top_nav_title a {
					font-family:custom_cursive,helvetica,arial,sans;font-size: 30pt;line-height: 38pt;text-indent: 0;white-space:pre;
					color:#333333;height: 40pt;text-align: left;width: 40pt;
					transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
				}
			#top_nav_links {padding:16px 20px;}
				#top_nav_links a {color:#666666;}
				#top_nav_links a:first-child {margin-bottom:18px;}
	
	#left_bottom {position:fixed;bottom:0;left:0;width:275px;}
	body.mobile #left_bottom {display:none;}
		#bottom_nav {}
			#bottom_nav_title {display:none;}
			#bottom_nav_links {color:#333333;padding:12px 15px;}
				#bottom_nav_links a {color:#333333;font-size:20px;line-height:22pt;}
				#bottom_nav_links a:hover {color:#ffffff;}
				
#page_right {min-width:700px;padding:8px 0 9px;}
#page_right a:hover {color:#ffffff;}
#page_right a.selected {color:#cccccc;}

	#top_categories {clear:both;float:none;overflow:hidden;padding:4px 16px; color:#666666;}
		#top_categories a {display:block;float:left;padding:10px 15px 5px 0; font-family:custom_impact,arial,helvetica,sans;color:#666666;font-size: 38pt;line-height:38pt;}
		#top_categories a:hover {color:#ffffff;}
		#top_categories a.selected {color:#ffffff;}
	#top_projects {}
		.project {display:block;clear:both;float:none;overflow:hidden; padding:9px 21px;margin:0 15px 0 0;}
		.project .image {width:225px;height:150px;float:left;padding:3px 0 4px 0;margin:0 15px 0 0;}
		.project .image .zoom {display:none;position:absolute;top:10px;left:10px;opacity:0.75;}
		.project .image:hover .zoom {display:block;}
		.project h2 {font-family:custom_cursive,helvetica,arial,sans;font-size: 24pt;line-height: 32pt;text-indent: 0;padding:0 0 2px;}
		.project p, .project span {font-size:12pt;line-height:14pt;}
		.project a .tooltip {padding:3px;line-height:16pt;font-size:16pt;margin:0;}
		.project a:hover .tooltip {display:inline-block;}

		.project {margin-left:50px;}
		.project.next_project,
		.project.freelance,
		.project.artspaces,
		.project.focusfeatures,
		.project.xtnd,
		.project.userfriendlycms,
		.project.theurbanminute,
		.project.crosscommercemedia,
		.project.beautymarkstudio
		{margin-left:0;}

#page_bottom {position:fixed;width:100%;height:21px;left:0;bottom:0;background:#000000;z-index:1000;}
body.mobile #page_bottom {display:none;}
	
/* TWEAKS */
#fancybox-outer {overflow:visible;}
#fancybox-overlay {background:#000000 !important;}

.jspVerticalBar {top:18px;}
.jspDrag {background:#999999;}
.jspDrag:hover {background:#ffffff;}
.jspTrack {background:#222222;}