/*******************************************************************************
**
**  main.css
**
**  Project: HomepageMS
**
**  ----------------------------------------------------------------------------
**
**  Description:
**  Common CSS file for this website.
**
**  ----------------------------------------------------------------------------
**  Created: 20-01-09 07:00 by Marco Stolz
*******************************************************************************/

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 Standardfarbe für Rahmen und Text                : #444444
 Schriftfarbe von Links und Bestätigungsmeldungen : #3592A0
 Unterlegung, Hintergrund Tabellenköpfe           : #E5E2CF
 Hintergrund Eingabefelder wenn aktiv             : #FAF8EF
 Rahmen Eingabefelder wenn hover oder aktiv       : #9F8875
 Schriftfarbe Fehlermeldungen und Hervorhebungen  : #8B0000
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/


/******************************************************************************/
/** Common classes and selectors                                             **/
/******************************************************************************/

@charset "utf-8";

html[xmlns^="http"] {
   overflow-y : scroll;
}

/* the body */
body {
   background-color : White;                      /* standard background color of the website */
   color            : #444444;                    /* standard color of the fonts */
   font-family      : Verdana, Arial, Helvetica, sans-serif; /* standard font families */
   font-size        : 12px;                       /* standard font size */
   line-height      : 1.44em;
   text-align       : center;                     /* important, to output all divs center aligned */
   margin           : 0px auto;                   /* generally no margin */
   padding          : 0px;                        /* ...and no padding */
}

/* texts */
p {
   text-align  : justify;
   margin      : 0px auto;
   padding     : 0px;
}

/* links */
a {
   text-align      : justify;
   text-decoration : underline;
   margin          : 0px auto;
   padding         : 0px;
}
a:link    { color : #3592A0; }
a:visited { color : #3592A0; }
a:hover   { color : #8B0000; }
a:active  { color : #8B0000; }

/* images */
img {
   border         : 0px none;
   margin         : 0px;
   padding        : 0px;
   vertical-align : top;
}

/* common distances of the website */
.clWdthTotal   { width  : 800px; }                /* the total width of the website (= clWdthMnLeft + clWdthContent) */
.clWdthMnLeft  { width  : 140px; }                /* width of the left menu */
.clWdthContent { width  : 660px; }                /* width of the content area */
.clHghtBgImg   { height : 150px; }                /* height of the background image (total dimensions: clHghtBgImage x clWdthTotal) */

/* classes for special font colors */
.clColMsg    { color : #3592A0; }                 /* font color of info messages */
.clColErrMsg { color : #8B0000; }                 /* font color of error messages */

/* classes to use float */
.clFltL { float : left;  }
.clFltR { float : right; }
.clFltC { clear : both;  }

/******************************************************************************/
/** Form elements                                                            **/
/******************************************************************************/

span {
   display        : block;
   vertical-align : middle;
}

form {
   text-align : left;
}

/* form input elements */
input[type=text], input[type=password], select, textarea {
   border-width : 1px;
   border-style : solid;
   font-family  : Verdana, Arial, Helvetica, sans-serif;
   font-size    : 12px;
   padding      : 2px;
}

input[type=submit], input[type=reset] {
   display : inline-block;
   margin  : 15px 20px 15px 0px;
}

/* Special classes for the above form elements (input, select, textarea).
 * A form element can either be in a seperate line (use clIptBlock), or it can
 * be in the same line with the label and other form elements (use clIptInline). */
.clIptBlock {
   display : block;
   margin  : 2px 0px 2px 0px;
}

.clIptInline {
   display : inline-block;
   margin  : 2px 20px 2px 0px;
}

/* Classes for the labels.
 * A label can either be a in a seperate line (use clLblBlock), or it can be
 * in the same line with the form element, either befor the form element
 * (use clLblInline) or at the right of the form element (use clLblInlineR). */
label {
   font-size   : 11px;
   line-height : 18px;
}

label.clLblBlock {
   display : block;
   padding : 6px  0px 0px  0px;
   margin  : 0px;
}

label.clLblInline {
   display : inline-block;
   padding : 3px 0px 3px  0px;
   margin  : 0px 5px 0px 0px;                     /* 5px between label and the form */
}

label.clLblInlineR {
   display : inline-block;
   padding : 3px  0px 3px 0px;
   margin  : 0px 0px 0px 5px;                     /* 5px between the form and the label */
}

/* Additional class for optical styles of form elements, which will be added or
 * removed by javascript on events like hover or focus. */
.clIptHover   { border-color : #9F8875; }
.clIptNoHover { border-color : #888888; }
.clIptFocus   { background-color : #FAF8EF; border-color : #9F8875; }

/******************************************************************************/
/** Elements of the top menu                                                 **/
/******************************************************************************/

/* classes for <a> and <p> elements of the top menu area */
.clTxtMnTopActive, .clTxtMnTopActual, .clTxtMnTopInactive {
   font-size       : 11px;
   text-decoration : none;
   margin          : 125px 5px 0px 5px;
}

/* colors of the ACTIVE links */
.clTxtMnTopActive:link    { color : #444444; }
.clTxtMnTopActive:visited { color : #444444; }
.clTxtMnTopActive:hover   { color : #8B0000; }
.clTxtMnTopActive:active  { color : #8B0000; }
/* colors of the ACTUAL links */
.clTxtMnTopActual:link    { color : #444444; }
.clTxtMnTopActual:visited { color : #444444; }
.clTxtMnTopActual:hover   { color : #8B0000; }
.clTxtMnTopActual:active  { color : #8B0000; }
/* colors of the INACTIVE links */
.clTxtMnTopInactive       { color : #D3D3D3; }

/* login <div> container */
div#idDivLoginWin {
   background-color : White;
   border           : 1px solid #444444;
   display          : none;
   position         : absolute;
   top              : 150px;
   width            : 200px;                      /* total width: 242 px */
   padding          : 20px 20px 0px 20px;
}

/* headline <h1> of the login <div> container */
div#idDivLoginWin h2 {
   font-size       : 18px;
   font-weight     : normal;
   line-height     : 1em;
   text-align      : left;
   text-decoration : none;
   margin          : 0px;
   padding         : 0px 0px 5px 0px;
}

/******************************************************************************/
/** Elements of the left menu                                                **/
/******************************************************************************/

/* classes for the <div> containers of the left menu items */
div.clDivMnLeftActive, div.clDivMnLeftActual, div.clDivMnLeftInactive {
   border-width : 0px 1px 0px 0px;
   border-style : solid;
   border-color : #444444;
   width        : 139px;
}

/* classes for the menu item links of the above <div> containers */
div.clDivMnLeftActive a, div.clDivMnLeftActual a, div.clDivMnLeftInactive p {
   display         : block;
   font-size       : 11px; 
   text-align      : left;
   text-decoration : none;
   height          : 100%;
   margin          : 0px;
}

div.clDivMnLeftActive a:link    { color : #444444; }
div.clDivMnLeftActive a:visited { color : #444444; }
div.clDivMnLeftActive a:hover   { background-color : #E5E2CF; color : #8B0000; }
div.clDivMnLeftActive a:active  { background-color : #E5E2CF; color : #8B0000; }

div.clDivMnLeftActual a:link    { color : #8B0000; }
div.clDivMnLeftActual a:visited { color : #8B0000; }
div.clDivMnLeftActual a:hover   { background-color : #E5E2CF; color : #8B0000; }
div.clDivMnLeftActual a:active  { background-color : #E5E2CF; color : #8B0000; }

div.clDivMnLeftInactive p { color : #D3D3D3; }

/* special for the different levels of the menu item links */
.clDivMnLeftLvl_0 { height : 20px; padding-top : 5px; }
.clDivMnLeftLvl_1 { height : 18px; }
.clDivMnLeftLvl_2 { height : 16px; }
.clDivMnLeftLvl_3 { height : 16px; }

.clTxtMnLeftLvl_0 { padding : 0px 0px 0px  5px; line-height : 20px; }
.clTxtMnLeftLvl_1 { padding : 0px 0px 0px 15px; line-height : 18px; }
.clTxtMnLeftLvl_2 { padding : 0px 0px 0px 25px; line-height : 16px; }
.clTxtMnLeftLvl_3 { padding : 0px 0px 0px 35px; line-height : 16px; }

/* <div> container before the first left menu item, which has no text or link,
 * but only a border */
div.clDivMnLeftFirst {
   border-width : 0px 1px 0px 0px;
   border-style : solid;
   border-color : #444444;
   height       : 20px;
   width        : 139px;
}

/* <div> container below the last left menu item, which has no text or link,
 * but only a border */
div.clDivMnLeftLast {
   border-width : 0px 1px 0px 0px;
   border-style : solid;
   border-color : #444444;
   height       : 40px;
   width        : 139px;
}

/******************************************************************************/
/** Elements of the content area                                             **/
/******************************************************************************/

/* ordinary text, used in the content area */
div#idDivContent p{
   margin  : 0px 0px 0px 40px;                    /* for the frame of the content area */
   padding : 0px 0px 8px  0px;                    /* distance after a paragraph */
}

/* the headline of a content */
div#idDivContent h1 {
   font-size       : 24px;
   font-weight     : normal;
   line-height     : 1em;
   text-align      : left;
   text-decoration : none;
   margin          : 30px 0px 30px 40px;

}

/* The headline of a section of a content. Also available as link to expand the
 * section. */
div#idDivContent h2 {
   font-size       : 20px;
   font-weight     : normal;
   line-height     : 1em;
   text-align      : left;
   text-decoration : none;
   margin          : 20px 0px 15px 40px;
}
div#idDivContent a.clAHead2 {
   text-decoration : none;
}
div#idDivContent a.clAHead2:link    { color : #444444; }
div#idDivContent a.clAHead2:visited { color : #444444; }
div#idDivContent a.clAHead2:hover   { color : #444444; }
div#idDivContent a.clAHead2:active  { color : #444444; }

/* the headline of a small paragraph */
div#idDivContent h3 {
   font-size       : 16px;
   font-weight     : normal;
   line-height     : 1em;
   text-align      : left;
   text-decoration : underline;
   margin          : 15px 0px 10px 40px;
}

/* a hozizontal line */
div#idDivContent hr {
   background-color : #444444;
   border           : 0px none;
   height           : 1px;
   margin           : 20px 0px 20px 40px;
}

/*----------------------------------------------------------------------------*/
/* forms in the content */
/*----------------------------------------------------------------------------*/
/* <form> container for the content area */
div#idDivContent form {
   margin : 0px 0px 0px 40px;
}

/*----------------------------------------------------------------------------*/
/* tables in the content */
/*----------------------------------------------------------------------------*/
div#idDivContent table, div#idDivContent tr, div#idDivContent td {
   border          : 1px solid #444444;
   border-collapse : collapse;
   empty-cells     : show;
   margin          : 0px;
   padding         : 0px;
}

/* tables */
div#idDivContent table {
   margin : 0px 0px 0px 40px;
}

/* cells */
div#idDivContent td {
   vertical-align : top;
   padding        : 4px 2px 4px 2px;
}
/* class for cells <td> of the head row of a table */
div#idDivContent td.clTdHead {
   background-color : #E5E2CF;
}

/* forms in the tables */
div#idDivContent table form {
   margin : 0px;
}

/* texts <p> and links <a> in the cells of the tables */
div#idDivContent td p, div#idDivContent td a {
   font-size       : 10px;
   line-height     : 1em;
   text-align      : left;
   text-decoration : none;
   margin          : 0px;
   padding         : 0px 0px 0px 0px; 
}

/******************************************************************************/
/** Elements of the footer                                                   **/
/******************************************************************************/

/* the placeholder <div> between the content area and the footer <div> */
div#idDivBefFooter {
   height : 60px;
   clear  : both;
}

/* the footer <div> */
div#idDivFooter {
   display    : none;
   border-top : 1px solid #444444;
   height     : 24px;
}

/* the <a> and <p> text into the footer <div> */
div#idDivFooter p, div#idDivFooter a {
   font-size       : 11px;
   line-height     : 24px;
   text-align      : center;
   text-decoration : none;
}
div#idDivFooter a:link    { color : #444444; }
div#idDivFooter a:visited { color : #444444; }
div#idDivFooter a:hover   { color : #444444; }
div#idDivFooter a:active  { color : #444444; }

/******************************************************************************/
/** Window dialog elements                                                   **/
/******************************************************************************/

/* dialog <div> container for info and error messages */
div#idDivMsgWin {
   background-color : White;
   border           : 1px solid #444444;
   display          : none;
   position         : fixed;
   top              : 10px;
   left             : 10px;
   padding          : 15px;
   opacity          : 0.9;                        /* for Safari >= 1.2, newer Mozilla and Firefox, CSS3 */
   filter           : alpha(opacity=90);          /* for IE 5 to 7 */
   -ms-filter       : "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* for IE 8 */
}

div#idDivMsgWin h1 {
   font-size       : 14px;
   font-weight     : normal;
   line-height     : 1em;
   text-align      : left;
   text-decoration : none;
   margin          : 0px;
   padding         : 5px 0px 5px 0px;
}

/******************************************************************************/
/** Elements of the home area                                                **/
/******************************************************************************/

/* the headline <div> of an entry */
div#idDivContent div.clDivHomHead {
   background-color : #E5E2CF;
   height           : 22px;
   margin           : 30px 0px 15px 40px;
}
div#idDivContent div.clDivHomHead p {
   font-size   : 12px;
   line-height : 22px;
   padding     : 0px 10px 0px 10px;
   margin      : 0px;
}
div#idDivContent div.clDivHomHead img {
   margin-right : 20px;
}

/* images */
div#idDivContent img.clImgHomArticle {
   margin : 0px 0px 0px 40px;
}


/******************************************************************************/
/** Elements of the gallery                                                  **/
/******************************************************************************/

/* The preview images have a size of 66 x 66 pixles. */

/* Container around all preview images */
div.clDivGalContainer {
   margin : 40px 0px 0px 33px;
}

/* styles of each preview image */
a.clAPreviewImg {
   border        : 1px solid;
   float         : left;
   margin-left   : 10px;
   margin-bottom : 10px;
   padding       :  0px;
}
a.clAPreviewImg:link, a.clAPreviewImg:visited { border-color : White;   }
a.clAPreviewImg:hover, a.clAPreviewImg:active { border-color : #8B0000; }

/******************************************************************************/
/** Elements of the costumer area                                            **/
/******************************************************************************/

/* Container around all images */
div#idDivCosContainer {
   margin : 20px 0px 0px 25px;
}

/* Container of each image */
div#idDivCosContainer > div {
   border : 1px solid #444444;
   text-align : center;
   float  : left;
   width:130px;
   overflow:hidden;
   margin-left   : 15px;
   margin-bottom : 15px;
   padding : 5px;
}

div#idDivCosContainer span {
   height : 140px;
   width  : 130px;
}

div#idDivCosContainer form {
   text-align : center;
   margin : 0px;
}

/* Text of the images */
div#idDivCosContainer p, div#idDivCosContainer a {
   font-size : 10px;
   line-height : 1.44em;
   text-align : center;
   margin : 0px;
   padding : 0px;
}