/*  
Theme Name: Realdesigns Berlin
Theme URI: 	www.realdesigns.de
Version: 	September 2010
Author: 	Realdesigns Berlin / Thorsten Kienemann
Website: 	http://www.realdesigns.de
*/

/* Reset Browser */
* 		{vertical-align:baseline;font-weight:inherit;font-family:inherit;font-style:inherit;font-size:100%;border: 0 none;outline:0;padding:0;margin:0}
:focus 	{outline:0}
ul	 	{list-style:none}
body 	{line-height:1;background:white;font-family:Helvetica, Arial, sans-serif;color:#000}
strong	{font-weight:bold}

@font-face {
	font-family: 'CutifulRegular';
	src: url('cutiful-webfont.eot');
	src: local('☺'), url('cutiful-webfont.woff') format('woff'), url('cutiful-webfont.ttf') format('truetype'), url('cutiful-webfont.svg#webfontcscShVQu') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* CSS Tooltip */
.tooltip 				{border-bottom: 1px dotted #000;color:#000;outline:none;cursor:help;text-decoration:none;position:relative}
.tooltip span 			{margin-left: -999em;position:absolute}
.tooltip:hover span 	{font-family:inherit;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:250px}
.tooltip:hover			{text-decoration:none}
.classic				{padding:1.6em 1em 0.7em 1em;background:url(../images/bg_tooltip-trans.png) top left no-repeat;color:#fff;font-size:11px;font-weight:normal;line-height:1.4em}

/* Wrapper */
.wrap 					{margin:0 auto;width:980px}
.wrap_footer			{margin:0 auto;width:980px;background:url(../images/bg_footer.jpg) top right no-repeat;height:55px}

/* Headlines */ 
#welcome h1, #welcome h2, #welcome p	{width:500px}
#welcome h1, #referenzen h1				{font-size:1.8em; letter-spacing:-1px; color:#900; font-weight:bold;margin-bottom:10px}
#welcome h2, #referenzen h2				{font-size:1.0em; line-height:1.4em;font-weight:bold;color:#900}
#welcome h1.willkommen					{font-size:2.2em;color:#900;font-family:'CutifulRegular';font-weight:normal; margin-bottom:10px;text-transform:lowercase}
#welcome p, #referenzen p				{font-size:0.85em;line-height:1.6em}
#content #welcome h2.einleitung			{font-size:0.95em;color:#000; margin:20px 0 20px 0}
#project_new h1							{font-size:1.1em;color:#900;margin:0 0 10px 0}

/* Bullets */
ul.aus_einer_hand, ul.inspiration	{line-height: 1.8em}
ul.aus_einer_hand li				{list-style-type:none;list-style:none;background:url(../images/bullet_green-trans.png) no-repeat center left;margin:0;padding:0 0 0 20px;line-height:1.5em;font-size:0.8em}
ul.inspiration li					{list-style-type:none;list-style:none;line-height:1.5em;font-size:0.8em}

/* Container */
#header			{background:url(../images/bg_header.jpg) top left repeat-x;height:292px}
#top			{display:none}

.contact_tag	{position:absolute;left:255px;width:127px}

#logo				{background:url(../images/bg_logo.jpg) top right no-repeat;height:250px}
#logo .logo_iphone	{display:none}
#header .logo		{margin:53px 0 0 40px}
#header .logo_print {display:none}

#content		{background:url(../images/bg_middlepane.jpg) top left repeat-x}
#content_inner	{background:#fff;height:auto;padding:40px;width:900px;overflow:auto}

#welcome		{width:534px;float:left;border-right:1px solid #CCC}
#referenzen		{width:auto;float:left}

#project_new	{width:325px;float:left;margin-left:40px}
#project_new p	{font-size:0.75em;line-height:1.6em}

#date			{font-size:11px;color:#fff;padding:14px 0 0 15px;width:365px;float:left}

.trenner		{background:url(../images/bg_trenner.gif) center left repeat-x;height:40px;display:block;clear:both}
.trenner_ref	{background:url(../images/bg_trenner.gif) center left repeat-x;height:25px;display:block;clear:both}

/* Kontakt im Headbereich */
#contact_open			{width:100%;height:auto; background:#fff;padding:0;overflow:auto}
#contact_open_inner		{padding:20px;overflow:auto}
#contact_open_left		{width:370px;background:url(../images/bg_contact_open_left.jpg) right center no-repeat #fff;float:left;margin:0 20px 0 80px; font-size:0.75em}
#contact_open_left h1	{font-size:1.3em; line-height:1.4em; margin:0 0 10px 0;font-weight:bold;color:#900}
#contact_open_left p	{line-height:1.7em;margin:0 0 10px 0}
#contact_open_right		{width:450px;background:#fff;float:left;margin:20px 0 0 10px}
#gotop					{display:none}

/* Bottom Pane */
#bottompane 	{border-top:1px solid #CCC;height:auto;background:#fff}
#bottompane h1	{font-size:1.1em;color:#900;margin-bottom:15px}

.bottombox		{width:305px;height:200px;float:left;padding:20px 0 20px 20px; background:url(../images/bg_bottombox.jpg) top left no-repeat}
.bottombox_3	{width:289px;height:200px;float:left;padding:20px;background:url(../images/bg_bottombox_3.jpg) top left no-repeat;border-right:1px solid #CCC}
.bottombox_3 p	{font-size:0.75em;line-height:1.4em}

/* Footer */
#footer			{clear:both;border-top:1px solid #CCC;background:#E0E0E0}
#footer ul li	{float:left;text-transform:uppercase;font-size:0.7em;margin-left:20px;line-height:5.0em}

#footer a:link, #footer a:visited	{color:#000; text-decoration:none}
#footer a:hover						{color:#000; text-decoration:underline}

/* Navigation */
#navcontainer	{width:980px;height:60px;background:transparent;padding:1px 0 0 0}
#nav 			{height:80px;list-style: none;margin:0;padding:0}
#nav li 		{float:left;margin:0;padding:0;height: 40px;overflow: hidden; /* if text-resize, this'll keep the nav the same size */	}
#nav li a 		{display:block;margin:0;padding:0;line-height: 40px;text-indent: -5000px;overflow: hidden;background-position: left top; /* horizontally centers the background image */}
#navHome		{width:120px;background:url(../images/nav_startseite.jpg) no-repeat}
#navPortfolio 	{width:120px;background:url(../images/nav_portfolio.jpg) no-repeat}
#navKompetenz 	{width:120px;background:url(../images/nav_kompetenz.jpg) no-repeat}
#navLeistungen	{width:120px;background:url(../images/nav_leistungen.jpg) no-repeat}
#navKontakt		{width:120px;background:url(../images/nav_kontakt.jpg) no-repeat}
#nav li a:hover {background-position: 50% -40px}
#nav li a.currentSection, #nav li a.currentSection:hover {background-position: 50% -40px}

/* Kontaktformular Header */
.contact_header					{height:auto}
.contact_header label			{float:left; width: 150px;margin:0; font-size:0.75em}
.contact_header input			{width:250px;margin:0 0 8px 0;padding:3px; background:#ffffff;border:1px solid #CCCCCC;font-size:0.75em}
.contact_header textarea		{width:250px;height:100px;padding:3px;margin:0 0 8px 0;font-size:0.75em}
.contact_header br				{clear:left}
.contact_header input.btn		{padding:8px 10px 8px 10px;cursor:pointer;background-color:#6A0000;border:none;color:#fff;width:auto;margin:5px 10px 0 0;float:right;font-family:Helvetica,Arial,sans-serif;font-size:0.70em}
.contact_header input.btnhov	{background-color:#B30101;color:#fff}
.contact_header .focus			{width:250px;margin:0 0 8px 0;padding:3px; background:#f0f0f0;border:1px solid #6A0000}
.contact_header .blur			{width:250px;margin:0 0 8px 0;padding:3px; background:#fff;border:1px solid #ccc}

/* Kontaktformular */
.kontakt_form					{margin-top:18px}
.kontakt_form label				{float: left;width:180px;margin:0; font-size:0.85em}
.kontakt_form input, textarea	{width: 250px;margin:0 0 15px 0;padding:3px; background:#fff;border:1px solid #CCCCCC;font-family:Helvetica,Arial,sans-serif; font-size:0.75em}
.kontakt_form textarea			{width: 250px;height: 100px;font-family:Helvetica,Arial,sans-serif}
.kontakt_form br				{clear: both}
.kontakt_form input.btn			{padding:8px 10px 8px 10px;cursor:pointer;background-color:#6A0000;border:none;color:#fff;width:auto;margin:5px 10px 0 0;float:right;font-family:Helvetica,Arial,sans-serif;font-size:0.70em}
.kontakt_form input.btnhov		{background-color:#B30101;color:#fff}
.kontakt_form .focus			{width: 250px;margin:0 0 15px 0;padding:3px; background:#f0f0f0;border:1px solid #6A0000}
.kontakt_form .blur				{width: 250px;margin:0 0 15px 0;padding:3px; background:#fff;border:1px solid #ccc}

/* Referenzen Button */
.ref_overview								{float:left; margin-top:20px}
.ref_continue								{float:right; margin-top:20px}

a.ref_button:link, a.ref_button:visited		{background:#6A0000;color:#fff;padding:6px 8px 6px 8px;font-size:0.70em;text-decoration:none}
a.ref_button:hover							{background:#B30101;color:#fff;text-decoration:none}

a.ref_button_more:link, a.ref_button_more:visited	{background:#6A0000;color:#fff;padding:6px 8px 6px 8px;font-size:0.70em;text-decoration:none;margin:0 0 0 10px}
a.ref_button_more:hover								{background:#B30101;color:#fff;text-decoration:none}

a.ref_button_top:link, a.ref_button_top:visited	{background:#6A0000;color:#fff;padding:6px 8px 6px 8px;font-size:0.70em;text-decoration:none;float:right}
a.ref_button_top:hover							{background:#B30101;color:#fff;text-decoration:none}

/* Referenzen */
.work 							{overflow:hidden; margin:0 0 15px 0; width:900px; padding:15px 15px 0 0}
.work .workContainer 			{/*height:360px;*/ width:525px; float:left; margin-right:15px; overflow:hidden; border:1px solid #ccc; padding:10px; position:relative; background:#EFEFEF}
.work .workContainer ul 		{padding:0; margin:0; position:relative; list-style:none; width:5400px;/*height:360px;*/}
.work .workContainer ul li		{position:relative;/*height:360px;*/ width:525px; margin-right:55px; float:left; display:inline}
.work .workContainer ul li img 	{position:relative; top:0; left:0; display:block}
.work .workText		 			{float:right; width:320px}
.work .workText h2	 			{margin-bottom:10px}
.work .workText ul 				{padding:0 0 30px 0;margin:20px 0 0 0; list-style:none;}
.work .workText ul li 			{padding:0;margin:0;float:left; text-align:center;padding-bottom:1px}

.work .workText ul li a:link,
.work .workText ul li a:visited {padding:3px 4px 2px 4px; color:#000; text-decoration:none;margin-right:8px; outline:none;font-size:0.80em;border:1px solid #999; background:#EFEFEF }
.work .workText ul li a:hover 	{background:#B30101; color:#fff;border:1px solid #999}

.work .workText a.selected:link,
.work .workText a.selected:visited,
.work .workText a.selected:active,
.work .workText a.selected:hover{color:#fff; background:#6A0000; outline:none; border:1px solid #6A0000}

/* Sliding Boxes */	
.boxgrid						{width:280px;height:150px;margin:0 1.66em 1.66em 0;float:left;background: url(../images/bg_teaser_referenzen.jpg) top right no-repeat #EFEFEF;overflow: hidden;position: relative;border:1px solid #CCC}
.boxgrid_right 					{margin-right:0}
.boxgrid img					{position: absolute;top: 0;left: 0;border: 0}
#content #content_inner .boxgrid p, #content #content_inner .boxgrid_right p	{padding: 0 10px;color:#000;font-size:0.80em;line-height:1.5em}
#content #content_inner .boxgrid h1, #content #content_inner .boxgrid_right h1 	{margin:10px; font-size:0.9em; letter-spacing:normal}

/* Links allgemein */
a:link, a:visited	{color:#900; text-decoration:none}
a:hover				{color:#C00; text-decoration:underline}