@charset "UTF-8";

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}



/* End Reset */



/* Layout Structure */
/* http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ */
body {
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	background-color: #252525;
	margin: 0px;
}

a {
   outline: none;
}


#wrapper {
	height: 2575px;
	width: 960px;
	margin: 0px auto 0px auto;
	z-index: 1;
	position:relative;
	
}

.wrapper {
	width: 960px;
	margin: 0 auto;
	}

	#topbar {
		background-image: url(images/bg.jpg);
		height: 100px;
		position: fixed;
		width: 100%;
		margin: 0px;
		top: 0px;
		left: 0px;
		z-index: 2;
		}

	#topbar #logo {
		float: left;
		height: 100px;
		width: 380px;
	}
	#topbar #nav {
		float: right;
		height: 100px;
		width: 320px;
	}
/* -- bei 4 Buttons auf 410 setzen  -- */
	
	#topbar #nav li {
		margin: 0px;
		padding: 0px;
		float: left;
		cursor:pointer;
		}
	 #topbar #nav li img {
		margin: 0px;
		padding: 0px;
		}

#wrapper #about {
	float: left;
	clear: left;
	height: 450px;
	width: 460px;
	padding: 25px 20px 25px 0px;
	border-bottom: 1px solid #5c5c5c;
}
#wrapper #services {
	float: right;
	clear:right;
	height: 450px;
	width: 460px;
	padding: 25px 0px 25px 20px;
	border-bottom: 1px solid #5c5c5c;
}


	

#wrapper #hire{
	clear:both;
	margin: 100px 0px 0px 770px;
	width: 190px;
	height: 35px;
	background:url(images/available_for_hire_bg.jpg) no-repeat top;
}
#wrapper #header {
	padding-top: 130px;
	clear: both;
	height: 258px;
	width: 960px;
}
#wrapper #portfolio {
	clear: both;
	padding-top: 75px;
	min-height: 875px;
	width: 960px;
}

		#portfolio ul{
			width:960px;
			margin: 0px;
			padding: 0px;
		}

		#portfolio ul li.image{
			float: left;	
			display:inline-block;
			list-style-type: none;
			width: 220px;
			height: 285px;
			margin: 0px;
			padding: 0px 8px 0px 8px;
		}
/* -- jQuery Hover Change  -- */

		#portfolio li.image a {
			display: block;
		}
	
		#portfolio li.image  a.thumb {
			width: 220px; /*--Width of image--*/
			height: 167px; /*--Height of image--*/
			cursor: pointer;
		}
		#portfolio li.image span { /*--Used to crop image--*/
			width: 220px;
			height: 167px;
			overflow: hidden;
			display: block;
		}
		#portfolio li.image a.thumb:hover {
			background: #333; /*--Hover effect for browser with js turned off--*/
		}



#wrapper #heading{
	clear: both;
	height: 60px;
	width: 960px;
	padding: 40px 0px 15px 0px;
	border-bottom: 1px solid #5c5c5c;
}
#wrapper #contactus {
	float: left;
	clear: left;
	height: 550px;
	width: 460px;
	padding: 40px 20px 0px 0px;
}
#wrapper #contactinfo {
	float: left;
	height: 435px;
	width: 230px;
	padding: 105px 0px 0px 20px;
}
#wrapper #testimonial {
	clear:right;
	float: right;
	height: 435px;
	width: 190px;
	padding: 105px 0px 0px 40px;
}



#footer {
	height: 100px;
	position:relative;
	width: 960px;
	clear: both;
	}

	
	#footer #copyright {
		float: left;
		margin-top: 35px;	
	}
	#footer #footerlogo {
		float: right;
		margin-top: 25px;
	}
	


/* Typographic Rules */

h1 {
	font-size: 20.5pt;
	color: #dedede;
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-weight: normal;
	line-height: 1.5em;
	padding:17px 0px 10px 0px;
}
p {
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color:#777;
	line-height: 1.5em;
}
h2 {
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 17px;
	color:#B1B1B1;
	line-height: 4px;
	letter-spacing: 0.07em;
	font-weight: normal;
	padding:17px 0px 10px 0px;
	
}
h3 {
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 15px;
	color: #dedede;
	line-height: 2px;
	letter-spacing: 0.07em;
	font-weight: bold;	
}
h4 {
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #666666;
	line-height: 35px;
	letter-spacing: 0.07em;	
	margin-top: -3px;
}
a {
	color: #d23624;
	text-decoration: none;
}
a:link {
	color: #d23624;
	text-decoration: none;
}
a:hover {
	color: #d23624;
	text-decoration:underline;
}
a:visited {
	color: #d23624;
}
.copyright {
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 10px;
	color:#444444;
	line-height: 1.5em;
}

/* Different Rules */

.hire{
	color: #d23624;
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 10px;
	font-style:italic;
	letter-spacing: 0.07em;
	text-align:center;
	padding-top: 7px;
}

p.discription{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 11px;
	letter-spacing: 0.07em;
	line-height: 1em;
	color: #888888;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

li.image h4 {
	line-height: 1.8em;
	margin-top: 2px;
	}


/* Form Rules */

#name{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #555555;
	line-height: 1.5em;
	background:url(images/smallfield.jpg) no-repeat;
	width: 400px;
	height: 30px;
	padding: 15px 20px 0px 20px;
	margin: 5px 0px 10px 0px;
	border:none;
}
.name{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #9f9f9f;
	line-height: 1.5em;
}
#email{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #555555;
	line-height: 1.5em;
	background:url(images/smallfield.jpg) no-repeat;
	width: 400px;
	height: 30px;
	padding: 15px 20px 0px 20px;
	margin: 5px 0px 10px 0px;
	border:none;
}
.email{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #9f9f9f;
	line-height: 1.5em;
}
#message{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #555555;
	line-height: 1.5em;
	background: url(images/largefeild.jpg) no-repeat;
	width: 400px;
	height: 139px;
	padding: 20px 20px 0px 20px;
	margin: 5px 0px 30px 0px;
	border:none;
	overflow: auto;

}
.message{
	font-family: "Lucida Grande", "Lucida Sans", "sans-serif";
	font-size: 13px;
	color: #9f9f9f;
	line-height: 1.5em;
}
#submit{
	background:url(images/submitbtn.jpg) no-repeat;
	width: 141px;
	height: 37px;
	border:none;
	cursor:pointer;
}

/* Contact Info Rules */

#phone{
	width: 225px;
	height: 30px;
	padding: 13px 0px 3px 0px;
	border-top: 1px dotted #5c5c5c;
	border-bottom: 1px dotted #5c5c5c;
}
#emailme{
	width: 225px;
	height: 30px;
	padding: 13px 0px 3px 0px;
	border-bottom: 1px dotted #5c5c5c;
}
#facebook{
	width: 225px;
	height: 30px;
	padding: 13px 0px 3px 0px;
	border-bottom: 1px dotted #5c5c5c;
}
#twitter{
	width: 225px;
	height: 30px;
	padding: 13px 0px 3px 0px;
	border-bottom: 1px dotted #5c5c5c;
}
#skype{
	width: 225x;
	height: 30px;
	padding: 13px 0px 3px 0px;
	border-bottom: 1px dotted #5c5c5c;
}