@import url( "/shared/css/main.css" ) ;

/* --- MAIN LAYOUT ---------------------------------------------------- */

body 
{
    background: #000 ;
    color: #eee ;
    font-family: "Trebuchet MS", Tahoma ;
}
@media( max-width: 767px ) { body { font-size: 90% ; } }

#container { position: fixed ; top: 70px ; bottom: 0 ; left: 0 ; right: 0 ; overflow-y: auto ; }

#main { margin-right: 300px ; } /* nb: based on a #taka height of 80% */
#main { padding-bottom: 50px ; }

#title { position: fixed ; top: 1em ; right: 7em ; }
@media( max-width: 767px ) { #title { right: 1em ; } }
#title a.tutorialIndex { background: url("/images/nav/rew.png") no-repeat ; }
#title a.tutorialIndex:hover { background: url("/images/nav/rew-hover.png") no-repeat ; }
#title a.tutorialPrintVersion { background: url("/images/nav/record.png") no-repeat ; }
#title a.tutorialPrintVersion:hover { background: url("/images/nav/record-hover.png") no-repeat ; }

#taka { position: fixed ; bottom: 0 ; right: 0 ; height: 80% ; z-index: -999 ; opacity: 0.7 ; }
@media( max-width: 767px ) { #taka { height: auto ; width: 50% ; opacity: 0.4 ; } }

#footer 
{
    position: fixed ;
    z-index: 3 ;
    left: 0.25em ; 
    bottom: 0 ;
    width: 100% ;
    height: 48px ;
    margin-left: 5px ; 
    background: url("/images/footer-bgd.png") top left ;
}

/*
#main { border: 1px dashed red ; }
#title { border: 1px dashed green ; }
*/

/* -------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { color: #d0d0d0 ; }

a { color: #ffffe0 ; text-decoration: none ; border-bottom: 1px dotted #ffffe0 ; }
a:hover { color: #fff ; border-bottom: 1px dotted #fff ; }
a img { border: none ; }

blockquote 
{
    background-image: url("/shared/images/blockquote.png") ;
    background-position: 2px 5px ;
    background-repeat: no-repeat ;
    padding: 5px 0 0 20px ;
    font-family: Georgia ; 
    font-style: italic ;
}

.contentBox { background: url("/images/corners/tl-wide.png") top left no-repeat ; }
.contentBox2 { background: url("/images/corners/br-wide.png") bottom right no-repeat ; padding: 1em ; }

.nav { font-size: 90% ; font-family: Arial ; }
.nav a { text-decoration: none ; background: url("/images/nav/pause.png") no-repeat 0 1px ; padding-left: 20px ; }
.nav a , .nav a:hover { border: none ; }
.nav a:hover { color: #ccc ; background: url("/images/nav/pause-hover.png") no-repeat ; }
.nav a.active { background: url("/images/nav/play-hover.png") no-repeat ; }

#footer .nav { margin-top: 25px ; }
#footer .nav a { color: #444 ; margin-right: 0.5em ; }
#footer .nav a.active { color: #aaa ; }
#footer .nav a:hover , #footer .nav a.active:hover { color: #eee ; }

.audioPlayer { }
.videoPlayer { }

/* --- TUTORIALS -------------------------------------------------- */

.tutorial { }
.tutorial .name { color: #ffffd0 ; font-size: 175% ; font-weight: bold ; margin-bottom: 0.5em ; } 
.tutorial .caption { margin-bottom: 1em ; }
.tutorial .name2 { color: #ffffd0 ; font-size: 125% ; font-weight: bold ; }
.tutorial .caption2 { font-style: italic ; }
.tutorial h2 { color: #ffffd0 ; font-size: 100% ; font-weight: bold ; margin-bottom: 0.5em ; }
.tutorial h3 { color: #ffffd0 ; font-size: 90% ; font-weight: bold ; margin-bottom: 0.5em ; }
.tutorial .discuss { margin-top: 1em ; font-size: 80% ; font-style: italic ; color: #aaa ; }
.tutorial .discuss a { color: #aaa ; }

.tutorial .tabbedPages { margin-top: 2em ; }
.tutorial .tabbedPages .index a { color: #444; }
.tutorial .tabbedPages .index a:hover { color: #ccc ; }
.tutorial .tabbedPages .index a.sel { color: #ffffd0 ; }

.tutorial .section { margin-top: 1em ; padding: 0.25em ; font-size: 90% ; }
.tutorial .section p { margin-top: 1em ; }

.tutorial .timestamp { font-size: 80% ; font-style: italic ; }
@media( max-width: 767px ) {
    .tutorial .videoPlayer { float: none ; margin-right: 0 ; }
    .tutorial .videoPlayer iframe { width: 100% ; }
}
.tutorial .videoPlayer { float: left ; margin: 1em 1em 1em 0 ; }
.tutorial li { margin-left: 1.5em ; }

.tutorial .downloads { margin-top: 2em ; }
.tutorial .downloads a { display: block ; border: none ; font-size: 80% ; font-style: italic ; }
.tutorial .downloads a img { height: 1em ;  }