/* Schoolyard Justice movie - Main CSS file
Site : www.syjmovie.com
Author : Michael Kubler
email : contact@greyphoenix.biz
*/

/*General overwrites */
html, body { margin: 0% }
body a:link { text-decoration: none; }
body a:visited { text-decoration: none; font-weight: lighter; }
body a:hover { text-decoration: underline; }
h1 { font-family: "trebuchet ms", "lucida grande", georgia, helvetica, arial, sans-serif; }


a:link		{ color: #000080; }
a:visited	{ color: #008080; }
a:hover 	{ color: #800000; }
a:active	{ color: #808000; }


a:link img		{ border-width:0px;}
a:visited img	{ border-width:0px;}
a:hover img	{ border-width:0px;}
a:active img	{ border-width:0px;}




p { font-family: "trebuchet ms", "lucida grande", georgia, helvetica, arial, sans-serif; }

#title {
  border-bottom: thin solid #330000;
  text-align: center;
  background-color: #bebebe;
 /* border-bottom: 5px inset black; */ }


/*
#############
THE MAIN NAV
#############
*/
#mainNav {
  text-decoration: none;
  text-align: left;
  color: white;
  background-color: #600000; /* The RED background colour */
  padding-left: 10em;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 110%;
  font-weight: bold;
  text-transform: capitalize;
  /* Dotted line for Film look */
  border-top: 3px dashed #696969;
  border-bottom: 3px dashed #696969;
  font-family: "trebuchet ms", "lucida grande", georgia, helvetica, arial, sans-serif;
}

/* Set the link styles on the main navigation bar at the top */

/*
#mainNav a:link { text-decoration: none; color: white; }
#mainNav a:visited { text-decoration: none; color: #cccccc; }
#mainNav a:hover { text-decoration: underline; font-weight: inherit; color: white; }
#mainNav a:active { text-decoration: underline; font-weight: bold; color: #cccccc; }
#mainNav a.current { text-decoration: none; font-weight: normal; color: #; }
*/


#mainNav a:link { text-decoration: none; color: white; }
#mainNav a:visited {font-weight: inherit; text-decoration: none; color: #dddddd; }
#mainNav a:hover { font-weight: inherit; text-decoration: underline; color: #eeeeee; }
#mainNav a:active { font-weight: bold; text-decoration: underline; color: white;}
#mainNav a.current { /* The currently viewed page */
	color: #aaaaaa;
	font-weight: bold;
	text-decoration: none;
        cursor: default; }

/* MAIN CONTENT */

#mainContent {
    width: 700px;
    padding-left: 2em;
    text-align: left;
    font-size: 110%;
    position: absolute;
    left: 180px;
    z-index: auto;}

#mainContent img { margin: 1em; /* add some padding around the images */ }

/* For images to be displayed on the sides, esp on the front page */
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
.clearleft { clear: right; }
.clearright { clear: left; }
.small { font-size: 60%; }
.grey { color: grey; }
.no_margin { margin: 0px !important;}
.rightNavIcon { float: right; display: inline; left: -40px; }
/* For the poster image and link */
.poster { float: right; border-width:20px; } 
.QTvideo { border-width: 5px; border-color: grey; }
.movieNav { font-size: 100%; font-weight: bold; margin-left: .5em;}


/* Main Homepage Big Text */
p.homepage {
    font-size: 140%;
    font-weight: bold;
    color: #991111; }

#footer {
    background-color: #bebebe;
    float: left;
    clear: both;
    width: 100%;
    height: 2em;
    padding-bottom: 1em;
    font-size: 90%;
    color: #e9e9e9; }

/* 
#################
## Second Nav ##
################
*/

#secondNav {
    background-color: #eeeeee;
    border-right-width: 2px;
    border-right-style: solid;
    padding-left: .8em;
    float: left;
    height: 850px;
    width: 180px;
    clear: left;
    position: relative;
    border-right: 3px solid black;}

/*
The h3 sidebar was an attempt at getting the 'Biographies' title in the 2nd Nav nicer... It doesn't look that good though..
*/
#secondNav h3 { text-decoration: none; color: black; padding: .3em;
margin: .3em; }
#secondNav h3 a:link { text-decoration: none; color: black;}
#secondNav h3 a:visited { text-decoration: none; color: black; }
#secondNav h3 a:hover { text-decoration: underline;  color: black;}
#secondNav h3 a:active { text-decoration: underline;  color: black; }

#secondNav hr {
  width: 100px;
  float: left;
  margin-left: 20px;}

/* 
##############################
For the side Navigation Menu 
##############################
*/

p.NavMenu a{
font-weight: bold;
font-size: .9em
}
p.NavMenu a:link  {
color: white;
background-color: #600000; /* #CC6600 = Orange   #408080 = Grass Green*/
display: block;
width: 140px;
padding: .3em;
margin: .3em;
font-weight: bold;
}
p.NavMenu a:visited {
color: white;
background-color: #800000;
display: block;
width: 140px;
padding: .3em;
margin: .3em;
font-weight: bold;
}

p.NavMenu a:hover {
color: white;
background-color: #CC6600;
display: block;
width: 140px;
font-weight: bold;
}

p.NavMenu a:active {
color: white;
background-color: #444444;
display: block;
width: 140px;
}

p.NavMenu a.current {
color: white;
background-color: #aaaaaa;
display: block;
width: 140px;
cursor: default;
text-decoration: none;
}

/* To fix IE */
p.NavMenu a.current:link, p.NavMenu a.current:visited, p.NavMenu a.current:hover, p.NavMenu a.current:active{
color: white;
background-color: #aaaaaa;
display: block;
width: 140px;
cursor: default;
text-decoration: none;
}

/*
############
## Footer ##
############
*/
p.HitCounter {
  text-align: left;
  position: absolute;
  left: 30px; }
p.footnote {
    padding-right: 1em;
    text-align: right; }
p.footnote a:link {
    text-decoration: none;
    color: #777777; }
p.footnote a:visited {
    text-decoration: none;
    color: #888888; }
p.footnote a:hover {
    text-decoration: none;
    color: red; } 
p.footnote a:active {
	text-decoration: underline;
        color: red; }


/* Random other stuff... */

abbr, acronym, .help {
    /* As per http://alistapart.com/stories/practicalcss/ -- CSS Help */
  border-bottom: 1px dotted #333;
  cursor: help;
  }

  
/* For the poster on the main page */
a.poster:link img { border-width:20px; border-color:#ffffff; }
a.poster:visited img { border-width:20px; border-color:#ffffff; }
a.poster:hover img { border-width:20px; border-color:#666666; }
a.poster:active img { border-color: black; }


/*
a.gallery_index:link img.gallery_index { border-width:2px; border-color:#ffffff; }
a.gallery_index:visited img.gallery_index { border-width:2px; border-color:#ffffff; }
a.gallery_index:hover img.gallery_index { border-width:2px; border-color:#666666; }
a.gallery_index:active img.gallery_index { border-color: black; }
*/

a img.gallery_index			{ margin: 0px !important; position : relative !important; top: 40px !important; }
a:link img.gallery_index 		{ border-width:3px !important; border-color:#ffffff; }
a:visited img.gallery_index	{ border-width:3px !important; border-color:#ffffff; }
a:hover img.gallery_index 		{ border-width:3px !important; border-color:#666666; }
a:active img.gallery_index 	{ border-color: black; }











/*
########################
### MOVIE FORMAT SELECTION
##########################
*/

p.info { font-family: Verdana, Geneva, sans-serif; }



p.format_list { margin: .3em; margin-top: .5em; vertical-align: middle; }

p.square {
	display: block;
	height: 9em;
	text-align: center;
	margin: 0px;
	margin-top: .5em;
	padding: 0px;
	border: 0px;
}
div.format_chooser {
	width: 12em;
    background-color: #eeeeee;
    border-width: 2px;
    border-style: solid;
	border-color: black;
    padding: 0em;
	margin-left: 1em;
    float: left;
    position: relative; }

/*
div.format_chooser { 
	width: 15em;
	height: 25em;
    background-color: #eeeeee;
    border-width: 2px;
    border-style: solid;
	border-color: black;
    padding: 2em;
	margin: 1em;
    float: left;
    position: relative;}
*/
a.format_chooser p { background-color: #bbbbbb !important; display: block;}
a.format_chooser:hover p { background-color: #888888 !important; display: block;}
a.format_chooser { display: inline; position: relative; border-width:0px; padding: 0px;}
/* a.format_chooser p img { display: block; border-width:0px; padding: 0px; margin: 0px; margin-left: .5em !important;} /* format Icon next to the Quality test */

a.format_chooser span { display: none; border-width:2px}
a.format_chooser:hover span{
	display: block;
	position: absolute;
	left: 10em;
	top: 1em;
	padding: 0px;
	margin: 0px;
	border: 1px solid grey;
	background-color: #DDDDDD;
	z-index: 5 !important;
	text-decoration: none;
	color: black;
	}

	
	
/*
##################################
## Gallery images with shadows ##
#################################
*/

.img_caption {
	margin-bottom: 0px;
	padding-left: 2em;
}


.img_shadow {
  float:left;
  background: url(shadowAlpha.png) no-repeat bottom right !important; /* !! NEED TO CREATE THE SHADOW!! */
  background: url(shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.img_shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
}
  
.img_caption { 
	font-size: 150%;
	text-decoration: underline;
}

.img_framed {
	padding: 10px;
	background-color:  #aaaaaa;
	border: 3px outset #555555;
}

/* 
###############################
##### GALLERY ADMIN PAGES #####
###############################
*/
	
	/* For the poster on the main page */
a.galleryAdmin:link img { border-width:2px; border-color:#ffffff; }
a.galleryAdmin:visited img { border-width:2px; border-color:#ffffff; }
a.galleryAdmin:hover img { border-width:2px; border-color:#666666; }
a.galleryAdmin:active img { border-color: black; }


/* 
			####
## GALLERY ADMIN OPTIONS ## 
			####
*/
.CAPTION { caption-side: top; width: auto; text-align: center; }

.gallery_admin_options input{ width: auto; }
 /* Define row colours */
.gallery_admin_optionsTable_evenRow { background-color: #DDDDDD; }
.gallery_admin_optionsTable_oddRow { background-color:  #EEEEEE; }

/* Mouse Hover colour */
.gallery_admin_optionsTable_evenRow:hover { background-color: #BBBBBB; }
.gallery_admin_optionsTable_oddRow:hover { background-color:  #BBBBBB; }

/* Left/right text align */
.gallery_admin_optionsLeftcolumn { text-align: right;}
.gallery_admin_optionsRightcolumn { text-align: left; }



/* 
			####
## GALLERY ADMIN IMAGES ## 
			####
*/

.gallery_admin_title { width: 15em; margin: .5em;}
.gallery_admin_comment { width: 50em; height: 7em; margin: .5em;}
 /* Define row colours */
.gallery_admin_imagesTable_evenRow { background-color: #DDDDDD; border-bottom: 1px solid grey;}
.gallery_admin_imagesTable_oddRow  { background-color: #EEEEEE; border-bottom: 1px solid grey;}
.gallery_admin_imagesTable_headRow { background-color: #CCCCCC; border-top: 1px solid grey;}
.gallery_admin_imagesTable_footerRow { background-color: #CCCCCC; border-bottom: 1px solid grey;}
/* Mouse Hover colour */
tr.gallery_admin_imagesTable_evenRow:hover { background-color: #BBBBBB; }
tr.gallery_admin_imagesTable_oddRow:hover  { background-color: #BBBBBB; }

/* Left/right text align */
.gallery_admin_imagesTableNumberColumn { text-align: center; border-left: 1px solid grey;}
.gallery_admin_imagesTableDetailsColumn { text-align: left; border-left: 1px solid grey; vertical-align: middle;}
.gallery_admin_imagesTableImageColumn { text-align: center; margin: 0; border-left: 1px solid grey; }
.gallery_admin_imagesTableTitleColumn { text-align: left; margin: 0; border-left: 1px solid grey; }
.gallery_admin_imagesTableCommentColumn { text-align: left; border-left: 1px solid grey; border-right: 1px solid grey; vertical-align: top;}
.gallery_admin_imagesTableTailColumn { text-align: center; border: 1px solid grey; } /* Used in the header or footer Row */


.gallery_admin_hover img{ border-width:5px !important; padding: 0px; /* margin: .5em !important; */ }
a.gallery_admin_hover { display: inline; position: relative; border-width:0px; padding: 0px;}
a.gallery_admin_hover span { display: none; border-width:2px}
a.gallery_admin_hover:hover span{
	display: block;
	position: absolute;
	right: 90px;
	bottom: -100px;
	padding: 0px;
	margin: 0px;
	border: 1px solid grey;
	background-color: #FFFFFF;
	z-index:2; /* Allows the tooltip to be above other text and objects, but doesn't work in IE*/
}
a.gallery_admin_hover:hover span img{ border-width: 5px; margin:10px !important; padding: 0px; }
a.gallery_admin_hover:hover { font-size: 100%; /* Fixes bug in IE5.x/Win */ }

  /* Remember "LoVe:HAte"     ## Link - Visited - Hover - Active ##*/ 
/* border-right: [border-width || border-style || border-color | inherit] ;  (example border-right: 1px solid #000; )*/