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

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

body
{
    margin: 10px ;
    background: #fff ; 
    color: #222 ;
    font-family: "Trebuchet MS", "Tahoma" ;
}

#header
{ 
    background: url( "/images/header/background.png" ) ; 
    height: 100px ; 
    border: 1px solid #888 ; 
    margin-bottom: 30px ; 
}
#header-taka { position: absolute ; top: 2px ; left: 5px ; height: 125px ; }
#header-logo { position: absolute ; top: 25px ; left: 80px ; height: 50px ; }

#nav { background: transparent ; position: absolute ; top: 70px ; right: 12px ; }
#nav-home { display: block ; float: left ; width: 66px ; height: 40px ; background: url("/images/nav/home.png") ; }
#nav-home:hover { background: url("/images/nav/home-hot.png") ; }
#nav-tutorials { display: block ; float: left ; width: 86px ; height: 40px ; background: url("/images/nav/tutorials.png") ; }
#nav-tutorials:hover { background: url("/images/nav/tutorials-hot.png") ; }
#nav-music { display: block ; float: left ; margin-left: -8px ; width: 65px ; height: 40px ; background: url("/images/nav/music.png") ; }
#nav-music:hover { background: url("/images/nav/music-hot.png") ; }
#nav-about { display: block ; float: left ; margin-left: -8px ; width: 67px ; height: 40px ; background: url("/images/nav/about.png") ; }
#nav-about:hover { background: url("/images/nav/about-hot.png") ; }

#nav2 { background: transparent ; position: absolute ; top: 115px ; right: 10px ; }
#nav2-email { position: relative ; top: -4px ; }
#nav2-privacy { position: relative ; left: 2px ; top: 2px ; }

#nav a { border: none ; }
#nav2 a { border: none ; }

#footer { }

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

a { color: #222 ; text-decoration: none ; border-bottom: 1px dotted #222 ; }
a:hover { color: #000 ; border-bottom: 1px solid #000 ; }
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 ;
}

.clear { clear: all ; }

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

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

.tutorial .tabbedPages { margin-top: 2em ; }
.tutorial .tabbedPages .index a { }
.tutorial .tabbedPages .index a:hover { }
.tutorial .tabbedPages .index a.sel { }

.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 ; }
.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 ;  }

/* NOTE: This makes tutorials look similar to header boxes. */
.tutorial .name 
{
    padding: 0 .5em .25em .5em ; 
    background: url("/shared/images/headerBox/yellow.gif") repeat-x ; border-top: 1px solid #dbd37d ; 
}
.tutorial { border: 0 solid #dbd37d ; border-width: 0 1px 1px; }
.tutorial>.caption { padding: 0 1em 0 1em ; }
.tutorial .discuss { padding: 0 1em 0 1em ; }
.tutorial .tabbedPages { padding: 0 1em 0 1em ; }