@charset "UTF-8";
/* CSS Document */

/*		IE Fonts		*/
@font-face {  
 font-family: "AutoLF";  
 src: url("fonts/Auto 1 Light.eot");  
}

/*		Fonts		*/
@font-face {  
 font-family: "AutoLF";  
 src: url("fonts/Auto 1 Regular LF.ttf");  
}
@font-face {  
 font-family: "AutoLF-Light";  
 src: url("fonts/Auto 1 Light Italic LF.ttf");  
}


body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: "AutoLF", Georgia, Verdana, "Lucida Sans Unicode", arial, sans-serif;
	background:#231F20;
}
#holder {
	background:#fff;
}
a img {
	border:none;
	background-color:none;
}
a {
	font-size:16px;
}
.hide {
	display:none;
}
.alignLeft { float:left; margin-right: 1em; }
.alignRight { float:right; margin-left: 1em; }
.clear{clear:both;}
/****	Header	****/
#header {
	margin:0px auto;
	background:#000000;
}
#headerBg {
	margin:0px auto;
	background:#000000;
	width:800px;
	height:107px;
}
#headerNav {
	float:right;
	clear:right;
	position:relative;
	top:75px;
}
	/* Links */
a.header {
	color:#E6E6E6;
	text-decoration:none;
	padding:5px;
	text-shadow: 2px 2px 2px #333;
}
a.header:hover,a.read_more.web-dev:hover {
	border: 1px solid #CAE19D;
	padding: 5px;
	color: #5ca438;
	text-decoration: none;
	background: #ABD378;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
}
a.headerActive,a.read_more {
	border: 1px solid #ccc;
	padding: 5px;
	color: #999;
	text-decoration: none;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
}
#jsbg {
	position:fixed;
	width:100%;
	height:100%;
	opacity:0.75;
	filter:alpha(opacity=75);
	background-color:#fff;
	z-index:10000;
}
#jsdisable {
	position:absolute;
	width:400px;
	height:150px;
	top:50%;
	margin-top:-75px;
	left:50%;
	margin-left:-200px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-webkit-box-shadow: 0px 0px 50px #666;
	-moz-box-shadow: 0px 0px 50px #666;
	padding: 15px;
	background-color:#fff;
	color:red;
	font-size:18pt;
	text-align:center;
	z-index:10000;
}
	/* Contact */
#contact {
	position:absolute;
	right:25px;
	top:107px;
	background:#000000;
	z-index:1000;
	-moz-border-radius-bottomleft:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-left-radius:15px;
	-webkit-border-bottom-right-radius:15px;
}
#contactForm {
	width:300px;
	height:350px;
	background:#000000;
	margin:5px;
	color:#E6E6E6;
	font-size:18px;
	-moz-border-radius-bottomleft:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-left-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	display:none;
}
#contactTab {
	background:url(../images/include_r2_c15.png) no-repeat;
	width:96px;
	height:25px;
	position:absolute;
	right:25px;
	top:-3px;
	z-index:10001;
}
img.contact {
	padding: 0px 0px 0px 0px;
}
img.contact:hover {
	cursor:pointer;
}
img#contactText {
	padding: 0px 3px 0px 0px;
	float:right;
	clear:right;
}
input.contact  { 
	width:284px;
	height:25px;
	margin:5px;
	color:#666666;
	font-size:18px;
	background:#1A1A1A;
	border:none; 
}
textarea.contact { 
	width:286px;
	height:210px;
	margin:5px;
	color:#666666;
	font-size:18px;
	background:#1A1A1A;
	border:none; 
}
a.submitContact {
	color:#E6E6E6;
	text-decoration:none;
	padding:5px;
	margin:10px;
}
a.submitContact:hover{
	color:#000000;
	text-decoration:none;
	background:#ABD378;
	padding:5px;
	-webkit-border-radius: 15px;    /* for Safari */
    -moz-border-radius: 15px;       /* for Firefox */
}

/****	Index	****/
#index {
	background:#FFFFFF;
}

#sliderHolder {
	margin:0px auto;
	width:590px;
	border:2px solid #CCCCCC;

}


/****	About	****/
#aboutBg {
	background:url(../images/about.jpg) repeat-x center;
	height:180px;
	padding:
}
#aboutBanner {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000000;
	height:115px;
}
.about {
	margin:0px auto;
	text-align:left;
	width:590px;
}
.aboutContent {
	border:1px solid #CCCCCC;
	background:#E6E6E6;
	color:#4D4D4D;
	font-size:16px;
	padding:25px;
}


/****	Blog	****/
#rssFeed{
	position:relative;
	top:-50px;
	padding-right:10px;
	float:right;
	background:url(/images/rss_green.png) no-repeat;
	background-position:0px 25px;
	width:51px;
	height:50px;
}

.blogSlider {  
    list-style: none;  
    margin: 0;  
    padding: 0;
	padding-top: 5px;  
  
}  
.blogSlider li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
	width:540px;
    height: 55px;  
    margin-top: 5px;  
    margin-bottom: 5px;
	border-top:1px solid #999999;
  
}  
.columns{
  width:540px;
    cursor: pointer;  
}
.columns .main{
  float:left;
  width:50px;
  margin:10px 0px 0px 5px;
  line-height:18px;
  text-align:center;
}
.columns .sidebar{
  float:right;
  width:460px;
  color:#ABD378;
  font-size:30px;
  margin:10px 0px 0px 0px;
}
.sidebar a{
  color:#999999;
  font-size:30px;
  margin:10px 0px 0px 0px;
  text-decoration:none;
}
.sidebar a:hover{
  background:#ABD378;
  color:#000;
  padding:10px;
  font-size:30px;
  margin:10px 0px 0px 0px;
  text-decoration:none;
}
.blogContent {
	margin:10px 25px 25px 25px;
}
a.blogContent {
	color:#999999;
	text-decoration:none;
}
a.blogContent:hover {
	color:#fff;
	background:#ABD378;
	text-decoration:none;
}
div.blogContent a{
	color:#000;
	background:#ABD378;
	text-decoration:none;
}
div.blogContent a:hover{
	color:#ABD378;
	background:#000;
	text-decoration:none;
}
a#loadMore{
	color:#000;
	background:#ABD378;
	text-decoration:none;
	padding:4px 20px 10px 20px;
	-moz-border-radius-bottomleft:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-left-radius:15px;
	-webkit-border-bottom-right-radius:15px;
}
a#loadMore:hover{
	color:#ABD378;
	background:#000;
	text-decoration:none;
}
.showHide {
	float:right; 
	margin-right:3px; 
	margin-top:10px;
	display:none; 
	text-align:right;
	font-size:18px;
	vertical-align:middle;
}
.breadcrumb{
	color:#666;
}

/****	Services	****/

#services {
	background:#FFFFFF;
	margin:0px auto;
	width:680px;
}


.servicesColumns{
	width:750px;
	height:440px;
}
.servicesColumns .servicesLeft{
  float:left;
  width:210px;
  height:inherit;
  margin:10px 20px 0px 5px;
  line-height:18px;
  border:1px solid #CCCCCC;
  background:#E6E6E6;
  color:#4D4D4D;
  font-size:16px;
  padding:10px;
}
.servicesColumns .servicesRight{
  float:right;
  width:210px;
  height:inherit;
  color:#ABD378;
  font-size:30px;
  margin:10px 0px 0px 0px;
  border:1px solid #CCCCCC;
  background:#E6E6E6;
  color:#4D4D4D;
  font-size:16px;
  padding:10px;
}

.servicesContent {
	font-size:13px;
}

/****	Resume	*************/

#resume{
	margin:0px auto;
	padding:10px;
	width:900px;
	-moz-box-shadow: 0px 0px 10px #999;
	-webkit-box-shadow: 0px 0px 10px #999;
	box-shadow: 15px 15px 10px #999;
}
#resume_contaioner{
	padding:10px;
}
#resume_contaioner, #resume_contaioner table{
	background: #fff url(../images/resume_bg.gif) right;
	font: normal normal normal 12px helvetica, arial, sans-serif;
	font-weight:normal;
	text-align:left;
	color:#4D4D4D;
}
#resume h1,#resume h2,#resume h3,#resume h4,#resume h5,#resume h6,.r_name{
	font-family: 'Josefin Sans Std Light', arial, serif;
	color:#84a041;
	padding:0px;
	margin:0px;
}
#resume ul#r_header{margin:0px 0px -15px 0px;padding:0px;}
#resume ul#r_header li{display:inline;}
#resume ul#r_header li img{margin:10px 0px 0px 5px;}
.r_name{font-size:35px;}
.r_name .grey{font-size:48px;}
.grey{color:#4D4D4D;}
#resume a, .job_details{
	font: 12px helvetica, arial, serif;
	color:#84a041;
}
.job_details{
	padding-left:15px;
}
.job_details li{
	margin-bottom:5px;
}


/****	Socail Media	****/

#socialMedia {
	margin:0px auto;
	background:#000000;
}

#smBg {
	margin:0px auto;
	background:#000000;
	width:800px;
	height:97px;
	padding:25px 0px 0px 0px;
	color:#CCCCCC;
}

.twitterGrey {
	margin:10px;
	width:60px;
	height:60px;
	background:url(../images/twitter_grey.png) no-repeat;
}
.twitterGrey:hover {
	margin:10px;
	background:url(../images/twitter_grey.png) no-repeat;
}
.readernaut {
	max-height:50px;
}

.socialContact {
    text-align:left;  
    width: 500px;
	height:36px;  
	margin-top:10px;
    color: #cccccc;  
    font-size: 16px;  
    float: right; 
	border-right:1px solid #999999;
}  
.socialContact a{
  color:#ABD378;
  font-size:20px;
  padding:8px 8px 8px 8px;
  text-decoration:none;
}
.socialContact a:hover{
  background:#ABD378;
  color:#000000;
}

	/* Slider */

.kwicks {  
    list-style: none;  
    position: relative;  
    margin: 0;  
    padding: 0;  
}  
.kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
    float: left;  
    width: 160px;  
    height: 60px;  
    margin-right: 5px;  
}  


/****	Footer	****/

#footer {
	margin:0px auto;
	background:url(../images/footerBg.png) repeat-x #333333;
	height:157px;
}

#footerBg {
	margin:0px auto;
	background:url(../images/footerBg.png) repeat-x #333333;
	width:800px;
	height:157px;
}
.footerNavHolder {
	width:178px;
	float:left;
	margin-right:40px;
}
img.footerTitle {
	margin-top:15px;
	margin-bottom:15px;
}
.footerNav {
	border-top:1px solid #999999;	
	width:178px;
	color:#999999;
	text-decoration:none;
	padding-left:15px;
	padding-top:2px;
	padding-bottom:2px;
}
a.footerLink {
	color:#999999;
	width:178px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000;
}
a.footerLink:hover {
	color:#333333;
	background:#ABD378;
	text-decoration:none;
	text-shadow:#fff 0px 1px 0, #639033 0 -1px 0;
}
.footerNav:hover {
	background:#ABD378;
	color:#333333;
	text-shadow:#fff 0px 1px 0, #639033 0 -1px 0;
}




/***** Drag to Share *****/

#content { width:440px; }
#content img { float:right; margin-left:20px; }

.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }

#tipPort { position:absolute; display:none; height:45px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }

.arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }

#targets { display:none; list-style-type:none; position:absolute; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(/images/iconSprite.png) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li#email { background-position:0 -180px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#000; }

#overlay { background-color:#fff; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }

#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }

.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }
#shareEmail { background-color:#fff; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99997; opacity:0.7; display:none;}
#emailForm {
	width:350px;
	height:300px;
	background:#ffffff;
	margin:5px;
	padding:20px;
	color:#666666;
	font-size:18px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-webkit-box-shadow: 0px 0px 50px #666;
	-moz-box-shadow: 0px 0px 50px #666;
	position:absolute;
	top:50px;
	left:250px;
	z-index:100000;
	display:none;
}
input.share  { 
	width:330px;
	height:25px;
	margin:5px;
	color:#666666;
	font-size:14px;
	background:#ABD378;
	border:none;
}
textarea.share { 
	width:332px;
	height:110px;
	margin:5px;
	color:#666666;
	font-size:14px;
	background:#ABD378;
	border:none;
}
a.submitShare {
	color:#ABD378;
	text-decoration:none;
	padding:5px;
	margin:10px 10px 10px 30px;
	background:#000;
	padding:5px;
	-webkit-border-radius: 15px;    /* for Safari */
    -moz-border-radius: 15px;       /* for Firefox */
}
a.submitShare:hover{
	color:#000;
	text-decoration:none;
	background:#ABD378;
	padding:5px;
	-webkit-border-radius: 15px;    /* for Safari */
    -moz-border-radius: 15px;       /* for Firefox */
}
a#popupClose {
	text-decoration:none;
	float:right;
	color:#000000;
	background-color:#999999;
	font-size:24px;
	padding:0px 5px 0px 5px;
	-webkit-border-radius: 5px;    /* for Safari */
    -moz-border-radius: 5px;
}
a#popupClose:hover {
	background-color:#ABD378;
	color:#000000;
}
/* Portfolio Filter Stylesheet */

/*****Reset*****/


/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin: 20px auto 0; overflow: hidden; width: 725px; background-color:#FFFFFF; }

/*** ORGIN ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 10px; margin-top: 10px; width: 100%; } ***/
ul#filter {  position:relative; left:57px; top:-30px; width:650px; height:50px; overflow:hidden; font-size: 16px; list-style: none; margin:0px auto; margin-top:5px }
ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li a { 
	color:#000000;
	text-decoration:none;
	padding:5px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }

ul#filter li.current a, ul#filter a:hover { 
	color:#fff;
	text-decoration:none;
	padding:5px;
	-webkit-border-radius: 10px;    /* for Safari */
    -moz-border-radius: 10px;       /* for Firefox */
}
ul#filter li.current a { 
	color:#ABD378;
	text-decoration:none;
	background:#000000;
	padding:5px;
	-webkit-border-radius: 10px;    /* for Safari */
    -moz-border-radius: 10px;       /* for Firefox */
}
.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
}
.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left:600px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}
li.web-dev div.bubble div.triangle-l{border-color: transparent #407124 transparent transparent;}
li.web-dev div.bubble div.triangle-r{border-color: transparent transparent transparent #407124;}
li.apparel div.bubble div.triangle-l{border-color: transparent #00635A transparent transparent;}
li.apparel div.bubble div.triangle-r{border-color: transparent transparent transparent #00635A;}
li.web-design div.bubble div.triangle-l{border-color: transparent #0E6385 transparent transparent;}
li.web-design div.bubble div.triangle-r{border-color: transparent transparent transparent #0E6385;}
li.web-micro div.bubble div.triangle-l{border-color: transparent #736357 transparent transparent;}
li.web-micro div.bubble div.triangle-r{border-color: transparent transparent transparent #736357;}

.info {
	padding: 60px 25px 35px 25px;
}
.info img {
	max-width:245px;
}
.info img.first{
	border:1px solid #CCCCCC;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}
.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}
.bubble {
	clear: both;
	margin: 0px auto;
	width: 600px;
	border:1px solid #CCCCCC;
	background:#E6E6E6;
	color:#4D4D4D;
	-moz-border-radius: 10px;
  	-khtml-border-radius: 10px;
  	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	height: 50px;
	width: 630px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}
li.web-dev div.bubble div.rectangle, a:hover.web-dev{background: #ABD378;}
li.apparel div.bubble div.rectangle, a:hover.apparel{background: #00A99D;}
li.web-design div.bubble div.rectangle, a:hover.web-design{background: #29ABE2;}
li.web-micro div.bubble div.rectangle, a:hover.web-micro{background: #C7B299;}
li#all a:hover{background: #999;}
a.read_more.apparel:hover{color:#00635A;text-shadow: #949494 0px 1px 1px;border: 1px solid #00635A;}
a.read_more.web-dev:hover{color:#407124;text-shadow: #949494 0px 1px 1px;border: 1px solid #407124;}
a.read_more.web-design:hover{color:#0E6385;text-shadow: #949494 0px 1px 1px;border: 1px solid #0E6385;}
a.read_more.web-micro:hover{color:#736357;text-shadow: #949494 0px 1px 1px;border: 1px solid #736357;}
.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 10px;
	margin: 0px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}
ul#portfolio { float: left; list-style: none; margin-left: 0; width: 850px; }
ul#portfolio li { 
	margin: 0 10px 10px 0; 
	padding: 15px;
	width: 300px;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }