/*
  ======================================================

	MAINCSS FILE FOR sternenklar.at

	Developed by IQ² - Intelligente Weblösungen, February 2010
	Copyright by IQ² - Intelligente Weblösungen, February 2010
		
	www.sternenklar.at is a webproject maintained and developed by IQ². 
    Graphic-design evolved by sternenklar.at.
    Concept by sternenklar.at & IQ²
	
	Projectfacts: 
	
	Main-Release: February, 2010
	
	Have fun!
  ======================================================
*/


/*
  ======================================================
	LAYOUT SPECIFIC STYLESHEET DEFINITIONS
  ======================================================
*/
html, body { /*Scroll fix for Opera & Firefox */
/*	height: 101%;
	margin-bottom: 1px;*/
}

body {
	margin: 0;
	padding: 0;
    border: 0;
    background-color: #bcbcbc;
    color: #2c3437;
    font-size: 11px;
}
 
.inside { /* Content padding */
	margin: 0;
	padding: 20px;
	border: 0;
	float: left;
}

p.back {
    display: none;
}

/**
  ======================================================
    COMMON STYLES FOR LINKS
  ======================================================
*/ 
a { 
	outline-width: 0; 
	display: inline;
    color: #2c3437;
} 


/**
  ======================================================
    CONTENT AREA SECTION
  ======================================================
*/
#contentarea {
    width: 870px;
    height: 450px;
    background-color: #FFF;
    margin: 0 30px 0 30px;
    padding: 0;
    border: 10px solid #2c3437;
    position: relative;
}

#contentarea.loading {
    background: #FFF url(../img/assets/loader.gif) no-repeat center center;
}

#contentarea .mod_article .infos h1, #contentarea .mod_article .infos-right h1 {
    font-size: 11px;
    height: 14px;
    line-height: 14px;    
    font-weight: normal;
    color: #2C3437;
    margin: 0;
    text-decoration: none;
}

#contentarea .mod_article .infos p   {
    margin: 5px 0 0 0;
    padding: 0;
}

#contentarea .mod_article .infos p strong {
    font-size: 11px;
    font-weight: bold;
}

#contentarea .mod_article .infos ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#contentarea .mod_article .infos ul li {
    margin: 0;
    font-size: 10px;
    line-height: 15px;
}

#contentarea .mod_article .infos h2, #contentarea .mod_article .infos-right h2  {
    font-size: 11px;
    height: 20px;
    line-height: 20px;    
    font-weight: normal;
    color: #333;
    margin: 0 0 0.7em 0;
    text-decoration: none;
}

#contentarea .mod_article .infos {
    position: absolute; 
    top: 35px;
    left: 55px;
    width: 300px;
    height: 400px;
    z-index: 100;
    font-size: 10px;    
}

#contentarea .mod_article .infos-right {
    position: absolute; 
    top: 55px;
    left: 470px;
    width: 250px;
    height: 400px;
    z-index: 100;
    font-size: 10px;    
}

#contentarea .mod_article .infos.white, 
#contentarea .mod_article .infos.white h1, 
#contentarea .mod_article .infos.white h2, 
#contentarea .mod_article .infos.white a,
#contentarea .mod_article .infos-right.white, 
#contentarea .mod_article .infos-right.white h1, 
#contentarea .mod_article .infos-right.white h2, 
#contentarea .mod_article .infos-right.white a {
    color: #FFF;
}

.mod_ch_flowplayer {
    background-color: #000;
    width: 870px;
    height: 450px;
}

.mod_ch_flowplayer .player {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    margin-top: 125px;
}

.mod_ch_flowplayer.big .player {
    width: 712px;
    height: 400px;
    margin: 0 auto;
    margin-top: 25px;
}




/**
  ======================================================
    LABEL STERNENKLAR
  ======================================================
*/
#header {
    position: relative;  
    z-index: 150;
}

#label {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 41px;
    left: 723px;
    width: 177px;
    height: 55px;
    z-index: 100;
}    
 
/*a.contact {
    background: url(../img/assets/button-contact.png) no-repeat top left;
    width: 153px;
    height: 72px;
    text-indent: -999em;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 90px;
    left: 733px;
    float: left;
    z-index: 50;
} */


a.contact-trigger {
    background: url(../img/assets/button-contact.png) no-repeat 0 -36px;
    width: 153px;
    height: 36px;
    text-indent: -999em;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 85px;
    left: 770px;
    float: left;
    z-index: 150;
}

a.contact-trigger.active {
    position: absolute;
    width: 153px;
    height: 36px;
    margin: 0;
    top: 85px;
    left: 770px;
    float: left;
    background: url(../img/assets/button-contact.png) no-repeat 0 0;
    z-index: 150;
}


#contact-top {
    display: none;
    position: absolute;
    text-indent: -999em;    
    background: url(../img/assets/bg-contact.png) no-repeat top left;    
    margin: 0;
    padding: 0;
    top: 96px;
    left: 730px;
    width: 190px;
    height: 167px;
    z-index: 1250;
}

a.contact {
    position: absolute;
    width: 50px;
    height: 20px;
    text-indent: -999em;
    background: url('../img/assets/trans.gif');  /*Fix for IE to display links */
    border: 0;  
    top: 228px;
    left: 828px;
    z-index: 200;
}

#contact-top a.email-top {
    position: absolute;
    width: 110px;
    height: 20px;
    text-indent: -999em;
    background: url('../img/assets/trans.gif');  /*Fix for IE to display links */
    border: 0;  
    top: 108px;
    left: 25px;
    z-index: 500;
}

#contact-top a.contact {
    position: absolute;
    width: 54px;
    height: 20px;
    text-indent: -999em;
    background: url('../img/assets/trans.gif');  /*Fix for IE to display links */
    border: 1px solid red;  
    top: 167px;
    left: 733px;
    z-index: 200;
}

#contact-top a.contact-hide-trigger {
    position: absolute;
    width: 35px;
    height: 35px;
    text-indent: -999em;
    background: url('../img/assets/trans.gif');  /*Fix for IE to display links */
    border: 0;  
    top: 135px;
    left: 130px;
    z-index: 200;
}

 
/**
  ======================================================
    MOD_ARTICLE 
  ======================================================
*/
.mod_article {
    width: 870px;
    height: 450px;
    display: none;
}

/**
  ======================================================
    NAVIGATION
  ======================================================
*/
#navigation {
    width: 890px;
    margin: 35px 30px 0 30px;
    padding: 0;
    border: 0;
    float: left;
}

#navigation .mod_navigation {
    margin: 0;
    padding: 26px 0 0 0;
    border: 0;
    width: 890px;
    height: 25px;
    float: left;
    /*background: url(../img/assets/bg-nav.png) no-repeat 75px 0;*/
    clear: both;
}

#navigation .mod_navigation ul {
    margin: 0;
    padding: 0 0 0 20px;
    border: 0;
    float: left;
    display: block;
    width: 870px;
    height: 25px;   
}

#navigation .mod_navigation li {
    float: left;
    list-style: none;
    position: relative; /* ADDED */
}

li.mn01, li.mn02, li.mn03, li.mn04, li.mn05, li.mn06 {
    margin: 0;
    padding: 0;
    width: 63px;
    height: 25px;
    display: block;
    background: url('../img/assets/nav.png') no-repeat 0px;
}

li.mn01 { width: 63px; }
li.mn02 { width: 108px; }
li.mn03 { width: 77px; }
li.mn04 { width: 68px; }
li.mn05 { width: 87px; }
li.mn06 { width: 80px; }

li.mn01 { background: url('../img/assets/nav.png') 0 0; }
li.mn02 { background: url('../img/assets/nav.png') -64px 0; }
li.mn03 { background: url('../img/assets/nav.png') -172px 0; }
li.mn04 { background: url('../img/assets/nav.png') -249px 0; }
li.mn05 { background: url('../img/assets/nav.png') -317px 0; }
li.mn06 { background: url('../img/assets/nav.png') -404px 0; }

#navigation .mod_navigation ul li.mn01 > .trail, #navigation .mod_navigation ul .mn01.active { background: url('../img/assets/nav.png') 0 -50px; }
#navigation .mod_navigation ul li.mn02 > .trail, #navigation .mod_navigation ul .mn02.active { background: url('../img/assets/nav.png') -64px -50px; }
#navigation .mod_navigation ul li.mn03 > .trail, #navigation .mod_navigation ul .mn03.active { background: url('../img/assets/nav.png') -172px -50px; }
#navigation .mod_navigation ul li.mn04 > .trail, #navigation .mod_navigation ul .mn04.active { background: url('../img/assets/nav.png') -249px -50px; }
#navigation .mod_navigation ul li.mn05 > .trail, #navigation .mod_navigation ul .mn05.active { background: url('../img/assets/nav.png') -317px -50px; }
#navigation .mod_navigation ul li.mn06 > .trail, #navigation .mod_navigation ul .mn06.active { background: url('../img/assets/nav.png') -404px -50px; }

li.mn01:hover { background: url('../img/assets/nav.png') 0 -25px; }
li.mn02:hover { background: url('../img/assets/nav.png') -64px -25px; }
li.mn03:hover { background: url('../img/assets/nav.png') -172px -25px;}
li.mn04:hover { background: url('../img/assets/nav.png') -249px -25px; }
li.mn05:hover { background: url('../img/assets/nav.png') -317px -25px; }
li.mn06:hover { background: url('../img/assets/nav.png') -404px -25px; }

li.mn01 > a { width: 53px; height: 25px; display: block; }
li.mn02 > a { width: 98px; height: 25px; display: block; }
li.mn03 > a { width: 67px; height: 25px; display: block; }
li.mn04 > a { width: 58px; height: 25px; display: block; }
li.mn05 > a { width: 77px; height: 25px; display: block; }
li.mn06 > a { width: 70px; height: 25px; display: block; }

#navigation .mod_navigation ul li.mn01 > a, #navigation .mod_navigation ul .active .mn01,
#navigation .mod_navigation ul li.mn02 > a, #navigation .mod_navigation ul .active .mn02,
#navigation .mod_navigation ul li.mn03 > a, #navigation .mod_navigation ul .active .mn03,
#navigation .mod_navigation ul li.mn04 > a, #navigation .mod_navigation ul .active .mn04,
#navigation .mod_navigation ul li.mn05 > a, #navigation .mod_navigation ul .active .mn05,
#navigation .mod_navigation ul li.mn06 > a, #navigation .mod_navigation ul .active .mn06 {
    margin: 0;
    padding: 0;
    border: 0;
    text-indent: -9999em;
    display: block;
} 

.invisible {
    display: none;
}  

/**
 * Do not show submenues
 */
#navigation .mod_navigation .level_2 {
    display: none;
} 
 
#navigation .mod_navigation li ul li {
    display: none;
}


/**
  ======================================================
    MOD_ARTICLENAV
  ======================================================
*/
.mod_articlenav {
    width: 570px;
    position: absolute;
    top: 425px;
    left: 292px;   
}

.mod_articlenav ul {
    margin: 0;
    padding: 0;
    border: 0;
    float: right;
}

.mod_articlenav li {
    margin: 0 5px 0 0;
    width: 12px;
    height: 12px;
    border: 1px solid black;
    float: left;
    list-style: none;
    font-size: 9px;
    background-color: #FFF;
    color: #2c3437;
    text-align: center;
}

.mod_articlenav li a {
    text-decoration: none;
    display: block;
    width: 12px;
    height: 12px;
}   

.mod_articlenav li a.link {
    color: #FFF;
    background-color: #2c3437;
}

.mod_articlenav li a.link.active {
    background-color: #FFF;
    color: #2c3437;
}

/*.mod_articlenav li a.next, .mod_articlenav li a.previous, .mod_articlenav li a.first, .mod_articlenav li a.last {
    width: 10px;
} */


.mod_articlenav li.next a {
    width: 18px;
    height: 32px;
    display: block;
}

.mod_articlenav a.link.current {
    color: #2c3437;
    background-color: #FFF;
}

.mod_articlenav li.back {
    margin: 0 10px 0 0;
    line-height: 14px;
    height: 14px;
    font-size: 9px;
    text-align: center;
    border: none;
    width: 125px;
    color: #2c3437;
    background-color: #FFF;
}

.mod_articlenav li.back a {
    line-height: 14px;
    height: 14px;
    width: 125px;
    color: #2c3437;
}


/**
  ======================================================
    MOD_BOOKNAV
  ======================================================
*/
.mod_booknav {
    width: 32px;
    height: 32px;
}

.mod_booknav ul {
    margin: 0;
    padding: 0;
    border: 0;
    width: 16px;
    height: 32px;
}

.mod_booknav li {
    margin: 0;
    padding: 0;
    border: 0;
    width: 16px;
    height: 32px;
    list-style: none;
} 

.mod_booknav li.prev {
    background: url('../img/assets/bg-prev.png') 0 0 no-repeat;
    width: 18px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 210px;
    left: -28px;
    text-indent: -999em;
}

.mod_booknav li.next {
    background: url('../img/assets/bg-next.png') 0 0 no-repeat;
    width: 18px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 210px;
    right: -28px;
    text-indent: -999em;
}

li.prev.empty, li.next.empty {
    display: none;
}

.mod_booknav li.prev a {
    width: 18px;
    height: 32px;
    display: block;
}

.mod_booknav li.next a {
    width: 18px;
    height: 32px;
    display: block;
}


/**
  ======================================================
    MOD_ARTICLEFILTER
  ======================================================
*/
.mod_articlefilter {
    background: url(../img/assets/bg-filter.png) no-repeat top left;
    display: block;
    padding: 0 20px 0 20px;
    width: 344px;
    height: 98px;
    position: absolute;
    top: 353px;
    left: 15px;
    z-index: 100;
}

.mod_articlefilter form {
    padding: 40px 0 0 0;
}

a.quickfilter {
    /*background: url(../img/assets/button-filter-close.png) no-repeat 0 0;*/
    width: 26px;
    height: 26px;
    text-indent: -999em;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 360px;
    left: 332px;
    float: left;
    z-index: 150;
}

a.quickfilter.active {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: 0;
	top: 440px;
    left: 5px;
    float: left;
    background: url(../img/assets/button-filter-close.png) no-repeat 0 -26px;
}

.mod_articlefilter input[type="checkbox"] {
    width: 15px;
    margin: 0;
    padding: 0;
    border: none;
    float: left;
}

.mod_articlefilter label {
    margin: 0;
    padding: 0 10px 0 5px;
    float: left; 
    width: auto;
    font-size: 10px;
    color: #FFF;
    position: relative;
    top: 2px;
}

.mod_articlefilter input#send {
    position: absolute;
    width: 80px;
    height: 22px;
    text-indent: -999em;
    background: url('../img/assets/trans.gif');  /*Fix for IE to display links */
    border: 0;  
    top: 72px;
    left: 238px;
}

.selectedFilterHeadline {
    margin: 0 0 20px 0;
}

.searchFilters, .no_filter {
    font-size: 11px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.searchFilters ul li {
    font-weight: normal;
    width: 100px;
}

/**
  ======================================================
    PROJEKTE & KUNDEN LISTING
  ======================================================
*/
.mod_article .listing {
    position: absolute;
    width: 710px;
    height: 230px; 
    top: 180px;
    left: 80px;   
}

.mod_article .listing ul {
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    margin: 0 25px 0 0;
}

.mod_article .listing li {
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 16px;
}

.mod_article .listing li a {
    color: #2c3437; 
    text-decoration: none;
}

/**
  ======================================================
    TABLE DEFINITIONS
  ======================================================
*/    
table.contenttable {
    border-top: 1px solid #DDD;
    border-left: 1px solid #DDD;
    border-collapse: collapse;
    margin: 15px 0 0 0;
    width: 910px;
    float: left;
}

.contenttable th, .contenttable td {
    padding: 2px 10px 2px 10px;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD; 
    text-align: left;
    font-size: 11px;
}

.contenttable td {
    background-color: #FFF;
    color: #575757;
    padding: 15px 10px 15px 10px;
    width: 118px;
}

.contenttable th {
    font-weight: bold;
    vertical-align: top;
    background: #fdfeff url('../img/assets/bg-table.png') left bottom repeat-x;      
    color: #3f3f3f;
    padding: 4px 10px 4px 10px;
    text-align: left;
    height: 40px;
}

.contenttable th.no-tbbg {
    font-weight: bold;
    vertical-align: top;
    background: #f5f4f4 none;
    color: #3f3f3f;
    padding: 15px 10px 15px 10px;
    text-align: left;
    width: 90px;
}

.contenttable .align-center {
    text-align: center;
}

.contenttable td.highlight {
    color: #fdb825;
    font-weight: bold;
    font-size: 14px;
}

.contenttable.no-pad {
    margin: 5px 0 0 0;
}

/**
  ======================================================
    BLUEPRINT FORM OVERRIDE
  ======================================================
*/  
fieldset {padding: 0;margin:0;border:0;}
legend {font-weight:bold;font-size:1.2em;}
input[type=text], input[type=password], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #d0d0d0;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#ffd500;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0;}
input.text, input.title {width:290px;padding:2px;}
input.title {font-size:1.5em;}
textarea {width:605px;height:250px;padding:5px;}
input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}

/**
  ======================================================
    COMMON STYLES FOR FORMS
  ======================================================
*/  
form {
    width: 640px;
    border: 0;
    margin: 20px 0 0 0;
    padding: 0;
    float: left;
}

.formbody {
    width: 640px;
    margin: 0;
    padding: 0 0 10px 0;
    border: 2px solid #e1e1e1;
    float: left;
    background-color: #ECECEC;
}

.formbody .headline {
    font-size: 2em;
    margin: 0;
    padding: 10px 0 0 10px;
    background-color: #F7F7F7;
    clear: both;
}

.formbody .headline p {
    margin: 0;
}

.formbody .explanation {
    padding: 10px 10px 5px 10px;
    background-color: #F7F7F7;   
    margin: 0 0 10px 0; 
    float: left;
    width: 620px;
}

.formbody .formright .explanation {
    width: 275px;
}

label.error {
    color: #C11311;
}

p.error {
    color: #C11311;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.mandatory {
    color: #C11311;
    font-weight: bold;
}

fieldset.formleft {
    width: 300px;
    float: left;
    margin: 10px 0 20px 0;
    padding: 0 10px 0 10px;
    border: 0;
}

fieldset.formright {
    width: 300px;
    float: left;
    margin: 10px 0 20px 0;
    padding: 0 10px 0 10px;
    border: 0;
}

/**
 * CSS Hack to fix IE7 & IE8 fieldset problems
 * Description: Background-color is visible above
 * the fieldset border
 */
form legend { margin-top /*\**/: -1em; left: .5em; } 
/*form fieldset { overflow /*\**/    /*: visible; height: 1%; }*/

fieldset label {
    margin: 3px 0 0 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    width: 300px;
    font-weight: normal;
    color: #3f3f3f;
}

input.submit {
    margin: 0;
    padding: 0 10px 0 10px;
    border: 0;
    width: 118px;
    height: 23px;
    text-align: left;
    float: left;
}

.submit_container {
    width: 620px;
    float: left;
    display: block;
    text-align: right;
    margin: 0 0 20px 0;
}

.radio_container {
    border: 0;
    float: left;
    width: auto;
    margin: 2px 0 2px 0;
}

.radio_container input.radio {
    width: 15px;
    margin: 0;
    padding: 0;
    border: none;
    float: left;
}

.radio_container.newline  {
    width: 300px;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
}

.radio_container.newline span {
    float: left;
}

.radio_container.newline span label {
    margin: 0;
    padding: 0 10px 0 10px;
    width: 260px;
}

.radio_container span label {
    margin: 0;
    padding: 0 10px 0 10px;
    float: left; 
    width: auto;
}

select {
    float: left;
    display: block;
    width: 295px;
    padding: 1px 0 1px 2px;
    margin: 0 0 0 0;
}

select#selectList {
    width: 370px;
}

#choose {
    background-color: #FDB825;
    padding: 8px 8px 4px 8px;
    float: left;
}