/* www.pe8er.net by Piotr Gajos */

* {
	margin: 0;
	padding: 0;
}

body {
	font: 9pt/19px "Univers Std", "HelveticaNeue-Light", Helvetica, Arial, "Lucida Grande", sans-serif;
	background: #fff url(../vis/bottom_repeat.gif) repeat-y 394px;
	color: #000;
	text-align: left;
	height: 100%;
}

p {
	margin: 0 0 20px 0;
}

h1 {
	color: #00afe5;
	margin: 50px 0 10px 0;
	font-size: 1.33em;
	background: #fff;
	width: 70%;
}

h2, h3 {
	color: #000;
	text-transform: uppercase;
	font-size: 1em;
	display: block;
	background: #fff;
}

a:link, a:visited, .blue {
	color: #00afe5;
	text-decoration: none;
}

a:link, a:active, a:hover {
	outline: none;
}

a:active {
	color: #000;
}

a.hide:link, a.hide:visited {
	display: none;
}

#selected {
	background-color: #a5d7e6;
}

/* @group slimbox */

#lbOverlay {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	left: 50%;
	overflow: hidden;
	background-color: #000;
}

.lbLoading {
	background: #fff url(../vis/lightbox/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 3px solid #000;
	border-bottom-style: none;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../vis/lightbox/prevlabel.gif) no-repeat 0% 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../vis/lightbox/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	line-height: 1em;
	text-align: left;
	border: 3px solid #000;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../vis/lightbox/closelabel.gif) no-repeat center;
	margin: 5px 0;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	padding: 10px;
	color: #00afe5;
	text-align: center;
}

/* @end */

/* @group Links */

a#home:link, a#home:visited {
	width: 81px;
	height: 13px;
	display: block;
	background: #fff url(../vis/logo.gif) 0 0 no-repeat;
	position: absolute;
	top: 0;
	left: 1px;
}

a#home:hover {
	background-position: -81px 0;
}

a.colophon:link, a.colophon:visited {
	display: block;
	width: 58px;
	height: 9px;
	background: transparent url(../vis/colophon_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 82px;
	left: 171px;
}

a.colophon:hover, a.colophon:active {
	background-position: -58px 0;
}

a.contact:link, a.contact:visited {
	display: block;
	width: 87px;
	height: 9px;
	background: transparent url(../vis/contact_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 135px;
	left: 576px;
}

a.contact:hover, a.contact:active {
background-position: -87px 0;
}

a.services:link, a.services:visited {
	display: block;
	width: 61px;
	height: 9px;
	background: transparent url(../vis/services_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 259px;
	left: 757px;
}

a.services:hover, a.services:active {
	background-position: -61px 0;
}

a.blog:link, a.blog:visited {
	display: block;
	width: 109px;
	height: 24px;
	background: transparent url(../vis/blog_link.gif) -109px 0 no-repeat;
	position: absolute;
	top: 645px;
	left: 66px;
}

a.blog:hover, a.blog:active {
	background-position: 0 0;
}

#featured img,
#workshop .mootabs_title li img,
#workshop .mootabs_panel img,
#workshop a:hover,
#mywork a:hover,
#aboutme a:hover,
#resume a:hover,
#misc a:hover
{
		-webkit-transition: 0.3s ease-in;
}
		
#featured img:hover,
#workshop .mootabs_title li img:hover,
#workshop .mootabs_panel img:hover,
a.more:link,
a.more:visited
{
		-webkit-transition: 0.3s ease-out;
}

/* @end */

/* @group homepage */

#top_left {
	width: 510px;
	height: 500px;
	background: transparent url(../vis/top_left.gif);
}

#bottom {
	width: 400px;
	height: 230px;
	background: transparent url(../vis/bottom.gif);
	margin: 0 0 0 110px;
}

#right_menus {
	width: 340px;
	height: 560px;
	background: transparent url(../vis/right_menus.gif);
	position: absolute;
	top: 130px;
	left: 510px;
}

div#right_menus #featured {
	background: transparent url(../vis/featured.gif) top left no-repeat;
	position: absolute;
	top: 510px;
	left: 0;
}

#featured img {
	border: 2px solid #000;
	margin: 7px 0 40px 0;
}

#featured img:hover {
	border: 2px solid #00afe5;
}

#featured img:active {
	border: 2px solid #00afe5;
}

/* @end */

/* @group Workshop menu */

ul {
	position: absolute;
	top: 333px;
	left: 245px;
	list-style: none;
	width: 150px;
}

ul li {
	position: relative;
}

li ul {
	width: 200px;
	height: 185px;
	left: -110px;
	top: 0;
	position: absolute;
	display: inline;
	background: transparent url(../vis/menu_bg.gif) no-repeat 18px 4px;
}

ul a, ul li a {
	display: block;
	background: #fff; /* IE6 Bug */
	padding: 0;
	border: none; /* IE6 Bug */
	border-bottom: 0;

}

/* Holly Hack. IE Requirement \*/

* html ul li {
	float: left;
	height: 1%;
}

* html ul li a {
	height: 1%;
}

* html ul a {
	height: 1%;
}

/* End */

li:hover ul, li.over ul {
	display: block;
}

a.workshop, a.workshop:visited {
	position: relative;
	width: 77px;
	height: 9px;
	background: transparent url(../vis/workshop_link.gif) 0 0 no-repeat;
	cursor: pointer;
}

a.workshop:hover, a.workshop:active {
	background-position: -77px 0;
}

a.gui, a.gui:visited {
	width: 18px;
	height: 10px;
	background: transparent url(../vis/gui_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 60px;
	left: 0;
	display: block;
}

a.gui:hover, a.gui:active {
	background-position: -18px 0;
}

a.print, a.print:visited {
	width: 33px;
	height: 10px;
	background: transparent url(../vis/print_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 85px;
	left: 15px;
}

a.print:hover, a.print:active {
	background-position: -33px 0;
}

a.web, a.web:visited {
	width: 26px;
	height: 10px;
	background: transparent url(../vis/web_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 104px;
	left: 7px;
}

a.web:hover, a.web:active {
	background-position: -26px 0;
}

a.assorted, a.assorted:visited {
	width: 63px;
	height: 10px;
	background: transparent url(../vis/assorted_link.gif) 0 0 no-repeat;
	position: absolute;
	top: 142px;
	left: 25px;
}

a.assorted:hover, a.assorted:active {
	background-position: -63px 0;
}

/* @end */

/* @group Page menu */

div#left_menus, div#left_menus2 {
	width: 347px;
	height: 582px;
	background: transparent url(../vis/left_menus.gif);
	float: left;
	top: 0;
	left: 0;
}

div#left_menus2 {
	background: transparent url(../vis/left_menus2.gif);	
}

div#left_menus a.colophon:link, div#left_menus a.colophon:visited, div#left_menus2 a.colophon:link, div#left_menus2 a.colophon:visited {
	top: 30px;
	left: 124px;
}

div#left_menus a.contact:link, div#left_menus a.contact:visited,
div#left_menus2 a.contact:link, div#left_menus2 a.contact:visited {
	top: 435px;
	left: 257px;
}

div#left_menus a.services:link, div#left_menus a.services:visited,
div#left_menus2 a.services:link, div#left_menus2 a.services:visited {
	top: 508px;
	left: 182px;
}

div#left_menus ul {
	top: 570px;
	left: 238px;
}

div#left_menus2 ul {
	top: 145px;
	left: 200px;
}


div#left_menus li ul, div#left_menus2 li ul {
	top: -1px;
	left: -110px;
}

/* @end */

#content, #workshop, #misc {
	background: #fff;
	width: 384px;
	height: 100%;
	float: left;
}

/* @group colophon */

div#info {
	color: #00afe5;
	text-align: right;
	font-size: 11px;
	width: 265px;
	height: 250px;
	position: absolute;
	top: 188px;
	left: 90px;
}

div#info p {
	color: #000;
}

#content #photo {
	width: 388px;
	height: 110px;
	display: block;
	margin: 20px 0 0 0;
	background: url(../vis/my_face.gif) no-repeat 0 0;
}

#content #photo:hover {
	background-position: -388px 0;
}

.mootabs_title {
	list-style-image: none;
	list-style-type: none;
	width: 260px;
	height: 45px;
	margin: 0 0 20px 18px;
	background: url(../vis/colophon_menu.gif) no-repeat;
	position: relative;
	top: 0;
	left: 0;
}

.mootabs_title li {
	width: 58px;
	height: 9px;
	cursor: pointer;
	display: block;
	position: absolute;
	text-indent: -9999em;
}

.mootabs_panel {
	display: none;
	position: relative;
	width: 100%;
	top: -1px;
	clear: both;
	overflow: hidden;
}

.mootabs_panel.active {
	display: block;
}

ul.mootabs_title li.work, ul.mootabs_title li.work:visited {
	background: transparent url(../vis/work_link.gif) 0 0 no-repeat;
	width: 30px;
	height: 9px;
	top: 26px;
	left: 25px;
}

ul.mootabs_title li.work:hover, ul.mootabs_title li.work:active {
	background-position: -30px 0;
}

ul.mootabs_title li.personal, ul.mootabs_title li.personal:visited {
	background: transparent url(../vis/personal_link.gif) 0 0 no-repeat;
	width: 54px;
	height: 9px;
	top: 22px;
	left: 91px;
}

ul.mootabs_title li.personal:hover, ul.mootabs_title li.personal:active {
	background-position: -54px 0;
}

ul.mootabs_title li.resume, ul.mootabs_title li.resume:visited {
	width: 59px;
	height: 9px;
	background: transparent url(../vis/resume_link.gif) 0 0 no-repeat;
	top: 34px;
	left: 197px;
}

ul.mootabs_title li.resume:hover, ul.mootabs_title li.resume:active {
	background-position: -59px 0;
}

#mywork, #aboutme, #resume {
	margin: -5px 0 0 40px;
}

/* @end */

/* @group workshop */

#workshop, #misc {
	margin: 0 0 0 20px;
	background: url(../vis/workshop_bg.gif) no-repeat center top;
}

#misc {
	background: url(../vis/misc_bg.gif) no-repeat center top;	
}

#workshop .mootabs_title {
	width: 384px;
	height: auto;
	margin: 10px 0 20px 0;
	background: none;
}

#workshop .mootabs_title li {
	width: 48px;
	height: 48px;
	cursor: pointer;
	display: inline;
	position: relative;
	text-indent: 0;

}

#workshop .mootabs_panel p {
	text-align: right;
}

#workshop .mootabs_panel img {
	margin: 5px 0;
}

#workshop .mootabs_title li img, #workshop .mootabs_panel img {
	border: 2px solid #000;
}

#workshop .mootabs_title li img:hover, #workshop .mootabs_panel img:hover {
	border: 2px solid #00afe5;
}

a.more:link, a.more:visited {
	background: url(../vis/more.gif) no-repeat right center;
	padding-right: 16px;
	height: auto;
	display: inline;
}

#workshop a:hover, #mywork a:hover, #aboutme a:hover, #resume a:hover, #misc a:hover {
	text-decoration: underline;
}

.mootabs_panel a {
	background: transparent url(../vis/zoom.gif) bottom right no-repeat;
	display: block;
	height: 219px;
	margin: 0 0 5px 0;
}

.mootabs_panel p a {
	background: none;
	display: inline;
	height: auto;
	margin: 0;
}


/* @end */

/* @group contact */

.important {
	color: #00afe5;
	background: #fff;
}

#emailform {
	width: 524px;
	height: 609px;
	float: left;
	padding: 190px 0 0 50px;
	background: url(../vis/contact_bg.gif) no-repeat left top;
}

/* @end */

/* @group services */

#content #servicesphoto {
	width: 350px;
	height: 110px;
	display: block;
	margin: 25px 0 0 0;
	background: url(../vis/services_bg.jpg) no-repeat 0 0;
}

#content #servicesphoto:hover {
	background-position: -350px 0;
}



/* @end */

/* @group Animations

ul#nav li, #featured img, #top_left {
	opacity: 1;
	-webkit-animation-name: wobble;
	-webkit-animation-duration: 0.3s;
}

@-webkit-keyframes wobble {
	from {
		opacity: .3;
		}
	70% {
		opacity: .9;
		}
	90% {
		opacity: .3;
		
		}
    to {
        opacity:  1;
      }
	}
	
.mootabs_panel.active, #bottom {
	-webkit-animation-name: slide;
	-webkit-animation-duration: 0.2s;
}

@-webkit-keyframes slide {
	from {
		opacity: .3;
		left: -5px;
		}
	80% {
		opacity: .5;
		right: 4px;
		top: 2px;
		}
	90% {
		background-color: #00afe5;
		left: 40px;
		top: 20px;
		}
    to {
		opacity: .1;
        left: 20px;
      }
}

@end */

#glitchCanvas{
    position: absolute;
    right:0px;
    top:0px;
    width: 100%;
    pointer-events: none;
}

.glitch{
    width:200%;
    position: absolute;
    height: 5px;
    overflow:hidden;
    pointer-events: none;
    z-index:999999;
}