/* start of new style files for music system. 

first, prepare some basic styles for divs and tables, that make 
sure our flow model will work correctly.

this file contains the generics, such as the default behaviour of images, links, form behaviours...
*/

/* PAGE FLOW BEHAVIOUR  */

div {
    border      : 0px;
    margin      : 0px;
    padding     : 0px;
    position    : relative; 
    min-width:0;
}
td, table, tr, tbody {
    border          : 0px;
    border-spacing  : 0px;
    border-collapse : collapse;
    margin          : 0px;
    padding         : 0px;
    vertical-align  : top;
}   

/* by default, collapse ul top and bottom (IE leaves too much whitespace) */
ul {
    margin-top : 0em;
    margin-bottom : 0em;
}

/* BASIC FONT STUFF */

select, input, body, p, td, textarea { 
	font-family	    : Verdana, Arial, Helvetica, Sans-serif;
	font-size		: 11px;	
}

/* HEADERS */

.headerbox {
    border-top-style : solid;
    border-top-width : 1px;
    border-top-color : #999999;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-bottom-color : #999999;
}

.header1 {  
    font-weight : bold;   
    font-family : arial; 
    font-size   : 130%; 
    margin      : 0.5em 0 0 0;
} 
.header2 {  
    font-weight : bold;   
    font-family : arial; 
    font-size   : 110%; 
    margin      : 0.5em 0 0 0;
} 
.header3 {  
    font-style  : italic;   
    font-family : arial; 
    font-size   : 110%; 
    margin      : 0.5em 0 0 0;
} 

/* DEFAULT BEHAVIOR FOR LISTS */
ul {
    list-style-type : none;
}

/* DEFAULT LINK BEHAVIOUR  */

a, a:link, a:visited {
    color           : rgb(27,104,150);
    text-decoration : none;
}
a:hover, a:active {
    color           : rgb(27,104,150);
    text-decoration : none;
}
.lightlink, .lightlink:link, .lightlink:visited {
    color           : rgb(0,0,0);
    text-decoration : none;
}
.lightlink:hover, .lightlink:active {
    color           : rgb(27,104,150);
    text-decoration : none;
}

/* DEFAULT IMAGE BEHAVIOUR  */

img {
    border : 0;
}

/* Icons */
.icon {
    width   : 1em;
    border  : 0px;
}
.al_icon {
    width   : 11px;
}

/* DEFAULT FORM ELEMENTS BEHAVIOUR  */

.confirmform {
    margin          : 0.8em 0.8em 0.8em 0.8em;
    padding         : 0.8em 0.8em 0.8em 0.8em;
    background-color: #ddddee;
    border          : 1px solid #0f0f10;
}
.editform {
    margin          : 0.8em 0.8em 0.8em 0.8em;
    padding         : 0.8em 0.8em 0.8em 0.8em;
    background-color: #ddddee;
    border          : 1px solid #0f0f10;
}
.editform td {
    padding         : 0.2em 0.2em 0.2em 0.2em;
}

select, input { 
    font-size    :100%;
    border-style : solid;
    border-width : 1px;
    border-color : #999999;
    padding-left : 2px;
}
input.noborder { 
    font-size    :100%;
    border-style : none;
    padding-left : 0px;
}
textarea { 
    font-family  : Verdana;
    font-size    : 100%;
    border-style : solid;
    border-width : 1px;
    border-color : #999999;
    padding-left : 2px;
}
textarea:focus,select:focus,input:focus { 
    border-color : #444444;
} 

/* optionbox: the edit links in a header, e.g. at a category page*/
.optionbox {
  margin-top      : 0.1em;
  padding-right   : 0.2em;
  float           : right;
  clear           : right;
  z-index         : 999;
  text-align      : right;
}
div.clearer {
    clear       : both; 
    line-height : 0; 
    height      : 0;
}

/* a simple table style */
td.tablewithborder , table.tablewithborder {
    border          : 1px solid black;
    border-spacing  : 0px;
    border-collapse : collapse;
    margin          : 1px;
    padding         : 1px;
    vertical-align  : top;
}   

    .block {
      /*border: 1px solid red;*/
      display: block;
      padding-top:1.5em;
      padding-right:2em;

    }
    .blockheader {
      border-top: 1px solid #222222;
      border-bottom: 1px solid #222222;
      display:block;
      width : 100%;
      padding-top      : 0.2em;
      padding-bottom      : 0.2em;
      margin-left:0em;
      margin-right:0.2em;
      margin-bottom:0.5em;
    }
    .blockheaderleft {
      /*border: 1px solid yellow;*/
    }
    .blockheaderright {
      /*border: 1px solid black;*/
      float : right;
      clear           : right;
      z-index         : 999;
      text-align      : right;
      padding-right   : 0.2em;
    }
    .blockcontent {
      /*border: 1px solid green;*/
      display:block;
      padding-left:0.5em;
      padding-right:0.5em;
    }

    .browsetable {
      /*border: 1px solid red;*/
      width:100%;
      padding-top:0.2em;
      padding-right:0.2em;

    }
    .browsetable_groupheader {
      border-top: 1px solid #222222;
      border-bottom: 1px solid #222222;
      width : 100%;
      padding-top      : 0.2em;
      padding-bottom      : 0.2em;
      margin-left:0em;
      margin-right:0.2em;
      margin-top:0.5em;
    }    
    .browsetable_colheader {
      padding-top      : 0.1em;
      padding-bottom      : 0.1em;
      padding-left: 0.2em;
      padding-right: 0.2em;
      margin:0em;
      font-style:italic;
    }    
    
    .browsetable_row {
      padding-top      : 0.1em;
      padding-bottom      : 0.1em;
      padding-left: 0.2em;
      padding-right: 0.5em;
      margin:0em;
    }        
/* MESSAGES ETC */

.message {
    font-size:    90%;
    margin: 1em ;
    padding : 1em ;
    background-color: #eeeeee;
    border:1px solid #E0E0E0;
}
.errormessage {
    font-size:90%;
    margin: 1em ;
    padding : 1em ;
    background-color: #ee6666;
    border:1px solid #E0E0E0;
}

/* VALIDATION STYLES */
.errortext {
	color: #ee6666;
	font-weight: bold;
}

/* TAGBOX */
ul.tagbox {
    list-style-type : none;
    padding : 0.1em;
    margin-top: 1em;
    border: 1px solid black;
    width:14.5em;
    max-width:14.5em;
}
li.tagheader {
    padding : 0em 0em 0.5em 0em;
}
li.tag {
    padding: 0.2em 0.2em 0.2em 0.2em ;
    width:14em;
    max-width:14em;
    word-wrap: break-word;
}
li.tag.odd {
    background-color : #eeeeee;
}