/* ====> COMMON SETTINGS <==== */
* { margin: 0; padding: 0; }

a 		{ text-decoration: none; color: #E37D1B; }
a:hover { text-decoration: underline; }
.hidden	{ display: none; }
h3		{ font: 10pt Arial, Helvetica, sans-serif; font-weight: bold; color: #333; }
textarea{ font: 10pt Arial, Helvetica, sans-serif; }

/* ====> PAGE PARTITIONING <==== */
body {
	text-align: center;
	margin-bottom: 30px; 
	background: #fff url(../img/body_bg.png) 0 0 repeat-x;
}
#wrapper {
	margin: auto;
	text-align: left;
	width: 800px;
}
#menu {
	display: block;
	height: 23px;
	width: 800px;
	list-style-type: none;
}
#header {
	height: 88px;
	background: transparent url(../img/typolight-cms.de.png) 0 0 no-repeat;
}
#box  {
	display: block;
	position: relative;
	width: 770px;
	padding-top: 30px;
	padding-right: 30px;
	font: 10pt Arial, Helvetica, sans-serif;
	background: #343434 url(../img/box_top.png) 0 0 no-repeat;
}
#content {
	padding: 40px 20px 0 20px;
	color: #a4a4a4;
	font: 12px Arial, Helvetica, sans-serif;
}
#contents {
	display: block;
	width: 760px;
	padding: 40px 20px;
	font: 12px Arial, Helvetica, sans-serif;
}
#footer {
	clear: both;
	padding-top: 20px;
	text-align: center;
	font: 8pt Arial, Helvetica, sans-serif;
	color: #666; 
}
#footer p { margin: 0 20px; line-height: 25px; border-top: 1px solid #ccc; }
#footer a { color: #666; }
/* ----> Menu <---- */
#menu li { display: inline; margin-right: -4px; }
#menu li a {
	color: #fff;
	font: 12px Arial;
	text-decoration: none;
	height: 23px;
	padding: 5px 25px 8px 0;
	line-height: 23px;
	background: #e37d1b url(../img/navigation/menuitem_right.png) top right no-repeat;
}
#menu li a span {
	height: 23px;
	padding: 5px 0 5px 25px;
	background: transparent url(../img/navigation/menuitem_left.png) top left no-repeat;
}
#menu li.active a 		{ background: #343434 url(../img/navigation/menuitem_active_right.png) top right no-repeat; color: #fff; }
#menu li.active a span  { background: transparent url(../img/navigation/menuitem_active_first.png) top left no-repeat; }
#menu li.after  a span  { background: transparent url(../img/navigation/menuitem_after_active.png) top left no-repeat; }
#menu li.first  a span  { background: transparent url(../img/navigation/menuitem_first.png) top left no-repeat; }
#menu li.last a			{ background: transparent url(../img/navigation/menuitem_last.png) bottom left no-repeat; width: 32px; height: 24px; padding: 5px 8px; }
#menu li.last.ac a	 	{ background: transparent url(../img/navigation/menuitem_last_active.png) -1px 1px no-repeat; }

/* ----> Gray Box <---- */

#box .right			{ position: absolute; left: 440px; top: 72px; }
#box .left			{ margin-left: 30px; }
#box .right .errors { margin-top: 30px; }
#box .right b		{ color: #919191; }
#box .right .info	{ font-size: 12pt; margin-bottom: 20px; }
#box .right .info span	{ color: #E37D1B; font-size: 20pt; }

#box img			{ border: none; }
#box.start 			{ height: 250px; }
#box.order			{ height: 250px; }
#box.typolight 		{ height: 250px; }
#box.impressum		{ height: 250px; }
#box.templates		{ height: 250px; }

#box .links					{ margin-top: 5px; }
#box .links a				{ padding-left: 15px; background: transparent url(../img/link_dark.png) 0 4px no-repeat; color: #919191; }
#box .links a:hover			{ color: #E37D1B; text-decoration: none;  }
#box ul						{ list-style-type: none; }
#box p 						{ width: 300px; font: 10pt Arial; color: #919191; }
#box .bottom 				{ bottom: -10px; position: absolute; display: block; height: 10px; width: 800px; background: transparent url(../img/box_bottom.png) 0 0 no-repeat; }
#box .vline					{ position: absolute; display: block; width: 2px; height: 220px; left: 380px; top: 35px; }
#box .tl_logo				{ position: absolute; z-index: 1000; top: 44px; right: 44px; }

#box form					{ width: 340px; text-align: right; font: 12px Arial, Helvetica, sans-serif; }
#box form br				{ clear: both; }
#box form p					{ text-align: left; width: 650px; margin: 0; }
#box form b					{ text-align: left;  color: #b1b1b1; }
#box form label				{ float: left; width: 100px; color: #d1d1d1; text-align: left; font: 12px Arial, Helvetica, sans-serif; padding-bottom: 2px; }
#box form textarea			{ padding: 2px; width: 500px; height: 100px; border: 1px solid #777777; background: #4a4a4a; color: #e8e8e8; margin-bottom: 10px; }
#box form input				{ padding: 2px; width: 220px; border: 1px solid #777777; margin-bottom: 3px; background: #4a4a4a; color: #e8e8e8; }
#box form .radio			{ width: auto; border: none; margin: 3px 0 10px 15px; }
#box form.form2				{ text-align: left; }
#box form .loader			{ display: none; color: #66A7BF; margin-top: 15px; }
#box form .loader img		{ vertical-align: top; }
#box form .submit,
#box form .submit1,
#box form .skip				{ width: auto; padding: 0px 2px; background: #555; border: 1px solid #666; font-size: 10pt; margin-top: 3px; }

#box .fupload_container 			{ position: relative; width: 260px; }
#box .fupload_container .file 		{ position: absolute; z-index: 2; opacity: 0; width: 260px; }
#box .fupload_container .filename 	{ position: absolute; top: 0; left: 0; width: 155px; padding: 2px; }
#box .fupload_container .browse 	{ width: auto; padding: 1px 2px; position: absolute; top: 0; right: 5px; }

/* ----> Headings <---- */

#box h1							{ display: block; text-indent: -3000px; margin-bottom: 20px; width: 300px; height: 24px; background-repeat: no-repeat; padding-top: 10px; background-position: 0 10px; }
#box.start h1					{ background-image: url(../img/headings/h1_startseite.png); }
#box.impressum h1				{ background-image: url(../img/headings/h1_impressum.png); }
#box.typolight h1				{ background-image: url(../img/headings/h1_informationen-ueber-contao.png); width: 450px; }
#box.templates .v1				{ background-image: url(../img/headings/h1_templates.png); }
#box.templates .v2				{ background-image: url(../img/headings/h1_template-bestellen.png); }
#box.templates .v3				{ background-image: url(../img/headings/h1_bestellung-abgeschlossen.png); }
#box.order h1.contact_info		{ background-image: url(../img/headings/h1_kontaktinformationen.png); }
#box.order h1.upload			{ background-image: url(../img/headings/h1_design-hochladen.png); }
#box.order h1.danke				{ background-image: url(../img/headings/h1_vielen-dank.png); width: 500px; }
#box.order h1.nachricht			{ background-image: url(../img/headings/h1_nachricht.png); }
#box.typolight p				{ width: 400px; }
#box.order p					{ width: 600px; }

#contents .box h2				{ display: block; text-indent: -3000px; width: 210px; height: 24px; background-repeat: no-repeat; margin-bottom: 5px; }
#contents h2.typolight			{ background-image: url(../img/headings/h2_contao.png); }
#contents h2.w3c				{ background-image: url(../img/headings/h2_w3c-konform.png); }
#contents h2.umsetzungen		{ background-image: url(../img/headings/h2_umsetzungen.png); }
#contents h2.module				{ background-image: url(../img/headings/h2_module.png); }

/* ----> Templates <----- */
#contents.templates 			{ padding: 40px 0 0 0; width: 800px; }
#contents.templates .item		{ float: left; width: 232px; margin: 0 15px; }
#contents.templates	img			{ border: 1px solid #ddd; margin-bottom: 1px; }
#contents.templates .info		{ position: relative; background: #eee; height: 25px; }
#contents.templates .links		{ position: absolute; top: 4px; right: 10px; text-align: right; color: #ccc; }
#contents.templates .price		{ position: absolute; top: 4px; left: 10px; margin: 0; }
#contents.templates i			{ margin-left: 5px; font-size: 7pt; color: #333; }
#box.templates p				{ width: 500px; }
#box.templates ul				{ margin-top: 5px; }
#box.templates li				{ padding-left: 20px; line-height: 20px; color: #999; background: transparent url(../img/arrow2.png) 0 5px no-repeat; }

/* ----> Contents <---- */

#contents h2 {
	font: 12pt Arial, Helvetica, sans-serif;
	color: #343434;
	margin-bottom: 5px;
	text-indent: 0;
	font-weight: bold;
	margin-bottom: 10px;
}
#contents .sub {
	font: 9pt Arial;
	color: #a4a4a4;
	padding-bottom: 5px;
	font-weight: bold;
	border-bottom: 1px solid #d1d1d1;
}
#contents .text {
	padding: 10px 0;
	font: 10pt Arial;
	color: #666;
	margin-top: 5px;
}
#contents .img {
	float: left;
	height: 65px;
	width: 65px;
	margin: 10px 5px 10px 5px;
	background: #eaeaea;
}
#contents .typolight {
	color: #555;
	font: 11pt Arial;
}
#contents .typo_first {
	margin-top: 10px;
	color: #555;
	font: 11pt Arial;
}
#contents.typo {
	font: 10pt Arial;
	color: #555;
}
#contents ul 		{ list-style-type: none; }
#contents ul li		{ font: 12px Arial, Helvetica, sans-serif; padding-left: 20px; background: transparent url(../img/arrow.png) 0 3px no-repeat; line-height: 18px; }

#contents .box		{ float: left; margin-right: 35px; display: block; width: 230px; }
#contents .box.last	{ margin-right: 0; }

#contents .projects					{ margin-top: 20px; }
#contents .projects img				{ float: left; display: block; margin: 0 10px 0 0; border: 1px solid #d2d2d2; padding: 4px; }
#contents .projects span:hover		{ background-position: 0 0; outline: 1px solid #999; }
#contents .projects .project.last	{ border: none; }
#contents .projects .project.first	{ margin-top: -5px; }
#contents .projects .project		{ display: block; padding: 0 0 6px 0; margin-bottom: 5px; height: 60px; border-bottom: 1px dotted #ccc; }
#contents .projects .project p		{ font-size: 8pt; color: #666; }

.email 						{ vertical-align: text-bottom; }

.success		{ display: block; height: 20px; font: 12px Arial; padding: 5px 5px 0px 5px; margin-bottom: 5px; color: #1e5d0d; background: #c8e7c0; border: 1px solid #86bb78; }
.error			{ display: block; height: 20px; font: 12px Arial; padding: 5px 5px 0px 25px; margin-bottom: 5px; color: #E37D1B; background: transparent url(../img/error.png) 0 4px no-repeat; }