/*

pinx. Buero fuer Mediendesign
V.01.2010

*/


/*****************************************************
* Reset
*****************************************************/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, p, th, td {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

ul, ol {
list-style: none;
}

fieldset, img {
border: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:focus {
-moz-outline: 0;
}

/* Fuer Safari - Outline onfocus */
*:focus {outline: 0;}

a {text-decoration: none;}


/*****************************************************
* Layout
*****************************************************/
body {
color: #424242;
font: 11px/1.5 'Lucida Grande' ,Verdana, sans-serif;
text-align: center;
margin: 0 0 25px 0;
background: #EBECE6;
}

body#homepage {background: #CFD1C9 url(../i/ly/bg-body.png) repeat-x top left;}

#container {
text-align: left;
width: 960px;
margin: 0px auto;
}

ul#topnav {
position: relative;
z-index: 100;
width: 960px;
height: 40px;
background: #fff url(../i/ly/bg-nav.png) no-repeat bottom left;
border-left: 1px solid #E7E8E0;
border-right: 1px solid #E7E8E0;
margin: 0 0 40px 0;
}

body#homepage ul#topnav {
margin: 0 0 70px 0;
}

/*****************************************************
* Navigation oben
*****************************************************/

ul#topnav li {
position: absolute;
}

li#logo {top: 8px; left: 20px; height: 24px; width: 150px;}
li#buero {top: 10px; left: 655px; height: 15px; width: 70px;}
li#service {top: 12px; left: 716px; height: 14px; width: 70px;}
li#portfolio {top: 12px; left: 792px; height: 14px; width: 70px;}
li#kontakt {top: 12px; left: 886px; height: 14px; width: 70px;}

ul#topnav a {
display: block;
height: 14px;
text-indent: -99999px;
overflow: hidden;
}

ul#topnav li#buero a {
height: 15px;
}

li#logo a {width: 150px; height: 24px; background: transparent url(../i/ly/logo-typo.png) no-repeat 0 0;}
li#buero a {width: 40px; background: transparent url(../i/ly/b-buero.png) no-repeat 0 0;}
li#service a {width: 50px; background: transparent url(../i/ly/b-service.png) no-repeat 0 0;}
li#portfolio a {width: 70px; background: transparent url(../i/ly/b-portfolio.png) no-repeat 0 0;}
li#kontakt a {width: 55px; background: transparent url(../i/ly/b-kontakt.png) no-repeat 0 0;}

li#service a:hover, li#portfolio a:hover, li#kontakt a:hover, li#service a.hi, li#portfolio a.hi, li#kontakt a.hi {background-position: 0 -14px;}

li#service a.hi, li#portfolio a.hi, li#kontakt a.hi, li#service a.hi, li#portfolio a.hi, li#kontakt a.hi {background-position: 0 -14px;}

li#buero a:hover, li#buero a.hi, li#buero a.hi, li#buero a.hi {background-position: 0 -15px;}

/*****************************************************
* Layout Fortsetzung
*****************************************************/
.seitentitel {
text-indent: -99999px;
border-bottom: 1px solid #c4c6bc;
height: 27px;
padding: 0 0 40px 0;
margin: 0 0 25px 0;
}

#hlbuero {background: transparent url(../i/ly/h-buero.png) no-repeat 20px 0;}
#hlservice {background: transparent url(../i/ly/h-service.png) no-repeat 20px 0;}
#hlportfolio {background: transparent url(../i/ly/h-portfolio.png) no-repeat 20px 0;}
#hlkontakt {background: transparent url(../i/ly/h-kontakt.png) no-repeat 20px 0;}

.linkespalte {
position: relative;
width: 525px;
padding: 0 0 15px 20px;
float: left;
}

h1#kreativitaet {
width: 521px;
height: 58px;
background: transparent url(../i/ly/kreativitaet-und-technik.png) no-repeat top left;
text-indent: -99999px;
margin: 0 0 25px 0;
}

h2#schrauben {
width: 400px;
height: 25px;
background: transparent url(../i/ly/wir-schrauben.png) no-repeat top left;
text-indent: -99999px;
margin: 0 0 25px 0;
}

p#einleitung {
height: 113px;
}

#projektthumbs {
position: relative;
width: 525px;
height: 150px;
margin: 0 0 25px 0;
}

#projektthumbs ul {
margin: 0;
}

#projektthumbs li {
position: absolute;
top: 0;
width: 150px;
height: 150px;
background: transparent url(../i/ly/bg-projekt-start.png) no-repeat 0 0;
}

#p1 {left: 0;}
#p2 {left: 170px;}
#p3 {left: 340px;}

#projektthumbs img {
margin: 10px 0 0 10px;
padding: 0;
}

#newscontainer {
padding: 0;
}

.newsblock {
width: 160px;
float: left;
margin: 0 10px 0 0;
}

.newsblock h3 {
color: #708d33;
font-size: 12px;
}

body#homepage p.datum {
color: #6d6d6d;
margin: 0 0 10px 0;
}

.umbruch {
clear: both;
}

body#homepage .rechtespalte {
margin: 0 0 15px 565px;
width: 375px;
padding: 0;
}

.rechtespalte {
margin: 0 0 0 648px;
width: 292px;
padding: 5px 0 15px 0;
}

.rechtespalte img.motiv {
margin: 24px 0 0 0px;
}

#footer {
border-top: 1px solid #bbbdb3;
padding: 10px 0 0 20px;
}

#footer li {
display: inline;
margin: 0 10px 0 0;
}

/*****************************************************
* Listen
*****************************************************/
ul.liste15 li {
margin: 0 0 3px 0;
}

/*****************************************************
* Links
*****************************************************/
a {
color: #708d33;
}

a:hover {
color: #526627;
}

a.vcard {
padding: 0 0 0 20px;
background: transparent url(../i/ly/vcard-icon.png) no-repeat 0 0;
}

/*****************************************************
* Typo
*****************************************************/

h2 {
font-size: 14px;
color: #708d33;
margin: 0 0 10px 0;
}

h3#team, h3#kunden, h3#adresse, h3#fragen {
width: 145px;
height: 23px;
text-indent: -99999px;
margin: 0 0 15px 0;
}

h3#team {background: transparent url(../i/ly/hg-team.png) no-repeat top left;}
h3#kunden {background: transparent url(../i/ly/hg-kunden.png) no-repeat top left;}
h3#adresse {background: transparent url(../i/ly/hg-adresse.png) no-repeat top left;}
h3#fragen {background: transparent url(../i/ly/hg-fragen.png) no-repeat top left;}

h4 {
font-size: 13px;
color: #6d6d6d;
margin: 0 0 5px 0;
}

body#homepage p {
margin: 0;
}

p, ul {
margin: 0 0 15px 0;
}

em {
color: #666;
}

/*****************************************************
* Bilder im Content
*****************************************************/

.linkespalte img {
padding: 5px;
background: #fff;
margin: 0 0 40px 0;
-webkit-box-shadow: rgb(180, 180, 180) 1px 1px 2px;
-moz-box-shadow: rgb(180, 180, 180) 1px 1px 2px;
box-shadow: rgb(180, 180, 180) 1px 1px 2px;
}



body#homepage .rechtespalte img {
border: none;
}

.rechtespalte img {
border: 1px solid rgb(169, 172, 148);
margin: 0 0 30px 0;
}

/*****************************************************
* Forms
*****************************************************/

fieldset {
border-top: 1px dotted #ccc;
padding: 15px 0;
}

fieldset ul li {
line-height: 20px;
}

legend {
text-transform: uppercase;
letter-spacing: 1px;
background: #EBECE6;
margin: 0 0 10px 0;
padding: 0 3px 0 0;
}

label {
display: block;
float: left;
width: 90px;
line-height: 20px;
margin: 0 5px 5px 0;
clear: left;
}

input {
width: 200px;
padding: 3px 3px;
margin: 0 0 5px 0;
border: 1px solid #bbbdb3;
}

select {
width: 200px;
margin: 0 0 10px 0;
padding: 0 2px;
line-height: 20px;
border: 1px solid #bbbdb3;
}

textarea {
width: 200px;
height: 100px;
border: 1px solid #bbbdb3;
}

input.checkbox {
width: auto;
margin: 0 5px 0 93px;
border: none;
}

li.checkbox {
margin: 10px 0 20px 0;
}

input, select, textarea {
font: 11px/1.5 'Lucida Grande' ,Verdana, sans-serif;
}

input.absenden {
width: 101px;
height: 24px;
border: none;
margin: 5px 0 0 0;
}

.ok {
color: green;
background: #fff;
border: 1px solid #b7b9ad;
padding: 5px;
}

.error {
color: red;
background: #fff;
border: 1px solid #b7b9ad;
padding: 5px;
}