/*-----------------------------------------------------------------------------------
 * CSS-Stylesheet by Q-X GmbH
 * visit www.Q-X.ch for professional webdesign and webhosting
 ------------------------------------------------------------------------------------
 * Basis-Stylesheet
 ------------------------------------------------------------------------------------


 ------------------------------------------------------------------------------------
 * generelle Definitionen
 ----------------------------------------------------------------------------------*/
	/* randabstaende auf null */
	* { margin:0; padding: 0; }
	
	/* selectboxen wieder vergroessern */
	/*option { padding-left: 0.4em; }*/
	
	body { 
		min-height:101%;
		/* positionierte elemente werden nicht verschoben werden bei veraenderung des Fensters */
		position:relative; 


		/* farbe und textausrichtung */     
		color:#999;
		background:url('pics/bgmain.png') top repeat-x #FFF; 
		text-align:left;
		
		padding:20px;
		font-size:81.25%; 
		font-family:Arial, Verdana, sans-serif; }
	
	/* umlaufender rand um die gesamte webseite */
	#page {}
	#page_margins {

		width:1028px;
		margin:auto; }
		
	/* standardrahmen zuruecksetzen */
	img { border:0; }

	
/*-- clearfix --*/
	/* clearen der float-umgebungen */
	 .clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden; }
	
	/* Safari-Browser zwingend!! */
	.clearfix { display: block; } 
	
	/* Overflow-Methode zum Clearen der Float-Umgebungen */
	.floatbox { overflow:hidden; }
	
	/* IE-Clearing: Benoetigt nur der Internet Explorer und über iehacks.css zugeschaltet */
	#ie_clearing { display: none }
	
	/* Clearen der 3 Inhaltsspalten mittels dieses speziellen hr-Tags */
	hr.clear_columns {	
		clear: both; 
		float: left; 
		content: "."; 
		display: block;  
		height: 0; 
		line-height: 0px; 
		visibility: hidden; 
		border: 0; 
		padding: 0;
		margin: -1.1em 0 0 0; } /* erforderlich damit kein Leerraum zwischen Spalten und Footer entsteht */


/* -- Ueberschriften, Fliesstexte -- */
	h1,h2,h3,h4 { font-family: Arial, Verdana, Sans-Serif; font-weight:normal; }

	h1 { font-size:1.7em; margin: 0 0 30px 0; font-weight:bold; color:#99CA3C; }
	h2 { font-size:1.4em; margin: 30px 0 10px 0; font-weight:bold; color:#5ABBE4  }
	h3 { font-size:1.2em; margin: 60px 0 10px 0; font-weight:bold;  color:#5ABBE4 }
	h4 { font-size:1.0em; margin: 10px 0 10px 0; font-weight:bold;  color:#5ABBE4 }
	h5 { font-size:1.0em; margin: 10px 0 10px 0; font-style:italic; color:#5ABBE4  }
	h6 { font-size:1.0em; margin: 10px 0 10px 0; font-style:italic; color:#5ABBE4  }
	
	#teaser h1 { font-size:1.2em; border:0; }
	
	p,ul,dd,dt { line-height:1.5em; }
	p { line-height:1.5em; margin:0 0 1em 0; }
	
	ol, ul { margin:0.5em 0 0.5em 2.5em; }
	
	hr {
		color: #999; 
		background:transparent; 
		margin: 0 0 0.5em 0; 
		padding: 0 0 0.5em 0; 
		border:0; 
		border-bottom: 1px #999 solid; }
		
	.hr_t { 
		margin:0.6em 0 0.3em 0; 
		padding:0 0 0.5em 0; 
		border:0;		
		border-bottom:1px #999 solid; }
		
	.hr_b { 
		margin: 0.6em 0 0.5em 0; 
		padding: 0 0 0.5em 0; 
		border:0;
		border-top:1px #999 solid; }
	
/* -- Bildpositionierung -- */
	img.float_left { float: left; margin-right: 1em; margin-bottom: 0.15em; border:0; }
	img.float_right { float: right; margin-left: 1em; margin-bottom: 0.15em; border:0; }
	img.center { text-align:center; padding: 4px; border:1px #333333 solid; }
	img.framed { padding:3px; border:1px #537118 solid; background: #A2C83D; }


/* -- lokale und externe Links -- */
	a, a em.file { text-decoration:none; }
	a:hover {text-decoration:underline; }
	a:focus {text-decoration:underline; }


/* -- formulare und tabellen */
	table { border-collapse:collapse; margin-bottom:0.5em;}
	td { padding:3px; }
	th { color:#5ABBE4; border-bottom:1px solid #999; padding-bottom:0.5em;}

	input, textarea {
		width:auto;
		padding:3px;
		color:#000; }
		
	pre {
		color:#537118;
		background:#D4EF8B;
		border:1px solid #537118;
		padding: 7px;
		margin-top:7px;
		margin-bottom:7px; }

/* -- Farben setzen -- */
	b, i, a, strong { color:#5ABBE4; }
	
/* -- Raender -- */
	.br { border:1px solid #DDD; }
	.br_b { border-bottom:1px solid #DDD; }
	.br_t { border-top:1px solid #DDD; }
	.br_l { border-left:1px solid #DDD; }
	.br_r { border-right:1px solid #DDD; }
/*-----------------------------------------------------------------------------------
 * header Definitionen
 ----------------------------------------------------------------------------------*/
	/* formatierung des kopfbereiches */
	#header { 
		position:relative;
		height:180px;
		color:#999;
    border: 1px solid #99ca3c;
		background:url(pics/header_background.jpg); 
    background-size: 100% 100%;
    
    -moz-box-shadow:    5px 5px 5px 0px #ccc;
    -webkit-box-shadow: 5px 5px 5px 0px #ccc;
    box-shadow:         5px 5px 5px 0px #ccc;
    
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
     }
	#header_image {
		height:80px;
		background-image:url(pics/logo_qx.png);
		background-position:25px 0px;
		background-repeat:no-repeat;
		font-size:150%; }
	#switch_partner {
		position:relative;
		/*height:100px;
		background-position:15px 75px;*/

		width:190px;
		height: 22px;
		top: 96px;
		right: -15px;

		float:right; 
		background-image:url(pics/switch/switch.gif);
		background-repeat:no-repeat;
		font-size:150%; }
/*-----------------------------------------------------------------------------------
 * Navigations Definitionen
 ----------------------------------------------------------------------------------*/
/* -- Navigation oben Rechts im Header -- */
	#topnav {
		position:relative;
		top:10px;
		right:10px;
		color:#FFF;
		background:transparent;
		text-align:right; } /* erforderlich, damit im Opera 6 wirklich rechts plaziert! */
	
	/* -- lokale und externe Links -- */
	#topnav a { color:#222; background:transparent; text-decoration:none; }
	#topnav a:hover { text-decoration:underline; background-color: transparent; }
	#topnav a:focus { text-decoration:underline; background-color: transparent; }

/* -- Horizontale Navigation -- */
	#nav { 
    clear:both; 
    width: 100%; 
    height: 26px; 
    margin-top: 30px; 
    border: 1px solid #DDD;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow:    5px 5px 5px 0px #ccc;
    -webkit-box-shadow: 5px 5px 5px 0px #ccc;
    box-shadow:         5px 5px 5px 0px #ccc;
  }
  
	#nav_main {
    
    width: 100%; /* einfassen der floats im IE */
    float: cente; /* einfassen der floats in allen anderen Browsern */
    line-height:0px; }
    
	#nav_main ul {
    float:left;
    display:inline; /* Fix für IE Doubled Float Margin Bug    */ 
    margin:0; /* Standard-Listendefinition zurücksetzen */
    padding:0;
    margin-left:230px; /* Abstand des ersten Buttons vom linken Rand (-2 Pixel für 3D-Schatten) */

    /*border-left: 1px #444444 solid;*/ 
    border-right: 1px #DDD solid; 
    }
    
	#nav_main ul li {
    float: left;
    display:inline;     /* Fix für IE Doubled Float Margin Bug    */ 
    margin: 0;
    padding: 0;
    font-size: 1.0em;
    line-height: 1em;
    list-style-type: none;
    border-left: 1px #DDD solid;
    /*border-right: 1px #BBBBBB solid;*/ }
	#nav_main ul li a {
    display:block;
    width:auto;
    font-size:1em;
    background:transparent;
    text-decoration:none;
    color:#99ca3c;
    margin:0;
    padding:0.5em 0.8em 0.5em 0.8em;    
    font-family: Verdana; 
    font-weight: bold;}
	#nav_main ul li a:hover {
    color:#5abbe4;
    text-decoration:none; }
	#nav_main ul li#current { 
    border-left:0; 
    /*border-right: 1px #537118 solid;*/
    }
	#nav_main ul li#current a,
	#nav_main ul li#current a:hover {
    color:#5abbe4;
    font-weight: bold;
    background:transparent;
    text-decoration:none; 
    border-left: 1px #DDD solid;
  }
	
	#nav_main a:hover {
  	color:#5abbe4; }


/* -- subnavigation -- */
	#submenu { 
		width:100%; 
		overflow:hidden;
		margin:1.4em 0 1.5em 0; 
		list-style-type:none; }
	
	#submenu a { display:block; text-decoration: none; }
	#submenu li { float:left; width: 100%; margin:0; padding: 0 }

	#submenu li span { 
		display:block; 
		width: 90%; 
		padding: 3px 0px 3px 10%; 
		background-color:transparent; 
		border-bottom: 1px #DDD solid; }
	
	#submenu li a { 
		width: 90%; 
		padding: 3px 0px 3px 10%; 
		background-color:transparent; 
		color:#444444;
		border-bottom: 1px #DDD solid; }
	#submenu li a:hover { color:#5abbe4; }
	
	#submenu li ul { list-style-type: none; margin:0; padding: 0; }
	#submenu li ul li { float:left; width: 100%; margin:0; padding:0; }
	#submenu li ul li a { 
		width:80%; 
		padding:3px 0px 3px 20%; 
		background-color:transparent; 
		color:#99ca3c; 
		border-bottom:1px #DDD solid; }

	#submenu li ul li a:hover {color: #5abbe4; }
	
	#submenu li#title {
		width:90%; 
		padding:3px 0px 3px 10%; 
		font-weight:bold; 
		color:#5abbe4;
		background-color:transparent; 
		border-bottom:2px #DDD solid; 
		font-size:15px; }
	#submenu li#title a, .sidebar-maintitle {
		width:90%; 
		padding:0px; 
		font-weight:bold; 
		color:#5abbe4;
		background-color:transparent; 
		border:0px; 
		font-size:15px; }
	
	#submenu li#active { 
		width:90%; 
		padding:3px 0px 3px 10%; 
		font-weight:bold; 
		color:#5abbe4;
		border-bottom:1px #DDD solid; }
	
	#submenu li ul li#active { 
		width:80%; 
		padding:3px 0px 3px 20%; 
		font-weight: bold; 
		color:#537118; 
	}
/*-----------------------------------------------------------------------------------
 * Content Definitionen
 ----------------------------------------------------------------------------------*/
	#main {	
    
		clear:both; 
		width:auto;
		margin-top:20px;
    margin-bottom: 20px;
    
		padding:0;
	}
  
  #box, div.box {
    width: 785px;
    display: inline-block;
      
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow:    5px 5px 5px 0px #ccc;
    -webkit-box-shadow: 5px 5px 5px 0px #ccc;
    box-shadow:         5px 5px 5px 0px #ccc;
    
    padding: 10px;
    margin-bottom: 30px;
    

  }
  
  .box_heading {
    padding: 10px;
  }
  
  .box_content {
    padding: 10px;
  }
  
	
	/* mittlere spalte */
	#col1 {
		width:818px; 
		float:left; 
		margin-left:210px;

    
    
	}
	#col1_content {
		margin-left:1em;
		margin-right:1em;
		margin-bottom:0.5em;
		margin-top:0.5em;
		color:#333333;
    
	}
	
	/* linke spalte */
	#col2 {
		width:200px; 
		float:left;
		margin-left:-1028px;

	}
	#col2_content {
		margin:0;
	}
	
	/* rechte spalte */
	#col3
	{
		width:auto;
		margin-left:0;
		margin-right:0%;
	}
	#col3_content {
		margin:0;
	}
	
	/* z-Index */
	#col1 {z-index: 3;}
	#col2 {z-index: 5;}
	#col3 {z-index: 1;}
	#col1_content {z-index: 4;}
	#col2_content {z-index: 6;}
	#col3_content {z-index: 2;}
	
	#col1_content, #col2_content, #col3_content { position:relative; }

/* -- lokale und externe Links -- */
	#main a[href^="www1.q-x.ch"]
	{
	}

	#main a[href^="http:"], #main a[href^="https:"]
	{
		padding-left:12px;
		background-image:url(pics/qx_a-ext.gif);
		background-repeat:no-repeat;
		background-position:0 0.45em;
	}
	
	#main a.imagelink {
		padding-left:0;
		background:transparent; }
	#col1_content a {
		text-decoration:underline;
		font-weight:bold; }
	
	#col1_content .fault {
		color:red;
		font-weight:bold; }
	#col1_content .proper {
		color:green;
		font-weight:bold; }
	
/*-- Formular Formatierung --*/
	#col1 .form {
		float:left;
		width:700px;
  }
	#col1 .form .atext {
		margin-top:8px;
    margin-right:20px;
		float:left;
		width:160px;
		font-weight:bold;
		color:#444444; }
	#col1 .form .intext {
		margin-top:8px;
		float:left; }
/*-----------------------------------------------------------------------------------
 * Footer Definitionen
 ----------------------------------------------------------------------------------*/
	#footer { clear:both; }	/* backup fuer IE-Clearing */
	
	/* formatierung der fusszeile */
	#footer { 
		color:#333333; 
		margin:0; 
		padding:1em 1em; 
		border-top:1px #444444 solid; 
		line-height:2em;
		text-align:center; }
		
	#footer_mastercard{
		position:relative;
		height:33px;
		width:56px;
		float:left; 
		background-image:url(pics/ccpay/mastercard.gif);
		background-position:0px 0px;
		background-repeat:no-repeat;
		font-size:150%; }		
		
	#footer_visa{
		position:relative;
		height:33px;
		width:120px;
		float:left;
		background-image:url(pics/ccpay/visa.gif);
		background-position:65px 0px;
		background-repeat:no-repeat;
		font-size:150%; }
/*-----------------------------------------------------------------------------------
 * Diverse Definitionen
 ----------------------------------------------------------------------------------*/
	#loadingMessage {
		position:fixed;
		top:150px;
		left:0;
		right:0;
		height:400px;
		
		color:#FFFFFF;
		font-weight:bold;
		text-align:center;
		vertical-align:middle;
		background:url(pics/qx_loader.gif) no-repeat #444444 center;

		z-index:20;
		opacity:.9;
		display:none; }
	#easteregg { position:relative; float:right; width:151px; height:200px; background:url('pics/aktionen/090331_EasterEgg.gif') no-repeat; cursor:pointer; }
/*-----------------------------------------------------------------------------------
 * Benutze Farben (zum nachschlagen)
 ------------------------------------------------------------------------------------
 * grau						#333333
 * hellgruen logo			#444444
 * dunkelgruen logo			#537118
 *
 * orange q-design			#E95E2B
 * gruen q-hosting			#349B3A
 *
 * hellgrau					#BBBBBB
 * hellgruen				#A2C83D
 * hellhellgruen			#D4EF8B
 ----------------------------------------------------------------------------------*/

#tools div {
    float: left;
    display: inline-block;
    margin: 0;
    margin-bottom: 1em;

    padding: 0;
    width: 377px;

    padding-left: 10px;
}

#tools-domaintransfer {
    border-left: 1px solid #DDD;
    padding-left: 20px !important;
}

#tools-domaintransfer img {
    padding-left: 20px !important;
    width: 340px;
    height: 40.1px;
}


.sidebar-maintitle {

    padding: 3px 0 3px 10%;
    border-bottom: 2px solid #ddd;
}

.sidebar-widget {
    padding: 3px 0 3px 10%;
}