/*
 * Site internet de Jeffrey Thrasher
 * Copyright Samalyse SARL 2009
 * Auteur  : Olivier Guilyardi <olivier samalyse com>
 * Licence : CeCILL - http://www.cecill.info
 */

/* General */
body { margin: 0; padding: 0; } 
body, .edit input, .edit-area textarea { font-size: 11px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; color: #666; }
.layout { width: 880px; position: relative; margin: 20px auto 0 auto; left: -73px;}    
.main-copy { margin-left: 115px; padding-left: 5px; margin-top: 10px; padding-top: 84px; 
    border-left: solid 1px #ff3300; position: relative; }
.title { background-image: url('../img/logo.gif'); position: absolute; top: -8px; right: -38px; 
    width: 476px; padding: 20px 0 0 0; overflow: hidden; height: 0px !important;
    height /**/:20px; /* for IE5/Win only */ }
.subtitle { position: absolute; right: -37px; top: 59px; color: #ff3300; 
    font-weight: normal; border-right: solid 1px #ff3300; padding: 4px 9px; height: 250px;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}    
.subtitle h2 { float: left; font-size: 18px; margin: 0; padding: 0; font-weight: normal; }
.subtitle h3 { float: left; font-size: 18px; margin: 0 0 0 11px; padding: 0 0 0 11px; border-left: solid 1px #ff3300; }
.wazing {clear: both; }    
form {margin: 0; padding: 0;}
.notfound p { font-size: 12px; padding: 30px 10px; }

/* Navigation */
.navigation { position: absolute; top: 0; left: 1px; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
.navigation ul { list-style-type: none; font-size: 15px; margin: 0;}
.navigation a, .subtitle a { color: #666; text-decoration: none; }
.navigation .active, .subtitle a { color: #ff3300; }
.navigation a:hover, .subtitle a:hover { color: #ff6633; }
.navigation li { margin-bottom: 1px; text-align: right; }

/* Administration */    
.panel { position: absolute;  
    padding: 0 10px 10px 10px; z-index: 500; border: solid 2px #999;
    background: #F8F8F8; display: none; background: black; color: white;}
.panel .buttons { text-align: right; clear: both; padding-top: 8px; }
.panel .buttons .save { color: #ff3300; }
.panel .buttons button { margin-left: 5px; }
.panel p { cursor: move; }
.panel label { display: block; font-weight: bold; margin-top: 1em; color: #ff3300; }
.panel label i { font-weight: normal;}
.panel input, .panel textarea { width: 690px; margin-top: 5px;}
.panel-triggers { position: absolute; top: 62px; left: 126px; }
.panel-triggers button { font-size: 10px; }
.admin-login { left: 131px; top: 0px; }
.admin-login input {width: 250px;}
.admin-login p {color: #ccc;}
.resources-reorder { top: 91px; left: 125px; width: 466px; }
.resources-reorder ul { list-style-type: none; margin: 0; padding: 0; }
.resources-reorder li { float: left; margin: 5px; width: 80px; height: 80px; }
.resources-reorder img { cursor: move; }
.resources-reorder img.video { width: 80px; height: 60px; padding: 10px 0; background: black; }
.loader { position: fixed; right: 10px; bottom: 10px; background: url('../img/loader.gif'); width: 220px; height: 19px;}
.metadata-editor { top: 150px; left: 125px; width: 700px; }
.media-item-editor input.radio { width: auto; margin: 0 0.5em; }
.media-item-editor label.radio { display: static; }
.media-item-editor { top: 220px; left: 150px;}
.resource .media .edit-button { width: 30px; height: 30px; position: absolute; top: 4px; right: 4px; 
    background: url('../img/pencil-off.gif'); cursor: pointer; z-index: 100; }
.resource .media .edit-button-active, .resource .media .edit-button-selected { background: url('../img/pencil.gif')}
.admin-bar {top: -16px; right: -35px; color: #333; position: absolute;}
.admin-bar a {color: #ff3300;}

/* Pied de page */
.footer { position: absolute; bottom: 20px; left: 6px; font-size: 11px; text-align: right;
          font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #999; }
.footer a { text-decoration: none; color: #999; }          
.credits-link:hover, .footer .credits-link-active { color: #ff6633; }
.credits { font-size: 11px; height: 0; overflow: hidden; color: #777; width: 100px; } 
.credits a:hover, .credits .name-animated { color: #ff6633; }
.credits .design { margin: 1em 0; }           
.credits a { display: block;}
.credits .name { overflow: hidden; height: 15px; padding-right: 1px;}
.credits .name span { display: block; margin-top: -15px; }
/*
.credits .design .name { color: #FB0089;  }
.credits .development .name { color: #343bbf; }
*/

/* Liste de ressources (collections dans une categories ou images dans une collections) */
.resources-list { position: relative; }
.resources-list .supercontainer { width: 790px; overflow: auto;position: relative; }
.resources-list .empty-list { height: 148px; background: #DDD; }
.resources-list .container { position: relative; width: 10000px; }
.resources-list .subcontainer { float: left; position: relative; }
.resources-list .scrollbar { position: relative; height: 21px; left: 5px; width: 780px; display: none; 
    z-index: 100; }
.resources-list .scrollbar .arrow { display: none; position: absolute;
    width: 15px; padding: 21px 0 0 0; overflow: hidden; height: 0px !important;
    height /**/:21px; /* for IE5/Win only */ }
.resources-list .scrollbar .left { left: -10px; background-image: url('../img/arrow_left.gif'); }
.resources-list .scrollbar .right { right: -10px; background-image: url('../img/arrow_right.gif'); }
.resources-list .scrollbar .line { background: #ff3300; width: 780px; height: 1px; position: absolute; left: 0; 
    top: 10px; font-size: 0px; overflow: hidden; cursor: pointer; }
.resources-list .scrollbar .cursor { display: block; width: 80px; height: 15px; position: absolute; 
    left: 300px; top: 3px; padding: 6px 0; z-index: 300; }
.resources-list .scrollbar .cursor .indicator { background: #666; height: 3px; font-size: 0px; }
.resources-list .scrollbar .cursor:hover .indicator { background: #999; }
.category .resources-list .scrollbar { position: absolute; top: 158px; }


.resource { width: 148px; float: left; margin: 5px; position: relative; }
.resource .media { width: 148px; height: 148px; position: absolute; top: 0px; }
.resource .media a { width: 148px; height: 148px; overflow: hidden; display: block; }
.resource .media .active, .resource .media .hover { width: 144px; height: 144px; position: absolute; 
    top: 0px; border: solid 2px #ff3300; cursor: pointer; }
.resource .media .active-mask { width: 148px; height: 148px; position: absolute; 
    top: 0px; border: none; cursor: pointer; background: #ff3300; }
.resource .media .video-icon { width: 148px; height: 25px; position: absolute; bottom: 0px; 
    background: url('../img/video.gif') no-repeat left bottom; }
.resource .metadata { padding-top: 148px; }
.category .resources-list .scrollable .resource .metadata { padding-top: 166px; }
.resource h2 { font-size: 13px; margin-top: 10px; margin-bottom: 0; 
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
.resource p { margin-top: 2px; padding: 1px; line-height: 1.4em; }
.resource img { width: 100%; height: 100%; border: 0; }
.resource img.video { height: 111px; padding: 18px 0 19px 0; background: black;}
.resource .empty a { font-size: block; text-align: center; font-size: 14px; width: 146px; 
    height: 146px; font-style: italic; padding-top: 30px; text-decoration: none; color: #666; }

/* Détail d'un item/collection */
.media-detail { margin: 5px 0 5px 5px; float: left; position: relative; }
.media-detail .item { position: absolute; top: 0; }
.media-detail .caption {margin-top: 4px; font-size: 9px; font-style: italic;}
.collection-metadata { padding-left: 580px; width: 203px; }
.collection-metadata p { line-height: 1.4em; margin-top: 4px; padding-top: 0; }
.biography .collection-metadata { margin-top: 10px; padding-left: 330px; width: auto;}
.biography .media-detail {margin-top: 13px;}
.media-detail .empty { height: 400px; background: #ddd; }

/* Contact */
.contact .media-detail {margin-top: 10px;}
.contact .caption { font-size: 13px; font-style: normal; }
.contact form { position: absolute; left: 340px; margin-top: 10px; width: 460px; }
.contact label { display: block; float: left; width: 75px; font-weight: bold; text-align: right;
    padding-right: 8px; padding-top: 2px; font-size: 12px;}
.contact input, .contact textarea { width: 366px; margin-bottom: 7px; border: solid 1px #ccc;}
.contact input.submit { width: auto; background: #666; color: white; margin-left: 83px; padding: 0 19px;
    font-size: 12px; font-weight: bold; }
.contact #contact_country {display: none; }