body
{
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #BBB;
	background-image: url(../images/texture.jpg);
	background-position: top left;
	background-repeat: repeat;
	background-color: #000;
}

/* only used in IE6 stylesheet - here just dummy style */
.wrapper 
{	
	margin: 0;
	padding: 0;	
}

#top_bar
{
	position: fixed;
	top: 0;
	width: 100%;
	height: 6px;
	margin: 0 auto;
	padding: 0;
	z-index: 50;
	background-image: url(../images/green_bar.png);
	background-repeat: no-repeat;
	background-position: top;
}

/* styles for homepage */

#container
{
	clear: both;
	width: 846px;
	min-height: 470px;
	margin: 6px auto;
	padding: 0;	
	background-image: url(../images/map.png);
	background-position: top;
	background-repeat: no-repeat;
	border: 1px solid transparent;
}

#flags_container
{
	position: fixed;
	top: 6px;
	left: 0;
	z-index: 20;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

#flags_holder
{
	width: 846px;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
}

#flags
{
	float: right;	
	width: 54px;
	height: 22px;
	margin: 0 0 0 792px;
	padding: 0;
	background-image: url(../images/flags/tab.png);
	background-position: top;
	background-repeat: no-repeat;
}

#flagdiv_de
{	
	float: left;
	width: 18px;
	height: 13px;
	margin: 5px 0 0 7px;
	padding: 0;
}

#flagdiv_en
{	
	float: left;
	width: 18px;
	height: 13px;
	margin: 5px 0 0 4px;
	padding: 0;
}

#menu
{
	clear: both;
	
	/*width: 650px;*/	
	width: 660px;
	/*margin: 175px 0 0 115px;*/
	margin: 175px auto;
	padding: 0;
	color: #849900;
	text-transform: uppercase;
	letter-spacing: 3px;
	background-color: transparent;	
}

#menu a:hover
{
	color: #FFF;
}

.mainmenu /* to make menu sensitive for cursor */
{
	height: 50px;
}

#submenu
{
	clear: both;
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
	padding: 0;
	color: #a4a49e;
	text-transform: uppercase;
	letter-spacing: 3px;
	
}

.submenu
{	
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.submenu li
{
	margin: 0 0 10px 0;
	padding: 0;
}

#submenu a
{	
	color: #a4a49e;
	text-decoration: none;
	
}

#submenu a:hover
{	
	color: #FFF;
	text-decoration: none;
	
}

#submenu_arrow_services
{
	clear: both;
	float: left;
	width: 12px;
	margin: 0 0 20px 40px;
	padding: 0;	
}

#submenu_arrow_showcase
{
	clear: both;
	float: left;
	width: 12px;
	margin: 0 0 20px 45px;
	padding: 0;	
}

#submenu_arrow_technology
{
	clear: both;
	float: left;
	width: 12px;
	margin: 0 0 20px 50px;
	padding: 0;	
}

/* styles for homepage end */

/* styles for mainpage */
#container_mainpage
{
	clear: both;
	width: 846px;
	margin: 6px auto;
	padding: 0;	
}

#mainmenu
{
	float: left;
	width: 296px;
	/*height: 450px;*/
	margin: 28px 0 0 0;
	padding: 0;
}

#content
{
	float: left;
	/*width: 450px;*/
	width: 500px;
	/*height: 470px;*/
	margin: 30px 0 0 30px; /* was 50 */
	padding: 0;
	font-size: 12px;	
	line-height: 16px;
}
/* styles for mainpage end */

/* styles for showcase page */
.thumbnailrow
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
}

.thumbnaildiv
{
	float: left;
	width: 133px;
	height: 133px;
	margin: 0 15px 10px 0;
	padding: 0;
	background-image: url(../images/thumb_fade.png);
	background-position: top left;
	background-repeat: no-repeat;
}

.thumbnailpreview
{
	float: left;
	width: 117px;
	margin: 8px;
	padding: 0;
	font-weight: normal;	
}

/* opacity styles are included here */

/* styles for showcase subpage */
#gridview
{
	float: right; 
	width: 120px;
	margin: 7px 30px 0 0; 
	padding: 0;
	font-size: 12px;
	text-align: right;
}

#gridview a
{
	color: #BBB;
	text-decoration: underline;
}

#gridview a:hover
{
	color: #FFF;
	text-decoration: underline;
}

#client_description
{
	clear: both;
	float: left;
	width: 470px;
	margin: 20px 0 0 0;
	padding: 0;
	line-height: 18px;
}

#client_icon
{
	clear: both;
	float: left;
	width: 45px;
	height: 30px;
	margin: 5px 0 0 0;
	padding: 0;
}

#showcasebox
{
	clear: both;
	float: left;
	width: 470px;
	height: 322px;
	margin: 20px 0 0 0;
	padding: 0;
	background-color: #282828;
}

#previewbox
{
	clear: both;
	width: 462px;
	height: 312px;
	margin: 4px auto;
	padding: 0;	
}

#tools_box
{
	clear: both;
	float: left;
	width: 50%;
	margin: 20px 0 0 0;
	padding: 0;
}

#tools_box_icon
{
	clear: both;
	float: left;
	width: 45px;
	margin: 0;
	padding: 0;
}

#tools_box_list
{
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
}

.tools_box_list
{
	margin: 7px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.tools_box_list li
{
	margin: 0 0 8px 0;
	padding: 0;
}

#showcase_weblink
{
	clear: both;
	float: left;
	width: 50%;
	margin: 20px 0 50px 0;
	padding: 0;
}

#showcase_weblink_icon
{
	clear: both;
	float: left;
	width: 45px;
	margin: 0;
	padding: 0;
}

#showcase_weblink_link
{
	float: left;
	width: 200px;
	margin: 4px 0 0 0;
	padding: 0;
}

#showcase_weblink_link a
{
	color: #BBB;
	text-decoration: underline;
}

#showcase_weblink_link a:hover
{
	color: #FFF;
	text-decoration: underline;
}
/* styles for showcase subpage end */
/* styles for showcase page end */

/* styles for demonstration submenu */
#demomenu
{
	clear: both;
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
	color: #FFF;
}

#demomenu a
{
	color: #FFF;
	text-decoration: none;
}

#demomenu a:hover
{
	color: #FFF;
	text-decoration: underline;
}

.demomenu
{
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	list-style-type: none;
}

.demomenu li
{
	float: left;
	width: 85px;
	margin: 0 10px 0 0;
	padding: 0;
}
/* styles for demonstration submenu end */

/* styles for contact and login page */
#contactbox
{
	clear: both;
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
	padding: 0;	
}

#loginform 
{
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 16px;
}

#forgot
{
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 16px;
}

#contactform 
{
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;	
	font-size: 16px;	
}

form br /* clears floating of the labels and inputs eg. brakes them into a new line */
{ 
  	clear: left; 
}
	
label 
{
 	display: block;
	float: left;
	width: 105px; 
	margin: 16px 0 0 0; 	 
	padding: 0; 
	text-align: left;
	color: #FFF;
}

label.error
{	
 	display: block;
	float: left;
	width: auto; 
	margin: 14px 0 0 10px; 	 
	padding: 0; 
	text-align: left;
	color: #fe7801;
	font-size: 12px;
}

input 
{
 	display: block;
	float: left; 
	width: 200px;
	height: 22px;
	margin: 10px 0 0 15px; 	 
	padding: 2px 0 0 0; 
	text-align: left;
	font-size: 16px;
	border: 1px solid #849900;
}

.contact_input 
{
 	display: block;
	float: left; 
	width: 185px;
	height: 22px;
	margin: 10px 0 0 0; 	 
	padding: 2px 0 0 0; 
	text-align: left;
	font-size: 16px;
	border: 1px solid #849900;
}

input:focus 
{ 
	display: block;	
	/*width: 200px;
	padding: 1px;*/
	background-color: #e9e9e9;
	/*border: none;*/
}

input.error 
{ 
	display: block;
	/*width: 200px;
	padding: 1px;
	border: none;*/
	background-color: #f9e1ca;
}

textarea 
{
 	display: block;
	float: left; 
	width: 187px;
	max-width: 187px;
	height: 187px;
	margin: 10px 0 0 0; 	 
	padding: 0; 
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	border: 1px solid #849900;
}

input#submit /* submit button for login form */
{ 
	float: left;
	width: auto;	
	margin: 10px 0 0 120px; 
	padding: 0 2px 3px 2px;
	color: #FFF;
	font-size: 13px;
	cursor: pointer;
	background-color: #839900;
	border: 1px solid #FFF;
}

input#submit2 /* submit button for login form */
{ 
	float: left;
	width: auto;	
	margin: 10px 0 0 120px; 
	padding: 0 2px 3px 2px;
	color: #FFF;
	font-size: 13px;
	cursor: pointer;
	background-color: #839900;
	border: 1px solid #FFF;
}

.forgot_pwd
{	
	float: left;
	width: auto;
	margin: 12px 0 0 25px;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}

#forgotPwd
{
	clear: both;
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
	padding: 0;
	display: none;
}

.forgotPwd_text
{
	clear: both;
	float: left;
	width: 100%;
}

.hideInput
{
	display: none;
}
/* styles for contact page end */

/* styles for sitemap */
.sitemapbox
{
	/*clear: both;*/
	float: left;
	width: 245px;
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 13px;
}

.sitemap
{
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

.sitemap a
{
	color: #BBB;
	text-decoration: none;
}

.sitemap a:hover
{
	color: #BBB;
	text-decoration: none;
}

.listarrow
{
	float: left;
	width: 15px;
	margin: 1px 5px 0 0;
	padding: 0;
}

.sitemap li /* main links */
{
	margin: 5px 0 0 0;
	padding: 0;	
	list-style-type: none;	
}

.level2 /* submenu */
{
	margin: 0;
	padding: 0;	
} 

.level2 li
{
	margin: 5px 0 0 15px;
	padding: 0;
	list-style-type: none;
}

.level2 li ul
{
	margin: 5px 0 0 15px;
	padding: 0;
	list-style-type: none;

}

.level2 li ul a
{
	color: #FFF;
	text-decoration: none;
}

.level2 li ul a:hover
{
	color: #FFF;
	text-decoration: none;
}

.level3
{
	margin: 0;
	padding: 0;
} 

.level3 li
{
	margin: 5px 0 0 5px;
	padding: 0;
	list-style-type: none;
} 

.level4
{
	margin: 0;
	padding: 0;
} 

.level4 li
{
	margin: 5px 0 0 5px;
	padding: 0;
	list-style-type: none;
} 
/* styles for sitemap end */

/* adds space to the bottom, so that the text will always stop on top of the fade */
#bottom_spacer
{
	width: 100%;
	height: 140px; 
	margin: 0;
	padding: 0;
}

/* styles for bottom */
#bottom_fade
{
	position: fixed;
	bottom: 114px;
	z-index: 20;
	clear: both;
	width: 100%;
	height: 35px;
	background-image: url(../images/bottom_fade.png);
	background-repeat: repeat-x;
	background-position: top left;
}

#bottom
{
	position: fixed;
	bottom: 0;
	width: 100%;
	/*height: 100px;*/
	margin: 0;
	padding: 0;
}

#bottom_top
{
	position: relative;
	z-index: 40;
	clear: both;
	width: 100%;
	height: 24px;
	/*height: 59px;*/
	/*background-image: url(../images/bottom_green_bar.png);
	background-repeat: repeat-x;
	background-position: top left;*/
	background-color: #849900;
}

#bottom_bottom
{
	position: relative;
	z-index: 40;
	clear: both;
	/*float: left;*/
	width: 100%;
	height: 90px;
	margin: 0;
	padding: 0;
	background-color: #161616;
}

#bottom_content
{
	position: relative;
	width: 846px;		
	margin: 0 auto;
	padding: 0;
	z-index: 40;
}

#bottom_logo
{	
	position: relative;
	float: left;
	width: 230px;
	height: 142px;
	margin: -94px 0 0 0;
	padding: 0;
	z-index: 50;
}

#bottom_menu
{
	position: relative;
	clear: both;
	float: left;
	width: 350px;
	margin: -34px 0 0 135px;
	padding: 0;
	font-size: 11px;
	color: #a9c502;
	text-transform: uppercase;
	z-index: 60;
}

#bottom_menu a
{
	color: #a9c502;
	text-decoration: none;
}

#bottom_menu a:hover
{
	color: #FFF;
	text-decoration: none;
}

.bottom_menu
{
	list-style-type: none;
}

/* bottom li styles included here */

#copyrightbox
{
	clear: both;
	float: left;
	width: 250px;
	margin: -14px 0 0 135px;
	padding: 0;
	font-size: 11px;
	color: #5d5d5d;	
	line-height: 14px;
}

#copyrightbox a
{
	color: #888787;
	text-decoration: none;
}

#copyrightbox a:hover
{
	color: #FFF;
	text-decoration: none;
}
/* styles for bottom  end*/

/* styles for text */
#headline
{
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

#headline_icon
{
	float: left;
	width: 45px;
	margin: 0;
	padding: 0;
}

#headline_text
{
	float: left;
	width: 300px;
	margin: 0;
	padding: 5px 0 0 0;
	font-size: 16px;
	text-transform: uppercase; 	
}

/*#leading_text
{
	clear: both;
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 18px;
	color: #FFF;
	line-height: 22px;
}*/

.textbox
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}

.textbox_left
{
	float: left;
	width: 50%;	
	margin: 20px 0 0 0;
	padding: 0;
}

.textbox_right
{
	float: left;
	width: 50%;	
	margin: 20px 0 0 0;
	padding: 0;
}

.textheadline
{
	float: left;
	width: 100%;
	margin: 40px 0 0 0;
	padding: 0;
	font-size: 14px;
}

.more_info_button
{
	clear: both;
	width: 100%;
	float: left;
	margin: 10px 0 0 0;
	padding: 0;	
}

.more_info_button_textlist
{
	clear: both;
	width: 100%;
	float: left;
	margin: 0 0 10px 0;
	padding: 0;	
}

.more_info_left
{
	float: left;
	width: 20px;
	margin: 2px 0 0 0;
	padding: 0;
	cursor: pointer;
}

.more_info_right
{
	float: left;
	width: 200px;	
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.more_info_right_services
{
	float: left;
	width: 200px;	
	margin: 0;
	padding: 0;
	cursor: pointer;
}

/* box to hold the additional text --> important: display none to hide box when page loads */
/* add as many of these divs you need --> one div for each additional text */
/* do not add styles to this box, use the #more_info_box */
#moreinfo1
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none
}

#moreinfo2
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

#moreinfo3
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

#moreinfo4
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

#moreinfo5
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

#moreinfo6
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

#moreinfo7
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
}

/* div goes into the moreinfo box */
.more_info_box
{
	clear: both;
	float: left;
	width: 90%;
	margin: 15px 0 0 15px;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}

.more_info_box_service
{
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 0 0 20px;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}

/* style used for service section with subpages; no longer in use */
/*.more_info_box_service
{
	clear: both;
	float: left;
	width: 95%;
	margin: -10px 0 0 20px;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}*/

/* class for the list */
.more_info_text
{
	clear: both;
	float: left;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0;
	list-style-type: none;	
}

.more_info_text li
{	
	margin: 0 0 10px 0;
	padding: 0 0 0 30px;
	vertical-align: 0;
	list-style-type: none;	
	background-image:url(../images/arrow-text.png);
	background-repeat:no-repeat;
	background-position: 0 3px;
}

#textlist
{
	clear: both;
	float: left;
	width: 90%;
	margin: 15px 0 0 0;
	padding: 0;
	line-height: 18px;
	font-size: 13px;
}

/* class for the list */
.textlist
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0 0 0 25px;
	padding: 0;
	list-style-type: none;	
}

.textlist li
{	
	margin: 0 0 10px 0;
	padding: 0 0 0 30px;
	vertical-align: 0;
	list-style-type: none;	
	background-image:url(../images/arrow-text.png);
	background-repeat:no-repeat;
	background-position: 0 3px;
}
/* styles for text end */

h1
{
	clear: both;
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 18px;
	color: #FFF;
	line-height: 22px;
}

h2
{
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}

/* used if the text doesn't go underneath a list */
.clearlist
{
	clear: both;		
}

.bold
{
	font-weight: bold;
}

.blue_text
{
	color: #17a1b6;
	text-decoration: none;
}

.white_text 
{
	color: #FFF;
	text-decoration: none;
}

.orange_text 
{
	color: #fe7801;
	text-decoration: none;
}

.orange_text a
{
	color: #fe7801;
	text-decoration: none;
}

.orange_text a:hover
{
	color: #fe7801;
	text-decoration: underline;
}

.italic_text
{
	font-style: italic;
}

.underline
{
	text-decoration: underline;
}

.cursor
{
	cursor: crosshair;
}

a:focus
{
	outline: 0;
}

.clear
{
	clear: both;
	width: 100%;
	line-height: 0;
	font-size: 0px;
}

/* class to put a link on top of the page BUT underneath the bottom fade so that it is clickable all the time */
.link
{
	position: relative;
	z-index: 30;
}

/* styles for jquery examples */
.box 
{
	position: absolute;
	top: 200px;
	right: 50px;
	height: 100px;
	width: 100px;
	background: #849900;
	border: 1px solid #AAD;
	text-align: center;
	font-size: 11px;
	color: #FFF;
	cursor: move;
}

#spacer
{
	clear: both;
	float: left;
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 0;
}

#hide
{
	clear: both;
	float: left;
	width: 500px;
	height: 200px;
	/*display: none;*/
	margin: 10px 0 0 0;
	padding: 0;
	color: #FFF;
	background-color: #999933;
}
/* styles for jquery examples end */

.showcase_title_next
{
	clear: both;
	position: relative;
	top: 140px;
	right: 0;
	float: right;
    width: 30px;
    height: 36px;
    cursor: pointer;
	border: 1px solid green;
	
}

.archivelink
{
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	background: red;
}