@charset "utf-8";
/*
 I am Dan dot net

I know th code is a mess, but I'll brush it up when I have the time :)
*/

/* ------ GENERAL RESETS ------ */

* { margin: 0; padding: 0; border: 0; list-style: none;} 

body {
	background: #fff;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	color: #7a7a7a;
	text-align: left;
	line-height: 20px;
}

/* ------ CONTAINER ------ */

div#container {
	width: 1000px;
	background: transparent url(images/header.gif) left top no-repeat;
	margin: 0 auto;
}

/* ------ HEADER ------ */

div#header {
	width: 1000px;
	height: 136px;
	position: relative;
	/*background: transparent url(images/header.gif) left top no-repeat;*/	
}	

		/* ------ MENUS AND SIDE NAVIGATION------ */
		
div#btn1_active, div#btn1_inactive, div#btn2_active, div#btn2_inactive, div#btn3_active, div#btn3_inactive, div#btn4_active, div#btn4_inactive  {
			position: absolute;
			width: 139px;
			height: 136px;
			top: 0;
		}
		
		div#btn1_active {			
			right: 434px;		
			background: transparent url(images/btn1_active.gif) left top no-repeat;
		}
		
		div#btn1_inactive {			
			right: 434px;
			background: none;
		}
		
		a#btn1, a#btn2, a#btn3, a#btn4  {
			display: block;
			text-indent: -9999px;
		}
		
		a#btn1 {				
				width: 139px;
				height: 136px;				
				background: transparent url(images/btn1.gif) left top no-repeat;
				margin: 0 0 0 0;	
			}		
				a#btn1:hover { background-position: left bottom; }
		div#btn2_active {
	 		right: 296px;
			background: transparent url(images/btn2_active.gif) left top no-repeat;
		}	
		
			div#btn2_inactive {
	 			right: 295px;
				background: none;
			}	
					
			a#btn2 {
				width: 139px;
				height: 136px;
				background: transparent url(images/btn2.gif) left top no-repeat;
				margin: 0 0 0 0;	
			}		
				a#btn2:hover { background-position: left bottom; }

		
		div#btn3_active {
			right: 157px;
			background: transparent url(images/btn3_active.gif) left top no-repeat;
		}		
			div#btn3_inactive {
			right: 157px;
			background: none;
			}
			
			a#btn3 {
				width: 139px;
				height: 136px;
				background: transparent url(images/btn3.gif) left top no-repeat;
				margin: 0 0 0 0;			
			}
				a#btn3:hover { background-position: left bottom; }

		div#btn4_active {
				right: 19px;
				background: transparent url(images/btn4_active.gif) left top no-repeat;
			}	
			
				div#btn4_inactive {
				right: 18px;
				background: none;
				}	
						
				a#btn4 {
					width: 139px;
					height: 136px;
					background: transparent url(images/btn4.gif) left top no-repeat;
					margin: 0 0 0 0;	
				}		
					a#btn4:hover { background-position: left bottom; }

	#sidebar {
		padding-left:0;
		padding-top: 0;
		margin-left: 0;
		margin-bottom:0;
		float: left;
	}
	
	#sidebar li a {
		color: #7a7a7a;
		display: inline-block;
		text-decoration: none;
	}
	
	#sidebar li a:hover {
		color: #fff;
	/*	background-color: #666;*/
		background-color: #f42602;
		text-decoration: none;
		padding: 0 3px;
		display: inline-block;
	}
	
	#sidebar p  {
		/*color: #666;*/
		font-size: 10px;
		font-weight: bold;
		line-height: 1.62em;
		padding-bottom: 30px;
		padding-left:20px
	}
	
	#sidebar li {
		font-size: 12px;
		font-weight:bold;
		line-height: 16px;
		padding-bottom: 8px;

	}
	#sidebar li a.active {
		color: #fff;
		text-decoration: none;
		background-color: #f42602;
		padding: 0 3px;
		display: inline-block;
	}

	a#homebutton {
			display: block;
			float: left;
			width: 110px;
			height: 56px;
			border: 0;
			margin: 48px 0 0 30px;
			background: transparent;
		}


div#next_btn_active, div#next_btn_inactive  {
			position: absolute;
			width: 84px;
			height: 10px;
			top: 0;

		/*	width: 82px; */
		}
		

		
		a#next_btn, a#btn2, a#btn3, a#btn4  {
			display: block;
			text-indent: -9999px;
		}
		
		a#next_btn {				
				width: 84px;
				height: 10px;				
				background: transparent url(images/next_btn.gif) left top no-repeat;
				margin: 334px 0 0 0;	
			}		
				a#next_btn:hover { background-position: left bottom; }

div#prev_btn_active, div#prev_btn_inactive  {
			position: absolute;
			width: 112px;
			height: 10px;
			top: 0;
		}
		

		
		a#prev_btn, a#btn2, a#btn3, a#btn4  {
			display: block;
			text-indent: -9999px;
		}
		
		a#prev_btn {				
				width: 112px;
				height: 10px;				
				background: transparent url(images/prev_btn.gif) left top no-repeat;
				margin: 334px 0 0 0;	
			}		
				a#prev_btn:hover { background-position: left bottom; }
		
/* ------- HOMEPAGE ------- */

	div#content {
		width: 955px;
		min-height: 450px;
		margin: 0 0 0 45px;
		border: 0px solid white;
	}
	
	* html div#content { height: 450px; }
	
		div#home_column1wide {
			float: left;
			width: 850px;
			height: 120px;
			background: #fff url(images/biglogo.gif) right top no-repeat;
			border: 0px solid #666;
			margin: 60px 0 0 0;
		}
		div#home_column2wide {
			float: left;
			width: 90px;
			height: 251px;
			background: #fff ;
			border: 0px solid #666;
			margin: 0 0 0 15px;
		}

		div#home_column1 {
			float: left;
			width: 288px;
			height: 350px;
			text-align:justify;
			background: #fff;
			border: 0px solid #666;
			margin: 0 0 0 0;
		}
		
			div#home_column1 p, div#home_column2 p, div#home_column3 p {
				width: 261px;
				margin-left: 2px;
			}
			
			div#home_column1 a, div#home_column2 a, div#home_column3 a { color: #000; }
		
		div#home_column2 {
			float: left;
			width: 288px;
			height: 350px;
			text-align:justify;
			/*background: #efefef url(images/1pxgrey.gif) right top repeat-y;*/
			border: 0px solid #666;
			margin: 0 0 0 50px;
		}
		
		div#home_column3 {
			float: left;
			width: 272px;
			height: 350px;
			text-align:justify;
			border: 0px solid #666;
			margin: 0 0 0 50px;
		}

		div.screenshot_home {
			width: 268px;
			height: 150px;
			margin: 0 0 12px 0;
		}

		* html div.screenshot_home { background: none;}
		
		div#home_column1:hover {
			/*color:  #000;
			font-weight: bold;
			background: #fff url(images/4pxgrey.gif) right bottom repeat-x;*/
			background: #fff url(images/4pxgrey.gif) right bottom repeat-x;

		}
	
		div#home_column2:hover {
			background: #fff url(images/4pxgrey.gif) right bottom repeat-x;

		}
				div#home_column3:hover {
			background: #fff url(images/4pxgrey.gif) right bottom repeat-x;

		}



/*------- WORKS COLUMNS -------*/

		div#works_column1 img, div#works_column2 img {
			margin: 18px 0 0 0;
		}

		div#works_column3 img {
			margin: 4px 0 0 4px;
		}

		
		div.screenshot {
			width: 508px;
			/*width: 408px;*/
			height: 204px;
			background: #efefef;
			margin: 0 0 12px 0;
		}
		div.screenshot_cont {
			width: 508px;
			height: 268px;
		/*	background: #efefef; */
			margin: 0 0 12px 0;
		}		
		* html div.screenshot { background: none; }

		div#works_column1wide {
			float: left;
			width: 377px;
			height: 120px;
			background: #fff url(images/work.gif) right top no-repeat;
			border: 0px solid #666;
			margin: 60px 0 0 0;
		}
		div#works_column2wide {
			float: left;
			width: 510px;
			height: 251px;
			background: transparent url(images/wide_right.gif) right top no-repeat;
			border: 0px solid #666;
			margin: 0 0 0 15px;
		}

* {
	
}
	
		div#works_column1 {
			float: left;
			/*width: 180px;*/
			width: 235px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 0;
			/*background: #fff url(images/1pxgrey.gif) right top repeat-y;*/
		}


			div#works_column1 p, div#works_column2 p {
				width: 261px;
				margin-left: 2px;
			}

 			div#works_column3 p {
				width: 495px;
		/*		width: 525px; */				
				margin-left: 10px;
			}
			
			div#works_column1 a, div#works_column2 a { color: #666; }
			
			div#works_column3 a { 
				color: #fff; 
			}
			div#works_column3 a:hover { 
			
				color: #000; 
				background: url(images/black_arrow.gif) right no-repeat;
			}

		
		div#works_column2 {
			float: left;
			width: 190px;
			height: 350px;
			background: #efefef url(images/1pxgrey.gif) right top repeat-y;
			border: 0px solid #666;
			margin: 0 0 0 0px;
		}
		
		div#works_column3 {
			float: left;
			width: 402px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 1px;
		}

	h2.work {
	width: 415px;
	height: 126px;
	background: url(images/work.gif) top left no-repeat;
	}

#black_text{
	color:  #000;
	font-size: 12px;
	font-weight:bold;
	line-height: 16px;
	margin: 10px 10px 10px 10px;
	text-align: justify;
	}

#thebox {
	height:46px;
	padding:28px 0 0 0px;

}
#thebox_contact {
	height:46px;
	/*padding:28px 0 0 0px;*/
	padding:24px 0 0 0px;
}
#square {
	position:relative; 
	display:block;
	width:46px; 
	height:46px; 
	float:left; 
	background:#000; 
	color:#fff; 
	font-size:20px; 
	font-weight:bold; 
	text-align:right; 
	padding:0 0 0 0;	
}

#rectangle_grey {
	position:relative; 
	display:block;
	width:140px; 
	height:46px; 
	float:left; 
	background:#efefef; 
	color:#000; 
	font-size:12px; 
	font-weight:bold; 
	text-align:left; 
	padding:0 0 0 0;
	z-index:1;
}

#rectangle_red {
	position:relative; 
	display:block;
	width:140px; 
	height:23px; 
	float:left; 
	background:#f42602; 
	color:#fff; 
	font-size:12px; 
	font-weight:bold; 
	text-align:left; 
	padding: 0 0 0 0;
	z-index:1;
}

	#box_link {
		position:relative; 
		display:block; 
		width:140px; 
		height:23px;
	}

	#box_link li {
		position:relative; 
		display:block; 
		float:left;
		height:20px; 
		margin-left:5px; 
		/*background:url(images/line.gif) bottom left repeat-x; */
		margin-bottom:5px; 
	}
	#box_link li a {
		position:relative; 
		display:block; 
		padding:2px 15px 3px 5px; 
		font-size:13px; 
		font-weight:bold; 
	}
/*	
	.default_list li {
		margin-left:20px;
		list-style-type: square;
	}
*/		
/* ------- TYPOGRAPHY ------- */

a {
	text-decoration: none;
	color: #ccc;
	}

a:hover {
	color: #ccc;
	text-decoration: none;
}

	#page_link {
		padding-left:0;
		padding-top: 0;
		margin-left: 0;
		margin-bottom:0;
		
	}
	
	#page_link li a {
		color: #7a7a7a;
		display: inline-block;
		text-decoration: none;
	}
	
	#page_link li a:hover {
		color: #fff;
	/*	background-color: #666;*/
		background-color: #f42602;
		text-decoration: none;
		padding: 0 3px;
		display: inline-block;	}
	
	#page_link p  {
		color: #666;
		font-size: 10px;
		font-weight: bold;
		line-height: 1.62em;
		padding-bottom: 30px;
		padding-left:20px
	}
	
	#page_link li {
		font-size: 12px;
		font-weight:bold;
		line-height: 16px;
		padding-bottom: 8px;

	}
	#page_link li a.active {
		color: #fff;
		text-decoration: none;
		background-color: #f42602;
		padding: 0 3px;
		display: inline-block;
	}

.linkclass {
	 font-weight:bold;
	 color: #666
}



/* ------- ABOUT ME ------- */


	div#about_column1wide {
		float: left;
		width: 464px;
		height: 106px;
		background: #fff url(images/about.gif) right top no-repeat;
		border: 0px solid #666;
		margin: 69px 0 0 0;
		}
	div#about_column2wide {
		float: left;
		width: 400px;
		height: 251px;
		background: transparent url(images/wide_right_about.gif) right top no-repeat;
		border: 0px solid #666;
		margin: 0 0 0 15px;
		}
		
		div#about_column1 img, div#about_column2 img {
			margin: 0 0 0 0;
		}

		div#about_column3 img {
			margin: 4px 0 0 4px;
		}

* {
	
}
		div#about_column1 {
			float: left;
			/*width: 180px;*/
			width: 350px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 0;
			background: transparent url(images/my_pic.jpg) left top no-repeat;
		}
		
			div#about_column1 p, div#about_column2 p {
				width: 261px;
				margin-left: 2px;
			}

 			div#about_column3 p {
				width: 525px;
				margin-left: 40px;
				
			}
			
			div#about_column1 a, div#about_column2 a {
					color: #666;
			} 
			
			div#about_column3 a { 
				color: #fff; 
			}
			div#about_column3 a:hover { 
			
				color: #000; 
				background: url(images/black_arrow.gif) right no-repeat;
			}
		
		div#about_column2 {
			float: left;
			width: 75px;
			height: 350px;
			background: transparent url(images/1pxgrey.gif) right top repeat-y;
			border: 0px solid #666;
			margin: 0 0 0 0px;
		}
		
		div#about_column3 {
			float: left;
			width: 402px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 1px;
			
		}
#thebox_about {
	height:46px;
	padding:284px 0 0 0px;
}

#my_name					{display:block; top:0; left:0; background:#f42602; 
	color:#fff;  }

.about_content {
	padding: 5px;
	width: 502px;
	background-color:#efefef;
	text-align:justify;
	position:absolute;
}

.work_content {
	width: 202px;
	background-color: #fff;
	text-align:justify;
	position:absolute;
}

/* ------- CONTACT ME ------- */


	div#contact_column1wide {
		float: left;
		width: 464px;
		height: 106px;
		background: #fff url(images/contact.gif) right top no-repeat;
		border: 0px solid #666;
		margin: 69px 0 0 0;
		}
	div#contact_column2wide {
		float: left;
		width: 400px;
		height: 251px;
		background: transparent url(images/wide_right_contact.gif) right top no-repeat;
		border: 0px solid #666;
		margin: 0 0 0 15px;
		}

		div#contactpic {
			float: left;
			/*width: 180px;*/
			width: 235px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 0;
			background: #fff url(images/enveloper.jpg) right no-repeat;
		}
		

#thebox_about {
	height:46px;
	padding:284px 0 0 0px;
}

#my_name					{display:block; top:0; left:0; background:#f42602; 
	color:#fff;  }

.contact_content {
	padding: 5px;
	width: 502px;
	background-color:#efefef;
	text-align:justify;
	position:absolute;
}




/* ----- FOOTER ----- */

	div#footer {
		width: 938px;
		height: 51px;
		float: left;
		clear: both; 
		margin: 0px 0 0 45px;
		background: transparent url(images/1pxgrey.gif) left top repeat-x;

	}

		div#footer img { display: block; margin: 0 0 9px 0}
	
		* html div#footer { margin: 0 0 0 22px; }
		div#footer div { float: left; }
		
		div.footer_content { margin: 4px 0 0 0px; }
			* html div.footer_content { margin: 4px 0 0 0px; }
			
	#footer_link {
		padding-left:0;
		padding-top: 0;
		margin-left: 0;
		margin-bottom:0;
		padding-bottom:10px;
		float: left;
	}
	
	#footer_link li a {
		color: #7a7a7a;
		display: inline-block;
		text-decoration: none;
	}
	
	#footer_link li a:hover {
		color: #fff;
		background-color: #f42602;
		text-decoration: none;
		padding: 0 0;
		display: inline-block;
	}

	#footer_link li {
		font-size: 10px;
		font-weight:bold;
		line-height: 16px;
		padding-bottom: 8px;

	}

#lang_box	{
	position:absolute; 
	display:block; 
	width:25px; 
	height:22px; 
	top:0px; 
	left:922px; 
	background:url(images/lang_box.gif) top left no-repeat; 
	color:#fff; 
	font-weight:bold; 
	font-size:11px; 
	line-height:22px; 
	text-align:left; 
	padding-left:5px; 
	padding-top:1px;
	z-index:4;
	}
#lang_box a	{
	position:relative; 
	display:block; 
	color:#fff;}
#lang_box a:hover {
	color:#000;
	padding-top:1px;
	}

#lang_box2	{
	position:absolute; 
	display:block; 
	width:25px; 
	height:22px; 
	top:0px; 
	left:952px;
	background:url(images/lang_box.gif) top left no-repeat; 
	color:#fff; 
	font-weight:bold; 
	font-size:11px; 
	line-height:22px; 
	text-align:left; 
	padding-left:5px; 
	padding-top:1px; 
	z-index:4;
	}
#lang_box2 a {
	position:relative;
	display:block; 
	color:#fff;
	}
#lang_box2 a:hover	{
	color:#000;
	padding-top:1px;
	}
	
/*--------------404--------------*/
		div#error_column1wide {
			float: left;
			width: 850px;
			height: 120px;
			background: #fff url(images/404.gif) right top no-repeat;
			border: 0px solid #666;
			margin: 60px 0 0 0;
		}	
		div#error_column2wide {
			float: left;
			width: 90px;
			height: 251px;
			background: #fff ;
			border: 0px solid #666;
			margin: 0 0 0 15px;
		}
/*--------------contextual link--------------*/
	#context_link {
	
		position:relative; 
		display:block; 

	}


	#context_link li {
		position:relative;
		display:block; 
		float:left;
		height:10px; 
		margin-bottom:5px; 
	}
	#context_link li a {
		position:relative; 
		display:block; 
		padding:0 14px 0 0; 
	/*	padding:2px 15px 3px 5px; */
		font-size:13px; 
		font-weight:bold; 
	}

/*contact form*/
button{border:0; margin:0; padding:0; cursor: pointer;}
.spacer{clear:both; height:1px;}


	/* -------------- contact form -------------- */
	#myForm{
		border:0;
	}
	
	
	#myForm button{ 
		clear:both;
		margin-left:0;
		background:#f42602;
		color:#FFF;
		font-size:11px;
		font-weight:bold;
		padding:4px 6px;
	}

#myForm button:hover { 
		clear:both;
		margin-left:0;
		background: #f42602 url(images/black_arrow.gif) right no-repeat;
		color:#000;
		font-size:11px;
		font-weight:bold;
		padding:4px 6px;
	}
	
	p#success
		{
			padding: 1px 1px;
			color: #000;
			font-weight: bold;
			font-size: 14px;
			margin-bottom: 2px;
			text-align: left;
			z-index: 8;			
		}
		
		p#bademail, p#badserver
		{
			padding: 1px 1px;
			color: #f42602;
			font-weight: bold;
			font-size: 14px;
			margin-bottom: 2px;
			text-align: left;
			z-index: 8;
		}

/*-------------- image slide--------------*/		

.wrap {
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
float: left;
cursor: pointer;
padding: 0 1em;
}

#works_slidepic li img {
	width: 500px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

.wrap_home {
width: 261px;
height: 125px;
position: relative;
overflow: hidden;
float: left;
cursor: pointer;
padding: 0 1em;
}


#works_slidepic_home li {
	list-style:none;
	float:left;
	background: #fff url("../images/back_side_home.gif") no-repeat 0 0;
	margin:0 0 0 0;
	padding: 0 0 0 0;
	top: 0;
	left: 0;
	width: 261px;
	height: 125px;
	position: relative;
}

#works_slidepic_home li img {
	width: 261px;
	height: 125px;
	position: absolute;
	top: 0;
	left: 0;
	/*cursor: pointer;*/
}

#works_slidepic_home li a {
	display: block;
	position: relative;
	overflow: hidden;
	width: 261px;
	height: 125px;
	padding: 16px;
}

#works_slidepic_home li.last{
	margin-right:0px;
}

#works_slidepic_home li a:focus, #works_slidepic_home li a:hover { text-decoration: none; }

/*new ticker*/
/* TICKER */
#ticker { width: 980px; margin: 0 auto 10px; clear: both; color: #76797c; }

.wrapper { width: 980px; margin: 0 auto; }
#ticker { min-height: 26px; margin-bottom: 15px; background: #f6f6f6 url(images/ticker_btm_grey.gif) no-repeat 0 100%; /*position: relative;*/ }
#ticker p { line-height: 16px; width: 100%; padding-top: 5px; padding-bottom: 0.2em; background: url(images/ticker_top_grey.gif) no-repeat 0 0; float: left; margin-bottom: 3px; }
#ticker a#ticker-headline { width: 12.5em; margin-right: 1em; color: #565656; font-weight: bold; text-align: center; border-right: 1px solid #808080; display: block; float: left; }
#ticker a#news-headline { padding-left: 15px; color: #a1a5a9; float: right; }
#ticker a { color: #6e6e6e; text-decoration: none; }
#ticker a#news-link { position: relative; z-index: 9999; }

/* ------- slideshow ------- */
		div#about_sshow {
			float: left;
			width: 937px;
			height: 350px;
			border: 0px solid #666;
			margin: 0 0 0 1px;
			
		}
			div#about_sshow a { 
				color: #fff; 
			}
			div#about_sshow a:hover { 
			
				color: #000; 
				background: url(images/black_arrow.gif) right no-repeat;
			}
#thebox_sshow {
	height:46px;
	padding:44px 0 0 500px;
	z-index: 100;
}


/* ------- end slideshow ------- */

/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0px;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:930px;
		height:220px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}					
								

/* Easy Slider */