/* -*- CSS -*-
  ----------------------------------------------------------------------------
  File:     darmarIT.js              --                                     --
  Author:   Markus Heiser            --     Copyright (C) 2008 darmarIT     --
  mail:                              --         All rights reserved.        --
  http://www.darmarIT.de             --                                     --
  ----------------------------------------------------------------------------
  Revision:    $Id: $
  Purpose:     darmarIT homepage layout

  Icon Gelb:  #FAB937  / 250 185  55
  Icon Grau: #767676 / 118 118 118

  Schrift Logo: Neuropol
  Schrift Businesscard: Calibri 
*/

/* ----------------------------------------------------------------------
   Allgemeines
   ---------------------------------------------------------------------- */

/* Small text */
small, .small, .smalldark, .mosimage_caption {
    font-size: 90%;
    color: #92A3AE;
}

h1, h2, h3, h4 { color: #707070; }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }

acronym { border:0; }
p acronym, li acronym, ld acronym { border-bottom: 1px dotted navy; }

a[href^="http://"] {
    background:transparent url(../images/icons/external.gif) no-repeat scroll right center;
    padding-right:13px;
}

/* der IE6 braucht eine extra-Einladung ...*/ 

.offsiteLink {
    background:transparent url(../images/icons/external.gif) no-repeat scroll right center;
    padding-right:13px;
}


@media print {

    acronym, p acronym, li acronym, ld acronym { border:0; }
    h1, h2, h3, h4 { color: black; }

    acronym:after {
	content: " (" attr(title) ")";
	font-size: 76%;
	font-style:italic;
    }

    a[href^="/"]:link:after, a[href^="/"]:visited:after {
	content: " [http://www.darmarIT.de" attr(href) "] ";
	font-size: 76%;
	font-style:italic;
	background: transparent;
    }

    a[href^="http://"] {
	background:none;
	padding-right:0;
    }

    a[href^="http://"]:after {
	content: " [" attr(href) "] ";
	font-size: 76%;
	font-style:italic;
	background: transparent;
    }

}


/* ----------------------------------------------------------------------
   Hintergrund
   ---------------------------------------------------------------------- */

html {
    overflow-y:scroll;
}

body {
    position: relative;
    z-index:1;
    color: #33354f;
    background-color: #fff;
    background-image: url(../images/background.png);
    background-repeat: repeat-x;
}

#middle, #bottom, #footer {
    position: relative;
    width: 930px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/middle.png);
    background-repeat: repeat-y;
    background-position: top center;
}

#footer {
    padding: 5px 0;
    margin-bottom: 20px;
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid #ccc;
}


#bottom {
    height: 40px;
    background-image: url(../images/bottom.png);
    background-repeat: no-repeat;
}


#top {
    width: 930px;
    min-height: 600px;
    background-image: url(../images/top.png);
    background-repeat: no-repeat;
    background-position: top center;
}

/* IE 6 min-height hack */
* html #top {
  height:auto !important;
  height:600px;
}

#MessageBox, #MenuBox {
    position:absolute;
    left: 35px;
    width: 700px;
}

#MessageBox {
    color: #444;
    top: 30px;
}

#MenuBox {
    top: 67px;
}

#Container {
    padding: 150px 35px 0 35px;
}

#ContentBox {
    /* absolute Positionierungen im Content Tag werden relativ zum div-Tag #middle
       vorgenommen, das entspricht der Breite von 930px und der gesamten Höhe,
       ausgenommen der #footer Bereich. Will meinen: rechts/links sind die
       auto-margins und unten der #footer die null-Punkte der Ecken.  */
    margin: 0 30px;
}

/* ----------------------------------------------------------------------
   forms
   ---------------------------------------------------------------------- */

fieldset {
    border: 1px solid #aaa;
    padding: 1em;
}

legend {
    background-color: #ddd;
    border: 1px solid #aaa;
    padding: 3px 5px;
    margin: 0px 20px 0 20px;
}


/* php Class:CForm
   ---------------------------------------------------------------------- */

.mandatoryInput input[type="text"], .mandatoryInput textarea { background-color: #ffe; }
.mandatoryInput input, .mandatoryInput textarea {
    border-width: 1px; 
    background: #ffe url(../images/icons/mandatory.gif) no-repeat scroll right top;
    padding-right: 13px;
}
.optionalInput input[type="text"], .optionalInput textarea { background-color: #eee; }

form td {
    vertical-align:top;
    padding: 0.2em 0.5em;
}


input[type="text"] { border-width: 1px; }
input[type="text"], textarea { border: 1px solid #ccc; }
input[type="text"]:hover, textarea:hover { background-color: white; }
input[type="text"]:focus, textarea:focus { background-color: white; }


/* ----------------------------------------------------------------------
   horizontale menüs
   ---------------------------------------------------------------------- */

ul.mainMenu, ul.footerMenu, ul.pathMenu, ul.vCardMenu {
    list-style-type: none;
    margin: 0; padding: 0;
}

ul.mainMenu li, ul.footerMenu li, ul.pathMenu li, ul.vCardMenu li {
    display: inline;
    margin: 0; padding: 0;
}

ul.mainMenu a, ul.footerMenu a, ul.pathMenu a { 
    color: #33354f; 
    text-decoration: none; 
}

ul.mainMenu li { 
    border-left: 1px solid #aaa;
    padding: 0 3px 0px 6px;
}

ul.mainMenu img {
    vertical-align:middle;
    margin: -8px 2px 0 0;
}

ul.mainMenu li.firstEntry, ul.mainMenu li.backButton { border: 0; }
ul.mainMenu li.activeLink a { color: #918e69; }
ul.mainMenu a:hover { color: #f3f1d8; }

ul.pathMenu { height: 14px;font-weight: bold; font-size: 90%;}

ul.pathMenu li.label { font-weight: normal;}
ul.pathMenu .pathSep { margin:0 5px;}
ul.pathMenu a:hover { color:blue; text-decoration: underline;}

ul.footerMenu { font-size: 90%; }
ul.footerMenu li { padding: 0 8px; }
ul.footerMenu img, ul.vCardMenu img { margin-bottom: -4px; margin-right: 5px; }
ul.footerMenu a:hover { background-color: #ddc; }


/* ----------------------------------------------------------------------
   Printmedien Ausgabe (Allgemeines)
   ---------------------------------------------------------------------- */

#printHeader {
    display: none;
}

@media print {

    #footer, #MessageBox, #MenuBox, #bottom { display: none; } 

    #printHeader p { float:left; }
    #printHeader img { float:right; }

    body, #middle, #bottom,  #top, #Container {
	color: black;
	margin: 0;
	border:0;
	padding:0;
	width: auto;
	background-color: transparent;
	background-image: none;
    }

    #ContentBox {
	width: auto;
	margin:2em 2em 2em 3em;
	padding: 0;
    }

    #printHeader {
	margin:2em 2em 2em 3em;
	display: block;
	border-bottom: 1px solid #f9b936;
	padding: 1em;
    }

}



/* ----------------------------------------------------------------------
   contact
   ---------------------------------------------------------------------- */

.MessageForm {
    width: 30em;
    margin: 20px 0 0 0 ;
}


/* ----------------------------------------------------------------------
   Artikel und Zusammenfassung
   ---------------------------------------------------------------------- */

.article { }
.article img { margin: 10px; }
/* .article h2 { color: #FAB937; } */

.articleAbstract { clear:both; }

.articleAbstract h1, .articleAbstract h2, .articleAbstract h3, .articleAbstract h4 { 
    font-size: 100%;
}
.articleAbstract h1 { 
    border-bottom: 1px solid #aaa;
    margin-top: 3em;
    margin-bottom: 1.5em;
}

.articleAbstract img { 
    float:left;
    margin: 0px 10px 30px 0px;
}

.articleAbstract p {  
    margin-left: 180px;
}

.articleAbstract .readOn { 
    float: right;
}


@media print {
    .article, .articleAbstract { width: auto;}
}

/* ----------------------------------------------------------------------
   Businesscard
   ---------------------------------------------------------------------- */

.businesscard {
    position: relative;
    width: 492px;
    height: 206px;
    background-image: url(../images/darmarIT_businesscard.gif);
}

.businesscard .label {
    position: relative;
    width: 250px;
    left: 235px;
    top: 25px;
}

.businesscard p {
    margin:5px 0 0 0; 
}
    
.businesscard .col1 {
    float: left;
    width: 6em;
}

.businesscard .vCardMenu {
    position: absolute;
    bottom:15px;
    left: 235px;
    padding-top: 5px;
    border-top: 1px solid #999;
}



/* ----------------------------------------------------------------------
   jquery (Animationen ect.)
   ---------------------------------------------------------------------- */

.drag-handle {
    cursor:move;
}