body{
  font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  font-size: .8em;
  margin:0;
  padding:0;
  line-height:1.2em;
}

h2{
  font-size: 100%;
}

#notes-header{
  margin:10px;
}
#notes-header h2, #notes-header p{
  margin:0;
}

#container-inner {
  margin-right: 10px;
}

#content-top-inner{
  padding:0 50px;
}

#svgbasics { width: 800px; height: 800px; float:left;}
#notes-wrapper{
  height:100%;
  width:38%;
 float:left; 
 border: 1px solid #eee;
 overflow:auto;
}
#notes{ 
 float:left; 
 overflow:auto;
 padding:10px;
}
#notes p{
  margin:0;
  padding: .5em 4px;
}
#notes p.cutNote{
  font-size:80%;
  color:#666;
}
#notes.showThumbs p.hasThumb{
  min-height:37px;
}
#notes.showThumbs p.cutNote.hasThumb{
  min-height:21px;
}
p.Cnote{  border-left: 4px solid #FF001B;}
p.Dnote{  border-left: 4px solid #3944F4;}
p.Mnote{  border-left: 4px solid #00D345;}
p.Cnote.Dnote{  border-left: 4px solid #ccc;}
p.Cnote.Mnote{  border-left: 4px solid #ccc;}
p.Mnote.Dnote{  border-left: 4px solid #ccc;}
p.hoveredNote{  background-color:#ff9;  }
p.selectedNote{  background-color:#ff5;  }

.hideNote{ display:none; }
.filmmakingNote, #filmmakingOptionLabel{
  color: #55B;
  font-style: italic;
}
#notes-header input[type="checkbox"]{
  margin-left:10px;
}

.thumb, .cutThumb{
   float:left;
   display:block;
   margin-right:3px;  
   text-decoration: underline;
   vertical-align: bottom;
   font-size: 75%;
   color:transparent;
   padding:0 6px;
}
.thumb {
   background: url(images/sprite-thumbs.png) no-repeat top left;
   width: 60px; /* 70px - 10px for padding*/ 
   height: 37px; 
}
.cutThumb {
   background: url(images/sprite-cutThumbs.png) no-repeat top left;
   width: 30px; /* 40px - 10px for padding */
   height: 21px;
}
.hideThumb{  display:none; }

#thumb-c2{ background-position: 0 0; } 
#thumb-m2{ background-position: 0 -47px;} 
#thumb-d2{ background-position: 0 -94px;} 
#thumb-c0{ background-position: 0 -141px;} 
#thumb-d3{ background-position: 0 -188px;} 
#thumb-m3{ background-position: 0 -235px;} 
#thumb-d4{ background-position: 0 -282px;} 
#thumb-m4{ background-position: 0 -329px;} 
#thumb-d5{ background-position: 0 -376px;} 
#thumb-c1{ background-position: 0 -423px;} 
#thumb-m5{ background-position: 0 -470px;} 
#thumb-m0{ background-position: 0 -517px;} 
#thumb-d6{ background-position: 0 -564px;} 
#thumb-m6{ background-position: 0 -611px;} 
#thumb-d7{ background-position: 0 -658px;} 
#thumb-c3{ background-position: 0 -705px;} 
#thumb-d8{ background-position: 0 -752px;} 
#thumb-m7{ background-position: 0 -799px;} 
#thumb-d9{ background-position: 0 -846px;} 
#thumb-m8{ background-position: 0 -893px;} 
#thumb-d10{ background-position: 0 -940px;} 
#thumb-m9{ background-position: 0 -987px;} 
#thumb-d0{ background-position: 0 -1034px;} 
#thumb-c4{ background-position: 0 -1081px;} 
#thumb-m10{ background-position: 0 -1128px;} 
#thumb-c5{ background-position: 0 -1175px;} 
#thumb-m11{ background-position: 0 -1222px;} 
#thumb-d11{ background-position: 0 -1269px;} 
#thumb-m1{ background-position: 0 -1316px;} 
#thumb-d1{ background-position: 0 -1363px;} 

#cutThumb-c2m0{ background-position: 0 0;} 
#cutThumb-m0d0{ background-position: 0 -26px;} 
#cutThumb-d0m1{ background-position: 0 -52px;} 
#cutThumb-m1d1{ background-position: 0 -78px;} 
#cutThumb-m2d2{ background-position: 0 -104px;} 
#cutThumb-d2c0{ background-position: 0 -130px;} 
#cutThumb-c0d3{ background-position: 0 -156px;} 
#cutThumb-m3d4{ background-position: 0 -182px;} 
#cutThumb-d4m4{ background-position: 0 -208px;} 
#cutThumb-m4d5{ background-position: 0 -234px;} 
#cutThumb-d5c1{ background-position: 0 -260px;} 
#cutThumb-m5d6{ background-position: 0 -286px;} 
#cutThumb-d6m6{ background-position: 0 -312px;} 
#cutThumb-m6d7{ background-position: 0 -338px;} 
#cutThumb-d7c3{ background-position: 0 -364px;} 
#cutThumb-c3d8{ background-position: 0 -390px;} 
#cutThumb-d8m7{ background-position: 0 -416px;} 
#cutThumb-m7d9{ background-position: 0 -442px;} 
#cutThumb-d9m8{ background-position: 0 -468px;} 
#cutThumb-m8d10{ background-position: 0 -494px;} 
#cutThumb-d10m9{ background-position: 0 -520px;} 
#cutThumb-m9c4{ background-position: 0 -546px;} 
#cutThumb-c5m11{ background-position: 0 -572px;} 
#cutThumb-m11d11{ background-position: 0 -598px;} 


.thumb:hover, .cutThumb:hover{
  color: white;
}


#thumbZoomFrame{
  position: absolute;
  right:40%;
  
  width: 650px;
  height: 350px;
  z-index: 2;
  background:white;
  border:#ccc 1px solid;
}
#zoomClose{
  float: right;
  width: 16px;
  height: 16px;
  background: url(images/close_sprite.gif) no-repeat;
  margin: 4px;
  cursor:pointer;
}
#zoomClose:hover{
  background-position: -16px 0;
}
#zoomImages{
  padding: 15px 15px 15px;
  text-align:right;
}
#zoomImages img {
  border: 1px solid #DDD;
}