@import url("grid.css") screen;
@import url("text.css") screen;
@import url("forms.css") screen;
@import url("tables.css") screen;

/* wrap width: 970 */
/* sidebar width: 220 */
/* content width: 700 */

html {
    padding: 0;
    margin: 0;
} 
body#generic {
     background-color: #f2f2f2; /* */
    /* background-color: #cadee5; /* */ 
    /* background: #f9f9f9 url(../pattern_01.jpg) repeat-x top; /* */
    /* background: transparent url(http://static.zoom.nl/F3DC31E629BE724913C6813CA3235BCB-nieuwe-lente.jpg) repeat-x top;  /* */
    /* background: #000 url(../backgrounds/happy-new-year.jpg) no-repeat center top; /* */;
    background-attachment:fixed;
}
body#generic #wrap {
    border: 1px solid #c9c9c9;
    background-color: #fff;
    border-radius:12px;
    -moz-border-radius:12px;
    -khtml-border-radius:12px;
    -webkit-border-radius:12px;
    -moz-box-shadow: 0 0 15px 0px #c9c9c9;
    -webkit-box-shadow: 0 0 15px 0px #c9c9c9;
    box-shadow: 0 0 15px 0px #c9c9c9;
}
#logo {
    width: 358px;
    height: 67px;
    background: transparent url(../images/logo.jpg) no-repeat left top;
}
#header-account-box {
    position: absolute;
    top: 20px; right: 35px;
}
#header-account-box a { text-decoration: none; }


/* common items */
ul { list-style-type:circle; }
section, .section { margin-bottom: 30px; }
article, .article { margin-bottom: 20px; }
button img { vertical-align: middle; margin-top: -2px; margin-right: 4px; }

ul.list, ul.list li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* navigation / menus */
nav ul, nav li {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fdfcfa;
}
nav li a {
    display: block;
    padding: 6px 6px 6px 22px;
    border-bottom: 1px solid #f7f1e9;
    vertical-align: middle;
    background: transparent url(../images/menu_icon.gif) no-repeat 8px 10px;
}
nav li a * { vertical-align: middle; }
nav li a:hover  { background-color: #F7F1E9; }
nav li.title,
section.account-info h4 {
    padding: 4px 8px;
    border-bottom: 1px solid #f7f1e9;
    background-color: #F7F1E9;
    background: #fdfcfa url(../images/breadcrumbs.jpg) no-repeat right top;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}


/* sidebar account info */
section.account-info { background-color: #fdfcfa; padding: 0 15px 10px 15px  }
section.account-info h4 { margin-left: -15px; margin-right: -15px; margin-bottom: 10px; }
section.account-info ul, section.account-info ul li { display:block; list-style: none; margin: 0; padding: 0; clear:both; }
section.account-info ul { margin-top:0; margin-bottom: 10px; }
section.account-info ul div.label { float:left; clear:left; margin-right: 5px; padding: 8px 0; width: 70px; }
section.account-info ul div.value { float:left; clear:none; padding: 0px 0; width: 115px; }
section.account-info ul div.valueText { padding-top: 8px; font-weight: bold; }
section.account-info ul div.value select { width: 115px; padding-left: 2px; padding-right:4px; }
section.account-info input[type=text], 
section.account-info input[type=password] { width: 160px; }


/* breadcrumbs */
nav#breadcrumbs {
    background: #fdfcfa url(../images/breadcrumbs.jpg) no-repeat right top;
    border: 1px solid #f7f1e9;
    padding: 6px 8px;
    margin-bottom: 20px;
    border-radius:4px;
    -moz-border-radius:4px;
    -khtml-border-radius:4px;
    -webkit-border-radius:4px;
}
nav#breadcrumbs a, nav#breadcrumbs a * { vertical-align: middle; }


dl { margin-bottom: 20px; }
dl dt { float:left; clear:left; margin-right:10px; padding:8px 0; width:100px; }
dl dd { margin:2px 0; padding: 0; }
dl.address dt { width: 220px; padding: 0; }
dl.contact dt { width: 120px; padding: 0; }
dl.contact dd { padding: 0; }


/* dashboards */
div.iconBox {
    width: 140px;
    height: 80px;
    position: relative;
    display: block;
    float:left;
    clear:none;
    margin-right: 10px;
    text-align: center;
}
div.iconBox img.icon {
    margin: 10px auto;
    width: 35px;
    height: 35px;
    display: block;
    float: none;
    clear: both;
}


/* error, success, notice */
div.notification {
    background: transparent no-repeat 10px 12px;
    padding: 10px 20px 10px 40px;
    margin: 10px 0 20px 0;
    border: 1px solid #000;
}
div.notification.error {
    background-image: url(../icons/16/cross.png);
    background-color: #FFEDEF;
    border-color: #FFC2CA;
    color: #C00;
}
div.notification.success {
    background-image: url(../icons/16/tick.png);
    background-color: #EDFFED;
    border-color: #8DCC8D;
    color: #070;
}
div.notification.notice {
    background-image: url(../icons/16/error.png);
    background-color: #FFF4E5;
    border-color: #FF7701;
    color: #666;
}
div.notification p { 
    margin: 0; 
    padding: 0; 
}

#contactMap {
    border:1px solid #ccc;
    padding:4px;
    margin-top:16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}