body {margin:0;background-color:#000;}
#container{margin: auto;width:1024px;height:527px;background-color: transparent;}
.topHeader{background: url(../images/bgLight.jpg) no-repeat 0 0;height:116px;}
.topHeader img{margin-left:110px;}
#wrapper {width: 875px;margin: 0 auto;}
#wrapper p.ribbonHolder{position:absolute;background: url(../images/resume.png) no-repeat 0 0;width:146px;height:44px;z-index: 1;right:-6px;}
#intro {padding-bottom: 10px;}
h2 {margin: 0;margin-bottom: 14px;padding: 0;}
#slider {width: 769px;margin: 0 auto;position: relative;}
.scroll {height: 353px;width: 769px;overflow: auto;overflow-x: hidden;position: relative;clear: left;background: transparent;}
.scrollContainer div.panel {margin:0px;padding:0px;height: 352px;width: 769px;background: url(../images/projBG.jpg) repeat-x 0 0;}
.scrollContainer a.ribbon{font-family: Helvetica;font-size: 18px;color:#f2f2f2;position:relative;z-index: 3;}
.scrollContainer #sites img{float:left;	margin-top:50px;margin-left:30px;}
.scrollContainer #sites img.title{margin:50px 140px 20px 0;}
.scrollContainer #sites a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-260px;padding:6px 70px;}
.scrollContainer #sites p{position:absolute;top:158px;left:377px;width:333px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #sites a{color:#000;text-decoration: none;}
.scrollContainer #sites a:hover{color:#e6e2c9;}
.scrollContainer #sites a:selected{color:#e6e2c9;}

.scrollContainer #files img{float:left;	margin-top:67px;margin-left:30px;}
.scrollContainer #files img.title{margin:48px 9px 20px 20px;}
.scrollContainer #files a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-234px;padding:6px 70px;}
.scrollContainer #files p{position:absolute;top:145px;left:419px;width:331px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #files a{color:#c40517;text-decoration: none;}
.scrollContainer #files a:hover{color:#e6e2c9;}
.scrollContainer #files a:selected{color:#e6e2c9;}

.scrollContainer #editor img.pic{margin-top:0px;margin-left:30px;}
.scrollContainer #editor img.title{margin:9px 9px 0 20px;position:relative;right:100px;}
.scrollContainer #editor a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:-59px;right:-631px;padding:6px 70px;}
.scrollContainer #editor p{position:absolute;top:98px;left:458px;width:296px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #editor a{color:#450202;text-decoration: none;}
.scrollContainer #editor a:hover{color:#e6e2c9;}
.scrollContainer #editor a:selected{color:#e6e2c9;}

.scrollContainer #preview img{float:left;margin-top:50px;margin-left:50px;}
.scrollContainer #preview img.title{margin:47px 9px 0 20px;}
.scrollContainer #preview a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-261px;padding:6px 70px;}
.scrollContainer #preview p{position:absolute;top:207px;left:396px;width:330px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #preview a{color:#feef21;text-decoration: none;font-weight: 700;}
.scrollContainer #preview a:hover{color:#e6e2c9;}
.scrollContainer #preview a:selected{color:#e6e2c9;}

.scrollContainer #forthebeat img{float:left;margin-top:51px;margin-left:102px;}
.scrollContainer #forthebeat a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-630px;padding:6px 70px;}
.scrollContainer #forthebeat p{position:absolute;top:190px;left:130px;width:530px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #forthebeat a{color:#551A8B;text-decoration: none;}
.scrollContainer #forthebeat a:hover{color:#e6e2c9;}
.scrollContainer #forthebeat a:selected{color:#e6e2c9;}

.scrollContainer #mtv img{float:left;margin-top:37px;margin-left:50px;}
.scrollContainer #mtv img.title{margin:25px 9px 0 53px;}
.scrollContainer #mtv a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-8px;padding:6px 70px;}
.scrollContainer #mtv p{position:absolute;top:203px;left:397px;width:354px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #mtv a{color:#5b180f;text-decoration: none;}
.scrollContainer #mtv a:hover{color:#e6e2c9;}
.scrollContainer #mtv a:selected{color:#e6e2c9;}

.scrollContainer #css img{float:left;margin-top:20px;margin-left:50px;}
.scrollContainer #css img.title{margin:25px 9px 0 99px;}
.scrollContainer #css a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-264px;padding:6px 70px;}
.scrollContainer #css p{position:absolute;top:232px;left:397px;width:354px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #css a{color:#209116;text-decoration: none;}
.scrollContainer #css a:hover{color:#e6e2c9;}
.scrollContainer #css a:selected{color:#e6e2c9;}

.scrollContainer #terminal img{float:left;margin-top:16px;margin-left:75px;}
.scrollContainer #terminal img.title{margin:0 9px 0 31px;}
.scrollContainer #terminal a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-241px;padding:6px 70px;}
.scrollContainer #terminal p{position:absolute;top:270px;left:77px;width:633px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #terminal a{color:#000;text-decoration: none;}
.scrollContainer #terminal a:hover{color:#e6e2c9;}
.scrollContainer #terminal a:selected{color:#e6e2c9;}

.scrollContainer #black20 img{float:left;margin-top:43px;margin-left:5px;}
.scrollContainer #black20 img.title{margin:54px 9px 0 10px;}
.scrollContainer #black20 a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-188px;padding:6px 70px;}
.scrollContainer #black20 p{position:absolute;top:160px;left:440px;width:330px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #black20 a{color:#000;text-decoration: none;}
.scrollContainer #black20 a:hover{color:#e6e2c9;}
.scrollContainer #black20 a:selected{color:#e6e2c9;}

.scrollContainer #human img{float:left;	margin-top:13px;}
.scrollContainer #human img.title{margin:42px 9px 20px 0;}
.scrollContainer #human a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-148px;padding:6px 70px;}
.scrollContainer #human p{position:absolute;top:235px;left:18px;width:709px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #human a{color:#000;text-decoration: none;}
.scrollContainer #human a:hover{color:#e6e2c9;}
.scrollContainer #human a:selected{color:#e6e2c9;}

.scrollContainer #whiff img{float:left;	margin-top:20px;margin-left:1px;}
.scrollContainer #whiff img.title{margin:46px 20px 20px 0;}
.scrollContainer #whiff a.ribbon{width:146px;height:44px;position:relative;z-index: 3;top:10px;right:-152px;padding:6px 70px;}
.scrollContainer #whiff p{position:absolute;top:175px;left:467px;width:298px;font-family: Helvetica;color:#494948;font-size:17px;}
.scrollContainer #whiff a{color:#000;text-decoration: none;}
.scrollContainer #whiff a:hover{color:#e6e2c9;}
.scrollContainer #whiff a:selected{color:#e6e2c9;}

/*  ---------------       NAVIGATION CSS       ------------------    */

ul.navigation a {margin:0;padding-top:1px;color:black;border-color:yellow;text-decoration:none;}
ul.navigation {list-style:none;margin:0;padding-top:3px;position:relative;z-index: 1;height:227px;}
ul.navigation li {position:relative;display: inline;}

/*  ---------------       LAVALAMP CSS       ------------------    */
.lavaLampBottomStyle {position: relative;height: 62px;  width: 769px;background-color: none;padding: 15px 15px 15px 8px;margin: 10px 0;overflow: hidden;border: none;}
.lavaLampBottomStyle li {float: left;list-style: none;}
.lavaLampBottomStyle li.back {background: none;border-bottom: 5px solid yellow;height: 71px;z-index: 8;position: absolute;width:auto;}
.lavaLampBottomStyle li a {text-decoration: none;color: #000;outline: none;text-align: center;top: 7px;text-transform: uppercase;letter-spacing: 0;z-index: 10;display: block;float: left;height: 60px;position: relative;overflow: hidden;margin: auto 1px;cursor: pointer;}   
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {border: none;}                     

/*  ---------------       SCROLL BUTTONS CSS       ------------------    */ 
.scrollButtons {position: absolute;top: 368px;cursor: pointer;}
.scrollButtons.left {left: -56px;}
.scrollButtons.right {right: -56px;}
.hide {display: none;}
/*  ---------------       CAROUSEL CSS       ------------------    */
.infiniteCarousel {width: 769px;position: relative;}
.infiniteCarousel .wrapper {width: 760px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */overflow: auto;height: 241px;margin: 0;position: absolute;top: 0;}
.infiniteCarousel ul a img {margin:0;padding:0;border:none;}
.infiniteCarousel .wrapper ul {width: 840px; /* single item * n */list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;position: absolute;top: 0;}
.infiniteCarousel ul li {display:block;float:left;padding: 1px 3px;height: 69px;width: 120px;margin: 0;}
.infiniteCarousel ul li.empty{background: url(../images/holder.gif) no-repeat 6px 8px;}
.infiniteCarousel ul li img {margin:0;-webkit-transition: border-color 400ms;}
.infiniteCarousel ul:hover li img {border-color: #000;}
.infiniteCarousel ul:hover li:hover img {border-color: #333;}
.infiniteCarousel ul li a img {display:block;}
.infiniteCarousel .arrow {display: block;height: 52px;width: 49px;background: url(../images/arrowRight.jpg) no-repeat 0 0;text-indent: -999px;position: absolute;top: 12px;cursor: pointer;outline: 0;}
.infiniteCarousel .forward {background-position: 0 0;right: -62px;color:black;}
.infiniteCarousel .back {background-position: 0 0;background: url(../images/arrowLeft.jpg) no-repeat 0 0;left: -62px;}

.scrollButtons {position: absolute;top: 127px;cursor: pointer;}
.scrollButtons.left {display: block;left: -115px;background: url(../images/arrowL.png) no-repeat left top;width:136px;height:56px;border:none;outline: 0;}
.scrollButtons.left:hover{background-position: center bottom;}
.scrollButtons.right {display: block;border:none;right: -129px;background: url(../images/arrowR.png) no-repeat left top;width:136px;height:56px;outline: 0;}
.scrollButtons.right:hover{background-position: center bottom;}
#footer h4{margin:0;color:#f9e141;font-family: Helvetica;border-bottom: #f9e141;}
.social{float:left; margin: 18px 219px 0 205px; padding: 0px 0px 0px 10px; *padding-top: 5px;position: relative;top:-92px;z-index: 3;}
.card{float:left;padding-top:18px;position: relative;top:-128px;z-index: 3;left:700px;}
#footer .card a{text-decoration: none;}
.social h4,.card h4{margin:0;color:#f9e141;font-family: Helvetica;border-bottom: #f9e141;}
#footer .card a:visited{text-decoration: none;}
#footer .card img{text-decoration: none;}
#footer .card img:visited{text-decoration: none;}

/*  ---------------       FOOTER CSS       ------------------    */
.yellow{background: url(../images/yellow2.png) no-repeat 0 0;height:232px;margin-left:130px;overflow: hidden;}
#footer{text-decoration: none;height:172px;background: url(../images/bottom.png) repeat-x 0 0;margin-top:47px;position: relative;z-index: 2;}
#footer h4{margin:0;color:#f9e141;font-family: Helvetica;border-bottom: #f9e141;}
#footer .social{float:left; margin: 18px 219px 0 205px; padding: 0px 0px 0px 10px; *padding-top: 5px;}
#footer .card{float:left;padding-top:18px;}
#footer .card a{text-decoration: none;}
#footer .card a:visited{text-decoration: none;}
#footer .card img{text-decoration: none;}
#footer .card img:visited{text-decoration: none;}

.image-holder{background:url(../images/loading.gif) 50% 50% no-repeat;}

.QOverlay {background-color: #000000;z-index: 9999;}
.QLoader {background-color: #e6e2c9;height: 3px;}

/* =EMAIL-ME
--------------------- */

.panel2{ background:#f8f8f8; border:1px solid #dfdfdf; display:none; height:auto; left:0; padding:30px 30px 30px 170px; 
		top:66px; width:230px; position:fixed; _position:absolute ;}

a.emailme{ _background-image:none; background:#333 url(../images/bg-emailme.png) 90% 50% no-repeat; border:1px solid #444; color:#fff;
			display:block; font-size:15px; font-weight:700; left:0; padding:15px 40px 15px 15px; _padding:15px 20px 15px 15px; text-decoration:none; top:85px; 
			position:fixed; _position:absolute;cursor: pointer;}
			
	a.emailme:hover{ background:#222 url(../images/bg-emailme.png) 90% 50% no-repeat; _position:absolute; _background-image:none; }
	a.active.emailme{ background:#222 url(../images/bg-emailme-extended.png) 90% 50% no-repeat; _position:absolute; _background-image:none; }
	
/* =CONTACT-FORM
--------------------- */

#contact-form{width:210px;}
	form p{clear:both;margin-bottom:10px;}
	input,textarea{background-color:#fff;border:1px solid #ccc;color:#515151;padding:5px;width:200px;}
	textarea{height:50px;}
	.btn{_height:25px;_padding:2px;width:80px;cursor:pointer;}
	.btn:hover{background:#222; color:#fff; }

#formstatus{clear:both;font-weight:700; font-size:12px; line-height:10px; }
	.formstatuserror{color:#FF0000;}
	.formstatusok{color:#0C3;}