@import url(../timecontroller/style.css);
@import url(theme-gray.css);



/* main page layout */
html {
    background-color: #BBCCAA;
}
body {
    width: 1024px;		/*Largeur totale*/
    margin: 20px auto;
    /*overflow: hidden;*/
}
header h1 {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}
header p {
    margin-top: 0;
    padding-top: 0;
    /*text-align: right;*/
}
footer {
    padding-top: 1em;
}
footer p {
    margin: 0;
    padding: 0;
    text-align: right;
}

/* default slideshow layout */

#head{
    font-family: arial;
    position: absolute;
    width: 402px;
    height: 445px;
    right: 10px;
    text-align: center;
}

#head img{
    position: relative;
}

#logo{
    font-weight: bold;
    position: relative;
    right: 10px;
    width: 100%;
    text-align: center;
}

#oratitre{
    font-size: 24px;
    width: 100%;
    color: #B91B32;
    position: relative;
    text-align: center;
}

#slideshow {
    top: 44px;
    position: relative;
    width: 100%;
    height: 665px;			/*Hauteur Slideshow*/
    border-radius         : 15px;
    -o-border-radius      : 15px;
    -moz-border-radius    : 15px;
    -webkit-border-radius : 15px;
    box-shadow         : 0px 1px 10px #444; /* color */
    -o-box-shadow      : 0px 1px 10px #444;
    -moz-box-shadow    : 0px 1px 10px #444;
    -webkit-box-shadow : 0px 1px 10px #444;
    background-color: white;
}
video {
    position: absolute;
    top: 15px;
    left: 14px;
}
div#images {
    position: relative;
    top: 20px;
    left: 360px;
    width: 640px;
    height: 480px;
    overflow: hidden;
}
div#images img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -1px;
    top: -1px;
}

/* alternative slideshow layout */
#swap {
    position: absolute;
    left: 360px;
    top: 510px;
    font-size: 22px;
    font-weight: bold;
    /*color: white;*/
    border: none;
    border-radius         : 5px;
    -o-border-radius      : 5px;
    -moz-border-radius    : 5px;
    -webkit-border-radius : 5px;
    cursor: pointer;
    z-index: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    max-width: 24px !important;
    max-height: 24px !important;
    background-image: url(swap.png);
    background-position: center center;
    background-repeat: no-repeat;
}
#swap span {
    display: none;
}
video {
    transition         : all 1s;
    -o-transition      : all 1s;
    -moz-transition    : all 1s;
    -webkit-transition : all 1s;
    z-index: 1;
    border-radius: 15px;
}
div#images {
    transition         : all 1s;
    -o-transition      : all 1s;
    -moz-transition    : all 1s;
    -webkit-transition : all 1s;
    z-index: 1;
}
.swapped video {
    width: 640px !important;
    height: 480px !important;
    transform         : translate(+350px, -390px);
    -o-transform      : translate(+350px, -390px);
    -ms-transform     : translate(+350px, -390px);
    -moz-transform    : translate(+350px, -390px);
    -webkit-transform : translate(+350px, -390px);
}
.swapped div#images {
    width: 320px !important;
    height: 240px !important;
    transform         : translate(-350px, +390px);
    -o-transform      : translate(-350px, +390px);
    -ms-transform     : translate(-350px, +390px);
    -moz-transform    : translate(-350px, +390px);
    -webkit-transform : translate(-350px, +390px);
}

/* Table of Contents */
div.smil-toc {
    border: 1px dashed #94004C;
    height: 140px;
    overflow: auto;
    position: absolute;
    left: 14px;
    bottom: 65px;
    width: 97%;
}
div.smil-toc ul {
    margin: 0;
    margin-top: 0.8em;
    list-style-type: none;
    margin-left: -25px;
}
div.smil-toc ul ul {
    margin-top: 0;
}

div.smil-toc ul li a:hover {
    color : white;
}
div.smil-toc ul li a {
    color: #721E80;
    text-decoration: none;
}
div.smil-toc ul li.current{
    background-color: #AB0253;
    color: white;
}
div.smil-toc ul li:hover {
    background-color: #B7C53C;
    color : white;
}
div.smil-toc ul li{
    margin-left: -10px;
    color: black;
}




/* timeline */
.smil-controlBar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 1000px;
    z-index: 2;
}
.smil-timeline, .smil-timeline a:hover span {
    /*width: 810px;*/
}
.smil-timeSegments, .smil-timeCursor {
    display: block;
}
.smil-timeSlider {
    display: none;
}

/* cross-fade transitions */
.cross-fade div#images img {
    opacity: 0;
    transition         : opacity 1s;
    -o-transition      : opacity 1s;
    -moz-transition    : opacity 1s;
    -webkit-transition : opacity 1s;
}
/*
.cross-fade div#images img[smil=active],
.cross-fade div#images img:first-child[smil=idle] {
  opacity: 1;
  z-index: 1;
}
*/
.cross-fade div#images img[smil=active] {
    opacity: 1;
    z-index: 1;
}

/* slide-in transitions */
.slide-in div#images img {
    transition         :         transform 1s;
    -o-transition      :      -o-transform 1s;
    -moz-transition    :    -moz-transform 1s;
    -webkit-transition : -webkit-transform 1s;
}
.slide-in div#images img[smil=idle] {
    transform         : translate(0, +480px);
    -o-transform      : translate(0, +480px);
    -moz-transform    : translate(0, +480px);
    -webkit-transform : translate(0, +480px);
}
.slide-in div#images img[smil=done] {
    transform         : translate(0, -480px);
    -o-transform      : translate(0, -480px);
    -moz-transform    : translate(0, -480px);
    -webkit-transform : translate(0, -480px);
}