@charset "utf-8";

/* Basic style */
* 		{ margin: 0px; padding: 0px; }
html 	{ height: auto; width: 100%; }
body 	{
	background: url('../graphics/bg-body.png') top left repeat-x;
	color: #ffffff;
	font: normal 0.7em "Arial", sans-serif;
	width: 100%;
	background-color: #000000;
}
a 		{ border: 0px; }
img 	{ border: 0px; }
hr 	{ display: none; }
/* Common classes */
.clearfix:after { content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; }
.hidden 			 { display: none; }
/* Decorations */
#linesTopLeft 		{
	height: 305px;
	left: -305px;
	position: absolute;
	top: 0px;
	width: 305px;
}
#linesBottomLeft 	{
	height: 436px;
	left: -436px;
	position: absolute;
	top: -300px;
	width: 439px;
}
#linesBottomRight	{
	height: 500px;
	right: 0px;
	position: absolute;
	top: 200px;
	width: 437px;
}
#linesBottom		{
	bottom: 0px;
	height: 47px;
	right: 0px;
	position: absolute;
	width: 47px;
}

/* Main content */
#main 	{ margin: 0px auto; min-height: 100%; position: relative; width: 1024px; }

#content {
	background: url("../graphics/content.gif") top left repeat;
	min-height: 100%;
	background-color: #000000;
}
#footer 	{
	background: #000000 url("../graphics/footer.png") top left repeat-x;
	height: 400px;
	position:relative;
}

/* Content */
#content 			{ padding: 55px 55px 10px 55px; }

#content #logo				{ height: 36px; text-indent: -9999px; margin: 0px 0px 30px 0px;  overflow: hidden; position: relative; width: 118px; }
#content #logo strong 	{ background: url('../graphics/content-logo.png') top left no-repeat; display: block; height: 36px; position: absolute; left: 0; top: 0; width: 118px; z-index: 1; }

#content #h1wrap				{ position: absolute; top: 198px; }
#content #h1wrap h1 			{ height: 129px; text-indent: -9999px; overflow: hidden; width: 461px; }
#content #h1wrap h1 span 	{ background: url('../graphics/content-head.png') top left no-repeat; display: block; height: 129px; position: absolute; left: 0; top: 0; width: 461px; z-index: 1; }
#content #h1wrap #more 		{ background: url('../graphics/content-head-more.png') top left no-repeat; bottom: -30px; height: 69px; position: absolute; right: -30px; width: 69px; z-index: 2;}

#content #mainMenu 					{ background: url('../graphics/content-nav-center.gif') repeat-x; float: left; height: 27px; margin: 0px 0px 0px 0px; width: auto; }
#content #mainMenu .wrapper 		{ background: url('../graphics/content-nav-right.gif') top right no-repeat; height: 27px; width: auto; }
#content #mainMenu ul 				{ background: url('../graphics/content-nav-left.gif') top left no-repeat; height: 27px; list-style: none; }
#content #mainMenu ul li 			{ float: left; }
#content #mainMenu ul li a			{ color: #ffffff; font-size: 1.2em; font-weight: bold; line-height: 26px; padding: 0px 11px; text-decoration: none; }
#content #mainMenu ul li a:hover	{ text-decoration: underline; }


#content #why 				{ margin: 50px 0px 40px 538px;}
#content #why h2 			{ height: 42px; overflow: hidden; margin: 0px 0px 10px 0px; position: relative; text-indent: -9999px;  width: 99px; }
#content #why h2 span	{ background: url('../graphics/content-why.png') top left no-repeat; display: block; height: 42px; position: absolute; left: 0; top: 0; width: 99px; z-index: 1; }
#content #why ul 			{ list-style: none; margin: 0px 0px 0px 5px; }
#content #why ul li 		{ background: url('../graphics/content-bullet.gif') center left no-repeat; font-size: 1.2em; margin: 0px 0px 3px 0px; padding: 0px 0px 0px 12px; }

#content #preface 	{ width: 460px; }
#content #preface h2 {
	color: #FFFFFF;
	font-size: 18px;
	margin: 0px 0px 20px 0px;
}
#content #preface p 	{ margin: 0px 0px 25px 0px; }

#content .panel 			{}
#content .panel .rule   { background: url('../graphics/content-hr.gif') top left repeat; border: 0px; height: 1px; margin: 0px 0px 10px 0px; }
#content .panel h3 		{ height: 31px; font-size: 0px;  margin: 0px 0px 0px 0px; position: relative; text-indent: -9999px; width: 251px; }
#content .panel h3 span	{ display: block; height: 31px; position: absolute; left: 0; top: 0; width: 251px; z-index: 1; }
#content .panel h3#latestWebdesigns span { background: url('../graphics/content-latest-webdesigns.png') top left no-repeat; }
#content .panel h3#latestLogotypes span { background: url('../graphics/content-latest-logotypes.png') top left no-repeat;}

#content .panel h4 		{
	color: #FFFFFF;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0px 0px 20px 0px;
}
#content .panel p 		{ font-size: 1em; margin: 0px 0px 15px 0px; }
#content .panel .item 	{ margin: 0px 0px 25px 0px; }
#content .panel .image 	{ background: url('../graphics/content-image-bg.png') top left repeat; float: left; height: auto; padding: 5px 5px 5px 5px; width: 530px; }
#content .panel .desc	{ float: right; width: 360px; }

#content .panel .buttonSmall 				{ background: #4f7500 url('../graphics/content-button-small-center.gif') top left repeat-x; float: left; height: 25px; line-height: 23px; margin: 0px 0px 5px 5px; }
#content .panel .buttonSmall a 			{ background: url('../graphics/content-button-small-left.gif') top left no-repeat; color: #fff; display: block; font-weight: bold; height: 25px; text-decoration: none; }
#content .panel .buttonSmall a:hover 	{ color: #fff; display: block; font-weight: bold; text-decoration: underline; }
#content .panel .buttonSmall a strong	{ background: url('../graphics/content-button-small-right.gif') top right no-repeat; display: block; height: 25px; padding: 0px 14px; }
#content .panel .buttonSmall a span 	{ background: url('../graphics/content-button-small-arrow.gif') 0px 9px no-repeat; cursor: pointer; display: block; padding: 0px 0px 0px 10px; }

#content .panel .buttonLarge 				{
	background: #FFFFFF url('../graphics/content-button-large-center.gif') top left repeat-x;
	cursor: pointer;
	float: right;
	height: 28px;
	line-height: 28px;
	margin: 0px 0px 5px 0px;
}
#content .panel .buttonLarge a 			{
	background: url('../graphics/content-button-large-left.gif') top left no-repeat;
	color: #FFFFFF;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	height: 28px;
	text-decoration: none;
}
#content .panel .buttonLarge a:hover 	{
	color: #FFFFFF;
	display: block;
	font-weight: bold;
	text-decoration: underline;
}
#content .panel .buttonLarge a strong	{ background: url('../graphics/content-button-large-right.gif') top right no-repeat; display: block; height: 28px; padding: 0px 14px; }
#content .panel .buttonLarge a span 	{ background: url('../graphics/content-button-large-arrow.gif') 0px 9px no-repeat; cursor: pointer; display: block; padding: 0px 0px 0px 15px; }

#content .top 			{ cursor: pointer; height: 21px; margin: 20px 0px 0px 0px; text-indent: -9999px; width: 44px; }
#content .top a		{ cursor: pointer; display: block; font-size: 0px; height: 21px; overflow: hidden; position: relative; width: 44px; }
#content .top a span	{ background: url('../graphics/content-top.png') top left no-repeat; display: block; height: 21px; position: absolute; left: 0; top: 0; width: 44px; z-index: 1; }

/* Footer */
#footer 										{ padding: 0px 55px 0px 55px; }
#footer input,
#footer textarea							{ color: #ffffff; font: normal 100% "Arial", sans-serif; padding: 4px 6px 6px 6px; }
#footer h2 									{ overflow: hidden; font-size: 0px; margin: 10px 0px; position: relative; }
#footer h2 span							{ display: block; position: absolute; left: 0; top: 0; z-index: 1;}
#footer #contactForm 					{ float: left; width: 541px; }
#footer #contactForm h2 				{ height: 31px; width: 261px; }
#footer #contactForm h2 span 			{ background: url('../graphics/footer-contact.png') top left no-repeat; height: 31px; width: 261px; }                         
#footer #contactForm input 			{ border: 0px; background: #699800 url('../graphics/footer-input.gif') top left no-repeat; height: 16px; margin: 0px 0px 4px 0px; width: 529px; }
#footer #contactForm input:outline	{ border: 0px; }
#footer #contactForm input#submit	{
	background: url('../graphics/footer-submit.gif') top left no-repeat;
	color: #ffffff;
	cursor: pointer;
	float: right;
	font-weight: bold;
	height: 28px;
	padding: 0px 0px 3px 0px;
	vertical-align: top;
	text-align: center;
	width: 59px;
}  
#footer #contactForm p 					{
	color: #CCCCCC;
	margin: 0px 0px 22px 0px;
}
#footer #contactForm form p			{ margin: 0px; }
#footer #contactForm textarea			{ height: 115px; background: #699800 url('../graphics/footer-textarea.gif') top left no-repeat; border: 0px; margin: 0px 0px 13px 0px; width: 529px; }
       
#footer #quickNavigation 				{ float: right; width: 365px; }
#footer #quickNavigation h2 			{ height: 31px; margin-left: 6px; width: 233px; }
#footer #quickNavigation h2 span 	{ background: url('../graphics/footer-navigation.png') top left no-repeat; height: 31px; width: 233px; }                         
#footer #quickNavigation p 			{ margin:0px 0px 0px 6px; }

#footer #quickNavigation ul							{ list-style: none; height: 130px; }         
#footer #quickNavigation ul li						{ position: relative; float: left; }
#footer #quickNavigation ul li a.main				{ color: #ffffff; font-size: 1.1em; font-weight: bold; display: block; height: 25px; line-height: 23px; padding: 0px 8px 0px 6px; text-align: center; text-decoration: none; }

#footer #quickNavigation ul li a.main:hover					{
	background: #ffffff url('../graphics/footer-nav-center.gif') repeat-x;
	display: block;
	padding: 0px;
}
#footer #quickNavigation ul li a.main:hover strong 		{ background: url('../graphics/footer-nav-right.gif') top right no-repeat; display: block; }
#footer #quickNavigation ul li a.main:hover strong span 	{ background: url('../graphics/footer-nav-left.gif') top left no-repeat; display: block; padding: 0px 8px 0px 6px; }

#footer #quickNavigation ul li ul					{ position: absolute; margin: 10px 0px 0px 6px; }
#footer #quickNavigation ul li ul li				{float: none; }
#footer #quickNavigation ul li ul li a				{
	color: #FFFFFF;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	background-color: #000000;
}
#footer #quickNavigation ul li ul li a:hover		{
	text-decoration: underline;
	background-color: #FF0000;
}

#footer .top 			{ bottom: 10px; cursor: pointer; height: 21px; position: absolute; text-indent: -9999px; width: 44px; }
#footer .top a			{ cursor: pointer; display: block; font-size: 0px; height: 21px; overflow: hidden; position: relative; width: 44px; }
#footer .top a span	{ cursor: pointer; background: url('../graphics/content-top.png') top left no-repeat; display: block; height: 21px; position: absolute; left: 0; top: 0; width: 44px; z-index: 1; }