/*
------------------------------
piccto Design + Web | 2013
------------------------------
www.piccto.de
------------------------------
Style CSS
-----------------------------*/

body							{background: #f1f2f3; color: #555;}

header							{margin-top: 50px; padding-bottom: 3px; background: #fff;}

header .inside					{position: relative;}

.header							{position: absolute; top: -50px; right: 0; z-index: 1999; width: 70%;}

.header_img						{height: auto; float: left;}

.logo							{padding-top: 10px; width: 33.3334%; height: auto;}

.nav_top						{}

ul.nav_top 						{float: right; padding: 15px 0;}

ul.nav_top li					{float: left; padding-right: 20px;}

ul.nav_top li:last-child		{padding-right: 0;}

ul.nav_top a					{font-size: 13px; color: #999;}

ul.nav_main						{float: right; padding: 4.8% 0;}

ul.nav_main li					{float: left; padding-right: 20px;}

ul.nav_main li:last-child		{padding-right: 0;}

ul.nav_main a					{font-size: 18px; color: #999; font-weight: 300;}

ul.nav_main a:hover,
ul.nav_top a:hover				{color: #555;}

#home a#home,
#person a#person,
#netzwerk a#netzwerk,
#referenzen a#referenzen,
#kontakt a#kontakt,
#workshops a#workshops,
#training a#training,
#beratung a#beratung,
#arbeitsweise a#arbeitsweise,
#blog a#blog,
#service-design a#service-design {color: #555;}


.nav_responsive					{
								display: none;
								position: absolute; 
								top: -45px; 
								right: 30px; 
								z-index: 9999; 
								background: url(../bilder/bt_responsive.png) no-repeat; 
								width: 40px; 
								height: 40px;
								}

h4								{font-size: 20px;}



.unit-30.cell					{vertical-align: bottom; text-align: center; padding-left: 20px;}

.unit-30.cell img				{width: 240px; height: auto;}

.unit-100.cell					{padding-right: 100px;}

.block							{font-weight: 300; padding: 30px 40px; margin-bottom: 10px; background: white;}

#home .block p					{padding-bottom: 0;}

.block .units-row:last-child,
.block .units-row:last-child .unit-100	{margin-bottom: 0;}

.block h2						{font-size: 28px;}

.block p, 
.block ul,
.block h6						{padding-left: 40px;}

.block li:before				{content: "•"; padding-right: 10px; margin-left: -16px; color: #0055a6;}

.block li						{padding-left: 16px;padding-bottom:5px;}

.block hr						{margin: 30px 0;}

.block a:hover					{color: #0055a6; border-bottom: 1px solid #0055a6;}

.view .block					{padding: 20px; margin-bottom: 0;}

.view .block-50					{width: 49.5%;}

.view .block h4					{font-size: 17.5px; font-weight: 400; line-height: 1.3; color: #0055a6; padding-bottom: 20px;}

.view .block h4 span			{color: #555;}

.view .block p strong			{display: inline-block; padding-bottom: 5px;}

.view hr						{margin: 20px 0;}




.blue							{color: #0055a6;}

.grey							{color: #555;}

.stoerer						{
								font-size: 13px;
								color: #fff; 
								padding: 15px; 
								position: absolute; 
								bottom: 25px;
								right: -25px;
								z-index: 999;
								background: #0055a6; 
								/*-moz-transform: rotate(-20deg);
								-ms-transform: rotate(-20deg);
								-o-transform: rotate(-20deg);
								-webkit-transform: rotate(-20deg);
								transform: rotate(-20deg);*/
								}
								
h1, h4							{line-height: 1.3;}

a, a:visited					{color: #555;}

.impressum a                    {text-decoration:underline !important; color:inherit !important}
								
/*  Blog  */

.blog-short	img,
.blog-short .blog-date,
.blog-short .blog-pagination	{display: none;}

.blog-short h2.blog-title		{font-size: 17.5px; font-weight: 400;}

.blog h2.blog-title				{xxxfont-size: 28px;}

.blog .blog-date				{color: #0055a6;}

.blog-date {
	display: none;
}

.blog p							{padding-bottom: 15px; xxxpadding-left: 0;}

.blog-wrap .entry,
.blog-pagination				{padding-top: 20px; margin-top: 20px; border-top: 1px dotted #ccc;}

.blog-wrap .entry:first-child	{padding-top: 0; margin-top: 0; border-top: none;}

a.read-more						{margin-left: 10px; font-size: 13px; color: #0055a6; xborder-bottom: 1px solid #0055a6; white-space: nowrap;}

footer							{padding: 15px 0;}

footer li						{float: left; padding-right: 20px; color: #999;}

footer a						{color: #999;}

img {width:100%;height:auto;}

img.header_img {width:33.33334%;height:auto;}

#home img.header_img, 
#blog img.header_img,
#person img.header_img {width:50%;height:auto;}

/* dd formmailer 
-----------------------------*/

.ddfmwrap, form.ddfm			{}
form.ddfm						{position: relative;}

.form .credits					{display: none;}
.form p.fieldwrap				{margin-bottom: 10px; padding: 0;}
.form label						{display: none;}
.form input, .form textarea		{width: 90%; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; padding: 10px; border: 1px solid #DDD; color: #333;}
.form input						{}
.form .errorlist				{display: none;}
.form span.required				{color: #ff0000;}
.form .ddfmerrors				{color: #ff0000; padding-bottom: 10px;}
.form .submit					{position: absolute; bottom: -15px; }
.form .submit input				{
								width: 70px;
								padding: 7px 0; 
								background: #333; 
								color: #FFF; 
								border: 1px solid #111;
								cursor: pointer;
								}

input.placeholder, 
textarea.placeholder,
input::-webkit-input-placeholder, 
input:-moz-placeholder, 
input:-ms-input-placeholder 	{color: #CCC !important;}

/* responsive styles 
-----------------------------*/

@media only screen and (max-width: 800px) {

.header							{display: none; background: #333; opacity:0.9; width: 50%; padding-bottom: 10px;}

ul.nav_top,
ul.nav_main						{float: none; padding: 0 30px;}

ul.nav_top						{margin-top: 50px;}

ul.nav_top li,
ul.nav_main li					{float: none; padding: 5px; border-top: 1px solid #fff;}

ul.nav_top li a,
ul.nav_main li a				{font-size: 18px !important; font-weight: 400; color: #fff;}

ul.nav_main a:hover,
ul.nav_top a:hover				{color: #fff;}

#home a#home,
#person a#person,
#netzwerk a#netzwerk,
#referenzen a#referenzen,
#kontakt a#kontakt,
#workshops a#workshops,
#training a#training,
#beratung a#beratung,
#arbeitsweise a#arbeitsweise,
#blog a#blog					{color: #999;}

.nav_responsive					{display: block;}

.logo							{width: 50%;}

.block							{padding: 20px;}

.block p, 
.block ul,
.block h6						{padding-left: 0;}

.view .block-50					{width: 100%; margin-left: 0; margin-right: 0; display: block;}

#home .units-row.view			{background: none !important}

.blog-short						{margin-top: 10px;}

.unit-30.cell img				{width: 200px; height: auto;}

.unit-100.cell					{padding-right: 0;}

}

@media only screen and (max-width: 400px) {

.header							{width: 100%;}

.logo							{width: 75%;}

.stoerer						{right: -15px;}

#home .block.extra				{padding: 20px !important;}