@charset "utf-8";
/* CSS Document */

/* joined Css for navigation */

#menu1 span, #menu2 span, #menu3 span, #menu4 span, #menu5 span, #menu6 span, #menu7 span, #menu8 span, #menu9 span, #menu1-error span {
  display: none;
  position: absolute;
}
#menu1 a, #menu2 a, #menu3 a, #menu4 a, #menu5 a, #menu6 a, #menu7 a, #menu8 a, #menu9 a,#menu1-error a {
  display: block;
  text-indent: -10000px;
  position: absolute;
  outline: none;
}
#menu1 a:hover, #menu2 a:hover, #menu3 a:hover, #menu4 a:hover, #menu5 a:hover, #menu6 a:hover, #menu7 a:hover, #menu8 a:hover, #menu9 a:hover, #menu1-error a:hover {
  background-position: left bottom;
}
#menu1 a:hover span, #menu2 a:hover span, #menu3 a:hover span, #menu4 a:hover span, #menu5 a:hover span, #menu6 a:hover span, #menu7 a:hover span, #menu8 a:hover span, #menu9 a:hover span, #menu1-error a:hover span {
  display: block;
}

/* individual elements for hover effects on homepage*/

#menu1{
position:relative;
background:url(images/rightanglefilms-logo.png) no-repeat;
margin: 30px 0 0 415px; width:400px; height:125px; z-index: 100;
}
#menu1 .rightanglefilms-logo {
left: 0px; top: 0px; width:400px; height:125px;
background: url(images/rightanglefilms-logo.png) no-repeat;
}
#menu1 .rightanglefilms-logo span {
width: 400px; height: 125px; left: 0px; top: 0px;
background: url(images/rightanglefilms-logo-hover.png) no-repeat;
}
#menu1-error{
position:relative;
background:url(images/rightanglefilms-logo.png) no-repeat;
margin: 30px 0 0 300px; width:400px; height:125px; z-index: 100;
}
#menu1-error .rightanglefilms-logo {
left: 0px; top: 0px; width:400px; height:125px;
background: url(images/rightanglefilms-logo.png) no-repeat;
}
#menu1-error .rightanglefilms-logo span {
width: 400px; height: 125px; left: 0px; top: 0px;
background: url(images/rightanglefilms-logo-hover.png) no-repeat;
}
#menu2{
position:relative;
background: url(images/rightanglefilms-chris-purcell.png) no-repeat;
margin: -100px 0 0 180px; width:184px; height:194px; z-index: 100;
}
#menu2 .rightanglefilms-chris-purcell {
left: 0px; top: 0px; width:184px; height:194px;
background: url(images/rightanglefilms-chris-purcell.png) no-repeat;
}
#menu2 .rightanglefilms-chris-purcell span {
width: 184px; height: 194px; left: 0px; top: 0px;
background: url(images/rightanglefilms-chris-purcell-hover.png) no-repeat;
}
#menu3{
position:relative;
background: url(images/rightanglefilms-documentaries.png) no-repeat;
margin: 0px 0 0 130px; width:340px; height:200px; z-index: 100;
}
#menu3 .rightanglefilms-documentaries {
width:340px; height:200px; left: 0px; top: 0px;
background: url(images/rightanglefilms-documentaries.png) no-repeat;
}
#menu3 .rightanglefilms-documentaries span {
width: 340px; height: 200px; left: 0px; top: 0px;
 background: url(images/rightanglefilms-documentaries-hover.png) no-repeat;
}
#menu4{
position:relative;
background: url(images/rightanglefilms-branding-sponsored-ads.png) no-repeat;
margin: -330px 0 0 440px; width:330px; height:220px; z-index: 100;
}
#menu4 .rightanglefilms-branding-sponsored-ads {
width:330px; height:220px; left: 0px; top: 0px;
background: url(images/rightanglefilms-branding-sponsored-ads.png) no-repeat;
}
#menu4 .rightanglefilms-branding-sponsored-ads span {
width: 330px; height: 220px; left: 0px; top: 0px;
background: url(images/rightanglefilms-branding-sponsored-ads-hover.png) no-repeat;
}
#menu5{
position:relative;
background: url(images/rightanglefilms-experimental.png) no-repeat;
margin: -150px 0 0 750px; width:221px; height:200px; z-index: 100;
}
#menu5 .rightanglefilms-experimental {
width:221px; height:200px; left: 0px; top: 0px;
background: url(images/rightanglefilms-experimental.png) no-repeat;
}
#menu5 .rightanglefilms-experimental span {
width: 221px; height: 200px; left: 0px; top: 0px;
background: url(images/rightanglefilms-experimental-hover.png) no-repeat;
}
#menu6{
position:relative;
background: url(images/rightanglefilms-image-pieces.png) no-repeat;
margin: 50px 0 0 150px; width:350px; height:220px; z-index: 100;
}
#menu6 .rightanglefilms-image-pieces {
width:350px; height:220px; left: 0px; top: 0px;
background: url(images/rightanglefilms-image-pieces.png) no-repeat;
}
#menu6 .rightanglefilms-image-pieces span {
width: 350px; height: 220px; left: 0px; top: 0px;
background: url(images/rightanglefilms-image-pieces-hover.png) no-repeat;
}
#menu7{
position:relative;
background: url(images/rightanglefilms-mood-piece-tone-poem.png) no-repeat;
margin: -300px 0 0 500px; width:255px; height:250px; z-index: 100;
}
#menu7 .rightanglefilms-mood-piece-tone-poem {
width:255px; height:250px; left: 0px; top: 0px;
background: url(images/rightanglefilms-mood-piece-tone-poem.png) no-repeat;
}
#menu7 .rightanglefilms-mood-piece-tone-poem span {
width:255px; height:250px; left: 0px; top: 0px;
background: url(images/rightanglefilms-mood-piece-tone-poem-hover.png) no-repeat;
}
#menu8{
position:relative;
background: url(images/rightanglefilms-recent.png) no-repeat;
margin: -190px 0 0 750px; width:210px; height:235px; z-index: 100;
}
#menu8 .rightanglefilms-recent {
width:210px; height:235px; left: 0px; top: 0px;
background: url(images/rightanglefilms-recent.png) no-repeat;
}
#menu8 .rightanglefilms-recent span {
width: 210px; height: 235px; left: 0px; top: 0px;
background: url(images/rightanglefilms-recent-hover.png) no-repeat;
}

#pen{
position:relative;
background: url(images/rightanglefilms-red-pen.png) no-repeat;
margin: -90px 0 0 500px; width:315px; height:115px; z-index: 100;
}
#menu9{
position:relative;
background: url(images/non-broadcast.png) no-repeat;
margin: -70px 0 0 50px; width:152px; height:80px; z-index: 100;
}
#menu9 .rightanglefilms-non-broadcast {
width:152px; height:80px; left: 0px; top: 0px;
background: url(images/non-broadcast.png) no-repeat;
}
#menu9 .rightanglefilms-non-broadcast span {
width: 152px; height: 80px; left: 0px; top: 0px;
background: url(images/non-broadcast-hover.png) no-repeat;
}
/*navigation on all pages left hand side*/

#nav{
float:left;
margin: 27px 0 0 -170px;
width: 80px;
height: 600px;
z-index: 100;
}
#nav1 span, #nav2 span, #nav3 span, #nav4 span, #nav5 span, #nav6 span, #nav7 span, #nav8 span, #nav9 span, #nav10 span {
  display: none;
  position: absolute;
}
#nav1 a, #nav2 a, #nav3 a, #nav4 a, #nav5 a, #nav6 a, #nav7 a, #nav8 a, #nav9 a, #nav10 a {
  display: block;
  text-indent: -10000px;
  position: absolute;
  outline: none;
}
#nav1 a:hover, #nav2 a:hover, #nav3 a:hover, #nav4 a:hover, #nav5 a:hover, #nav6 a:hover, #nav7 a:hover, #nav8 a:hover, #nav9 a:hover, #nav10 a:hover {
  background-position: left bottom;
}
#nav1 a:hover span, #nav2 a:hover span, #nav3 a:hover span, #nav4 a:hover span, #nav5 a:hover span, #nav6 a:hover span, #nav7 a:hover span, #nav8 a:hover span, #nav9 a:hover span, #nav10 a:hover span {
  display: block;
}
#nav1 {
position:relative;
float: left;
background-image:url(images/nav1.png);
margin:0 0 0 45px; height: 40px; width:80px; z-index: 100;
}
#nav2 {
position:relative;
float: left;
background-image:url(images/nav2.png);
margin: 4px 0 0 40px; height: 40px; width:80px; z-index: 100;
}
#nav3 {
position:relative;
float: left;
background-image:url(images/nav3.png);
margin:4px 0 0 35px; height: 40px; width:80px; z-index: 100;
}
#nav4 {
position:relative;
float: left;
background-image:url(images/nav4.png);
margin:4px 0 0 28px; height: 40px; width:80px; z-index: 100;
}
#nav5 {
position:relative;
float: left;
background-image:url(images/nav5.png);
margin:3px 0 0 22px; height: 40px; width:80px; z-index: 100;
}
#nav6 {
position:relative;
float: left;
background-image:url(images/nav6.png);
margin:4px 0 0 17px; height: 40px; width:80px; z-index: 100;
}
#nav7 {
position:relative;
float: left;
background-image:url(images/nav7.png);
margin:1px 0 0 11px; height: 40px; width:80px; z-index: 100;
}
#nav8 {
position:relative;
float: left;
background-image:url(images/nav8.png);
margin:2px 0 0 5px; height: 40px; width:80px; z-index: 100;
}
#nav9 {
position:relative;
float: left;
background-image:url(images/nav9.png);
margin:3px 0 0 0px; height: 40px; width:80px; z-index: 100;
}
#nav10 {
position:relative;
float: left;
background-image:url(images/nav10.png); 
margin:2px 0 0 -5px; height: 40px; width:80px; z-index: 100;
}
#nav1 .nav1 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav1.png) no-repeat;
}
#nav2 .nav2 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav2.png) no-repeat;
}
#nav3 .nav3 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav3.png) no-repeat;
}
#nav4 .nav4 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav4.png) no-repeat;
}
#nav5 .nav5 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav5.png) no-repeat;
}
#nav6 .nav6 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav6.png) no-repeat;
}
#nav7 .nav7 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav7.png) no-repeat;
}
#nav8 .nav8 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav8.png) no-repeat;
}
#nav9 .nav9 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav9.png) no-repeat;
}
#nav10 .nav10 {
left: 0px; top: 0px; height: 40px; width:80px; background: url(images/nav10.png) no-repeat;
}
#nav1 .nav1 span {
height: 40px;
width:80px;
  background: url(images/nav1-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:100;
}
#nav2 .nav2 span {
height: 40px; width:80px;  background: url(images/nav2-hover.png) no-repeat; left: 0px; top: 0px; z-index:100;
}
#nav3 .nav3 span {
height: 40px; width:80px;   background: url(images/nav3-hover.png) no-repeat;  left: 0px; top: 0px;  z-index:100;
}
#nav4 .nav4 span {
height: 40px;
width:80px;
  background: url(images/nav4-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:100;
}
#nav5 .nav5 span {
height: 40px;
width:80px;
  background: url(images/nav5-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:100;
}
#nav6 .nav6 span {
height: 40px;
width:80px;
  background: url(images/nav6-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:100;
}
#nav7 .nav7 span {
height: 40px; width:80px; left: 0px; top: 0px;
background: url(images/nav7-hover.png) no-repeat;
z-index:100;
}
#nav8 .nav8 span {
height: 40px; width:80px; left: 0px; top: 0px;
background: url(images/nav8-hover.png) no-repeat;
z-index:100;
}
#nav9 .nav9 span {
height: 40px; width:80px; left: 0px; top: 0px;
background: url(images/nav9-hover.png) no-repeat;
z-index:100;
}
#nav10 .nav10 span {
height: 40px; width:80px; left: 0px; top: 0px;
background: url(images/nav10-hover.png) no-repeat;
z-index:100;
}

/* navigation on the bottom of video pages */

#nav-video{
float:left;
margin: 60px 0 0 10px;
width: 990px;
height: 25px;
z-index: 110;
}
#nav-video1 span, #nav-video2 span, #nav-video3 span, #nav-video4 span, #nav-video5 span, #nav-video6 span, #nav-video7 span, #nav-video8 span, #nav-video9 span, #nav-video10 span, #video-bg2 span {
  display: none;
  position: absolute;
}
#nav-video1 a, #nav-video2 a, #nav-video3 a, #nav-video4 a, #nav-video5 a, #nav-video6 a, #nav-video7 a, #nav-video8 a, #nav-video9 a, #nav-video10 a , #video-bg2 a{
  display: block;
  text-indent: -10000px;
  position: absolute;
  outline: none;
}
#nav-video1 a:hover, #nav-video2 a:hover, #nav-video3 a:hover, #nav-video4 a:hover, #nav-video5 a:hover, #nav-video6 a:hover, #nav-video7 a:hover, #nav-video8 a:hover, #nav-video9 a:hover, #nav-video10 a:hover {
  background-position: left bottom;
}
#nav-video1 a:hover span, #nav-video2 a:hover span, #nav-video3 a:hover span, #nav-video4 a:hover span, #nav-video5 a:hover span, #nav-video6 a:hover span, #nav-video7 a:hover span, #nav-video8 a:hover span, #nav-video9 a:hover span, #nav-video10 a:hover span {
  display: block;
}
#nav-video1 {
position:relative;
float: left;
background-image:url(images/nav-video1.png) no-repeat;
margin:0 0 0 45px;
height: 25px;
width:39px;
}
#nav-video2 {
position:relative;
float: left;
background-image:url(images/nav-video2.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:54px;
}
#nav-video3 {
position:relative;
float: left;
background-image:url(images/nav-video3.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:105px;
}
#nav-video4 {
position:relative;
float: left;
background-image:url(images/nav-video4.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:67px;
}
#nav-video5 {
position:relative;
float: left;
background-image:url(images/nav-video5.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:105px;
}
#nav-video6 {
position:relative;
float: left;
background-image:url(images/nav-video6.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:105px;
}
#nav-video7 {
position:relative;
float: left;
background-image:url(images/nav-video7.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:105px;
}
#nav-video8 {
position:relative;
float: left;
background-image:url(images/nav-video8.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:60px;
}
#nav-video9 {
position:relative;
float: left;
background-image:url(images/nav-video9.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:60px;
}
#nav-video10 {
position:relative;
float: left;
background-image:url(images/nav-video10.png) no-repeat;
margin: 0px 0 0 15px;
height: 25px;
width:44px;
}

#nav-video1 .nav-video1 {
left: 0px; top: 0px; height: 25px; width:39px; background: url(images/nav-video1.png) no-repeat;
}
#nav-video2 .nav-video2 {
left: 0px; top: 0px; height: 25px; width:54px; background: url(images/nav-video2.png) no-repeat;
}
#nav-video3 .nav-video3 {
left: 0px; top: 0px; height: 25px; width:105px; background: url(images/nav-video3.png) no-repeat;
}
#nav-video4 .nav-video4 {
left: 0px; top: 0px; height: 25px; width:67px; background: url(images/nav-video4.png) no-repeat;
}
#nav-video5 .nav-video5 {
left: 0px; top: 0px; height: 25px; width:105px; background: url(images/nav-video5.png) no-repeat;
}
#nav-video6 .nav-video6 {
left: 0px; top: 0px; height: 25px; width:105px; background: url(images/nav-video6.png) no-repeat;
}
#nav-video7 .nav-video7 {
left: 0px; top: 0px; height: 25px; width:105px; background: url(images/nav-video7.png) no-repeat;
}
#nav-video8 .nav-video8 {
left: 0px; top: 0px; height: 25px; width:60px; background: url(images/nav-video8.png) no-repeat;
}
#nav-video9 .nav-video9 {
left: 0px; top: 0px; height: 25px; width:60px; background: url(images/nav-video9.png) no-repeat;
}
#nav-video10 .nav-video10 {
left: 0px; top: 0px; height: 25px; width:44px; background: url(images/nav-video10.png) no-repeat;
}
#nav-video1 .nav-video1 span {
height: 25px;
width:39px;
  background: url(images/nav-video1-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:120;
}
#nav-video2 .nav-video2 span {
height: 25px; width:54px;  background: url(images/nav-video2-hover.png) no-repeat; left: 0px; top: 0px; z-index:120;
}
#nav-video3 .nav-video3 span {
height: 25px; width:105px;   background: url(images/nav-video3-hover.png) no-repeat;  left: 0px; top: 0px;  z-index:120;
}
#nav-video4 .nav-video4 span {
height: 25px;
width:67px;
  background: url(images/nav-video4-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:120;
}
#nav-video5 .nav-video5 span {
height: 25px;
width:105px;
  background: url(images/nav-video5-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:120;
}
#nav-video6 .nav-video6 span {
height: 25px;
width:105px;
  background: url(images/nav-video6-hover.png) no-repeat;
  left: 0px;
  top: 0px;
  z-index:120;
}
#nav-video7 .nav-video7 span {
height: 25px; width:105px; left: 0px; top: 0px;
background: url(images/nav-video7-hover.png) no-repeat;
z-index:120;
}
#nav-video8 .nav-video8 span {
height: 25px; width:60px; left: 0px; top: 0px;
background: url(images/nav-video8-hover.png) no-repeat;
z-index:120;
}
#nav-video9 .nav-video9 span {
height: 25px; width:60px; left: 0px; top: 0px;
background: url(images/nav-video9-hover.png) no-repeat;
z-index:120;
}
#nav-video10 .nav-video10 span {
height: 25px; width:44px; left: 0px; top: 0px;
background: url(images/nav-video10-hover.png) no-repeat;
z-index:120;
}
#error-message {
background:url(images/Error.png) no-repeat;
height: 30px; width:500px;
margin: 250px 0 0 250px;
text-indent: -10000px;
}