/*
This Stylesheet is used for the Editorial Part of
the iConcerts Site. It should be self-contained, so that
it can be included in other Layouts
*/

/* *****************************************************************
Parts that are already defined but are here so that the Stylesheet 
works on its own. The following lines can be removed if used
inside the iConcert Application. They will be overridden
***************************************************************** */
body {
    font-family:Helvetica, Arial, sans-serif, sans;
    color:#777;
    font-size:12px;
    line-height:125%;
}

a img { border:none; }
a { text-decoration:none; color:#AAA; }
a:active { color:#FFF; }
a:hover, .active { color:#0cace4; }
strong { text-transform:uppercase; }

/* *****************************************************************
Mandatory Parts that define Editorial appearance
***************************************************************** */
.editorial {
    width:100%;
    float:left;
    margin-top:8px;
    color:#AAA;
}

.editorial a {
    color:#FFF;
}

.editorial strong a {
    color:#AAA;
}

.editorial strong a:hover, .editorial strong a.active {
   color:#0cace4 !important;
}

.column1, .column2, .column3, .column4 {
    margin-right:3%;
    float:left;
    overflow:hidden;
}
/* Scalable columns. in comment the expected width 
when the width of the .editorial Element is 757px */ 
.column1 { width:14%; } /* 105px */
.column2 { width:31%; } /* 234px */
.column3 { width:48%; } /* 363px */
.column4 { width:65%; } /* 492px */
.column5 { width:82%; } /* 620px */
.column6 { width:100%; }

/* ruleset for possible layout combos */
.column3 + .column3, .column2 + .column4, .column4 + .column2, 
.column2 + .column4, .column5 + .column1, .column1 + .column5,
.column1 + .column2 + .column3, .column1 + .column3 + .column2, 
.column2 + .column3 + .column1, .column2 + .column1 + .column3,
.column3 + .column1 + .column2, .column3 + .column3 + .column1,
.column1 + .column1 + .column4, .column1 + .column4 + .column1,
.column4 + .column1 + .column1
{ margin-right:0px; float:right; }

.column2 + .column5, .column2 + .column5, .column3 + .column5,
.column4 + .column5, .column5 + .column5
{ clear:both; }

/* set a column explicitly to the right */
.right { margin-right:0%; float:right; }

.flowright { float:right; margin-left:15px; }

.editorial h1 {
    color:#0cace4 !important;
    margin:1em 0em !important;
    font-size:1.6em !important;
}

.editorial h2 {
    color:#FFF !important;
    margin:1em 0em !important;
    font-size:1.4em !important;
    font-weight:bold !important;
}

.editorial > h2, .column1 > h2, .column2 > h2, .column3 > h2, 
.column4 > h2, .column5 > h2 > .column6 > h2 
{
    margin:0em 0em 1em 0em !important;
}

.editorial p { margin:0em 0em 1em 0em; }
.editorial p.lead {
    color:#0cace4;
    margin:1em 0em 1em 0em !important;
    font-weight:bold;
}

.editorial p.lead strong {
    color:#AAA;
    font-weight:normal;
}

.blue {
    color:#0cace4 !important;
}

.editorial p + p.lead {
    margin:0.5em 0em 1em 0em;
}

.editorial img + p {
    margin-top:1em !important;
}

.editorial hr {
    background-color:#666 !important;
    border:0px none;
    color:#666 !important;
    height:1px;
    margin:1em 0em !important;
    width:100%;
    clear:both;
}

.editorial hr {
    background-color:#666 !important;
    border:0px none;
    color:#666 !important;
    height:1px;
    margin:1em 0em !important;
    width:100%;
    clear:both;
}
#whr {
    background-color:#666 !important;
    border:0px none;
    color:#666 !important;
    height:1px;
    margin:0em 0em !important;
    width:100%;
    clear:both;
}
.editorial .bright {
    color:#FFF !important;
}

/** fix for IE 6 to compensate layout combos */
* html #contentArea { overflow-x:hidden; }
* html .editorial { padding-right:3%; }