/* Pascalmh.de - Version 9
   
   Hi, welcome to the main
   CSS-File of my Page.
   
   Get inspired by, if you
   want to copy and or need
   help, drop me a line
   
   info [at] pascalmh.de
   
--------------------------*/

/* body and html-Tag Styling
--------------------------*/

html {
background: #000 url(../design/bg.png) no-repeat fixed;
color:#888;
}

h1 {
font-size:34px;
font-weight:700;
color:#fff;
padding:20px 0 0 0;
text-align:right;
}

h2 {
font-size:18px;
font-weight:400;
color:#888;
text-transform:capitalize;
text-align:right;
}

h3 {
font-size:32px;
font-weight:400;
color:#fff;
text-transform:capitalize;
margin:50px 0 0 0;
}

 h3 span {
 color:#666;
 }

h4 {
padding:20px 0 0 0 0;
font-size:24px;
font-weight:700;
color:#ccc;
}

h5 {
font-size:12px;
font-weight:700;
color:#ccc;
}

body {
font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
margin-top: .5em;
color:#888;
font-weight:400;
margin:0 20px;
}

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

a:hover {
color:#888;
}

.clear {
clear:both;
}

h4#hey {
margin: 30px 0;
text-align:center;
}

/* wrapper
--------------------------*/

#wrapper {
height: 100%;
width:615px;
}

/* Header
--------------------------*/

#header {
}


/* Main Navigation
--------------------------*/

ul#navi  {
list-style:none;
line-height:50px;
border-bottom:1px #666 solid;
width:630px;
display:none;
}

 ul#navi li {
 display:inline;
 }
  
  ul#navi li a {
  padding:10px;
  margin:0 10px 0 0;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  background:#333;
  opacity:0.7;
  }
  
  ul#navi li a:hover {
  color:#ccc;
  opacity:1;
  }

/* Content
--------------------------*/

ul.subnavi {
margin:12px 0 0 0;
float:right;
}


ul.subnavi li {
display:inline;
background:none;
}

ul.subnavi li a {
background:#222;
color:#fff;
padding:5px;
border:1px #333 solid;
text-decoration:none;
opacity:0.7;
text-align:center;
}  

ul.subnavi li.selected a {
opacity:1;
border:1px #444 solid;
}
  
ul.subnavi li a:hover {
opacity:1;
}  

#about div, #portfolio div#referenz, #portfolio div.border, #contact div.border {
border-bottom:1px #333 solid;
margin:0 0 20px 0;
}

form {
border-bottom:1px #333 solid;
padding:0 0 40px 0;
margin:0 0 40px 0;
}

.notification_error
{
border: 1px solid #fff;
height: auto;
width: 90%;
padding: 4px;
background: red;
text-align: left;
color:#fff;
}

.notification_ok
{
border: 1px #fff solid;
height: auto;
width: 90%
padding: 8px;
background: green;
text-align: center;
color:#fff;
}
  
/* About
--------------------------*/
#about p {
margin: 0 0 20px 0;
}


.left {
 float:left;
 width:370px;
 border:none !important;
}

.right {
float:right;
width:220px;
border:none !important;
}
  
.list, .list {
line-height:25px;
}

 .left .list span, .right .list span {
 float:right;
 }
 
 .left .list a, .right .list a {
 font-weight:700;
 }


/* Portfolio
--------------------------*/

 #portfolio ul.tasks {
 margin:10px 0;
 }

 #portfolio ul.tasks li {
 display:inline;
 background:url(../design/harken.gif) right no-repeat;
 padding:0 14px 0 0;
 }
 
 #portfolio ul.tasks li.link {
 background:none;
 padding:0;
 } 
  #portfolio ul.tasks li.link a {
  border:none; 
  }

 
 #portfolio ul.tasks li a {
 padding:5px;
 color:#fff;
 border:1px #000 solid;
 text-decoration:none;
 font-weight:700;
 }
 
 #portfolio ul.tasks li a:hover {
  background:#222;
 border:1px #333 solid;
 }
 
 #portfolio #referenz p {
 padding:10px 0;
 }
 
 #slidercontainer {  
 border:1px #333 solid;
 background:#222 url(../loading.gif) no-repeat 50% 50%;  
 width:  610px; 
 height: 340px; 
} 
 
#slidercontainer img {
border: none; 
}

#slider {
	margin:10px;
	position:relative;
	//See the "style-pack" below for image
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

#nav {
text-align:right;
margin:5px;
}

#nav a {
 margin:0 0 0 3px;
 padding:2px 5px;

 background:#222;

}

#nav a.activeSlide {
 border:1px #333 solid;
}

#nav span {
float:left;
}

.referenzsmall {
	padding:10px;
	border:1px #333 solid;
	background:#222;
	width:280px;
	height:190px;
	overflow:hidden;
}
  
/* Contact
--------------------------*/

#contactme label {
border-bottom:1px solid #222;
padding:0 0 5px 0;
margin:0 0 10px 0;
display:block;
}

 #contactme textarea {
 width:350px;
 height:200px;
 background:#222;
 border:1px #333 solid;
 color:#888;
 font-size:16px;
 padding:10px;
 }

  #contactme textarea:focus {
   color:#fff;
  }


 #contactme .btn {
 width:222px;
 margin:10px 0 0 0;
 }

 #contactme input {
 background:#222;
 border:1px #333 solid;
 color:#888;
 font-size:16px;
 padding:4px;
 margin:0 0 27px 0;
 width:210px;
 }
 
  #contactme input:focus {
  color:#fff;
  }


/* Footer
--------------------------*/

#footer {
font-weight:400;
color:#888;
background:#222;
padding:22px;
margin:50px 0 0 0;
}

 #footer span {
 display:none;
 }

  #footer a {
  color:#fff;
  font-weight:700;
  text-decoration:none;
  }

/* popeye
--------------------------*/  
  
.popeye {
border:1px #333 solid;
background:#222;
padding:10px;
overflow:       auto;   /* fallback popeye is scrolling! */
height:         300px;  /* set to max height of fallback popeye */
}

.popeye ul {
width:590px;
}

.popeye-tools-wrap {
padding:15px 0 5px 0;
background:#222;
}

.popeye-cur {
padding:0 0 0 5px;
}

.popeye-cap {
padding:10px 0 0 0;
}

.popeye-total {
padding:0 5px 0 0;
}

.popeye .popeye-stage {
cursor:pointer;
}

.popeye-isloading {
    background:     #222 url(../design/loading.gif) no-repeat center;
}

.popeye-prev, .popeye-next {
color:#222;
}