/*
   This is the OISC style sheet for our club web site.  This is
   a global style sheet which gets imported into ALL of the web
   pages on our site.  Modify it only if you absolutely have to
   any errors here will be replicated accross the entire site.

   the following styles are basic styles need to make box layouts
   flow correctly in the various browsers.  These have all been
   setup to ensure that the boxes get aligned the way you think
   they will.  Stuff like the ratio of font-size and line-height
   is critical, it MUST be the same in the various text elements.
*/

/*
  these are the basic font/text styles to use throughout 
  the site.

  NOTE: font-height/line-height rations must be consistent 
  otherwise some browsers will cause the layout to be shifted
  in weird ways.

*/

/* text elements <p> <h1> etc. */

body {
  margin: 0px 0px 0px 0px;
  padding: 0;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  color: #000;
  background-color: #BEBEBE;
  background-image: url(/images/background_body_light_gray.jpg);
  background-repeat: repeat-y;	
  background-position: center;
}

h1 {
  font-family: Optima, Lucida, 'MgOpen Costmetica', Helvetica, Arial;
  font-size:20px;
  font-weight:bold;
  font-style:normal;
  color:#1C4F9E;
}
	
h2 {
  font-family: Optima, Lucida, 'MgOpen Costmetica', Helvetica, Arial;

  font-size:18px;
  font-weight:bold;
  font-style:normal;
  color:#1C4F9E;
}
	
h3 {
  font-family: Optima, Lucida, 'MgOpen Costmetica', Helvetica, Arial;
  font-size:13px;
  font-weight:bold;
  font-style:normal;
  color:#000000;
}

h4 {
  font-size:12px;
  font-weight:bold;
  font-style:normal;
  color:#333333;
}
	
h5 {
  font-size:11px;
  font-weight:bold;
  font-style:normal;
  color:#333333;
}
	
p {
  color: #555555;
  font-size:12px;
  font-weight:normal;
  font-style:normal;
}
	
li {
  font-size:12px;
  font-weight:normal;
  font-style:normal;
  margin-top: 6px;
}

a,
a:link,
a:visited {
  font-weight:normal;
  font-style:normal;
  color:#003399;
  text-decoration:underline;
}
	
a:hover {
  font-weight:normal;
  font-style:normal;
  color:#000000;
  text-decoration:underline;
}

strong { color: #000000; font-weight: bold; }
b { font-weight: bold;}
em { font-style: italic;  }
i { font-style: italic; }
.bold{ font-weight: bold;}
.italic{ font-style: italic; }
.align-center {text-align:center;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.lowercase {text-transform:none;}
.uppercase {text-transform:none;}
	

/* when h4 is used in the left column */

.h4-left {
  font-size:12px;
  font-weight:bold;
  font-style:normal;
  color:#333333;
}

/* when h4 is used on the right side column */

.h4-right {
  font-size:12px;
  font-weight:bold;
  font-style:normal;
  color:#333333;
}

ul li {
  color: #555555;
}

li p {
  color: #555555;
  padding: 0px;
  margin: 0px; 
  margin-left: 5px;
  margin-right: 5px;
  text-align: left;
  font-family: Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
}

p.fine-print {
  padding: 0px;
  margin: 4px;
  text-align: left;
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  font-style: italic;
  color: grey;
}

.li-toc {
  text-align: left;
  font-size:12px;
  font-weight:normal;
  font-style:normal;
  list-style: none;
}

.check-text {
  padding: 0px;
  margin: 4px;
  text-align: left;
  font-family: Tahoma,  verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: black;
}

.req-mark {
  font-size: smaller; 
  color: red;
  margin: 0px;
  padding: 0px;
}

/* when p is used in the left column */

.p-left {
  padding: 0px 0px 0px 5px;
  margin: 0px 0px 0px 0px;
  text-align: left;
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  /* line-height: 22px; */
}

table {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 1px solid black;
  margin-bottom: 1.5em;
  padding: 0px;
}
th {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 2px;
  margin: 0px;
  text-align: center;
  background-color: black;
  color: white;
}
td {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 6px;
}
td.blank {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 0px none black;
  padding: 6px;

}

td.race {
font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 10px;
  font-height: 12px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 6px;
  color: #555555;

}
td.race-odd {
font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  background-color: #F5F5D5;
  font-size: 10px;
  font-height: 12px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 6px;
  color: #1C1C1C;

}
td.td-reverse {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  background-color: #1C1C1C;
  font-size: 10px;
  font-height: 12px;
  font-weight: bold;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 6px;
  color: #FFFFFF;
}



table.shrink {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border-style: none;
  border-width: 0px;
  margin-bottom: 1.5em;
  padding: 0px;
  width: auto;
}

table.blank {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 10px;
  border-style: none;
  border-width: 0px;
  width: auto;
  color: #555555;
}

table.blank * td {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 10px;
  border: 0px none black;
}

table.shrink * th {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 2px;
  margin: 0px;
  text-align: center;
  background-color: black;
  color: white;
}
table.shrink * td {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border-style: none;
  border-width: 0px;
  padding: 2px;
  margin: 0px;
  width: auto;
}


table.search {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border-style: none;
  border-width: 0px;
  margin-bottom: 1.5em;
  padding: 0px;
  width: auto;
}
table.search * th {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  border-collapse: collapse;
  border: 1px solid black;
  padding: 2px;
  margin: 0px;
  text-align: center;
  background-color: black;
  color: white;
}
table.search * td {
  font-family:  Tahoma, verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;
  text-align: left;
  border-collapse: collapse;
  border-style: none;
  border-width: 0px;
  padding: 2px;
  margin: 0px;
  width: auto;
}

img {
  border-width: 3px;
  border-color: #696969;
  border-style: solid;
  margin: 6px;
  padding: 0px;
}

img.no-border {
  border-width: 0px;
  border-color: #696969;
  border-style: none;
  margin: 0px;
  padding: 0px;
}


img.bordered {
  border-width: 1;
  border-style: solid;
  border-collapse: collapse;
  border-color: #BEBEBE;
  margin: 0px;
  padding: 0px;
}

/* input form layout */

.leftAlign {
  clear: both;
  padding-bottom: 5px;
}

.leftBlock {
  clear: both;
  float: left;
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
  width: 140px;
}

.rightBlock {
  float: left;
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
  width: 148px;
}

.leftAlignBlock {
  clear: both;
  padding-top: 10px;
  padding-bottom: 0px;
}

.lightGreyBorder {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc;
}

.vspacer { 
  min-height: 20px;
}

form {
  margin: 0px;
  padding: 0px;
}

/* for when forms are used on the left column */

.form-left {
  margin: 0px;
  padding: 0px;
  min-width: 140px;
  max-width: 140px;
  width: 140px;
}

.form-create {
  margin: 0px;
  padding: 0px;
  min-width: 450px;
  max-width: 450px;
  width: 450px;
}

.h4-form {
  padding: 0px;
  margin: 0px;
}

.leftLabelBlock {
  float: left;
  padding: 5px;
  display: block;
}

form fieldset {
  clear: both;
  max-width: 450px;
  width: 450px;
  font-size: 24px;
  line-height: 44px; 
  border-color: #000000;
  border-width: 1px 0px 0px 0px;
  border-style: solid none none none;
  padding: 10px;
  margin: 0px 0px 0px 0px;
}

form fieldset.inner {
  clear: both;
  max-width: 450px;
  width: 450px;
  font-size: 24px;
  line-height: 44px; 
  border-color: #000000;
  border-width: 1px 1px 1px 1px;
  border-style: solid solid solid solid;
  padding: 10px;
  margin: 0px 0px 0px 0px;
}


.label-wrapper {
  float: left; 
  margin: 0px; 
  margin-top: 0px; 
  padding: 0px; 
  background-color: #FFFFFF;
}

.row-wrapper {
  clear: both;
  background-color: #FFFFFF;
  margin: 0px;
  margin-top: 5px;
}

.select-wrapper {
  float: left; 
  margin: 0px; 
  padding 0px;
  background-color: #FFFFFF;
}

form.form-create label {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: normal;
  color: #003399;
}

form.form-create label.left-label {
  position: relative;
  background-color: #FFFFFF;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #003399;
  margin: 0px;
  padding: 0px;
}


form.form-create fieldset legend {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 24px;
  line-height: 44px;
  font-weight: normal;
  color: #003399;
  margin: 0px 0px 0px 0px;
  padding: 0px 5px;
}

form fieldset legend {
  font-size: 24px;
  line-height: 44px; 
  font-weight: normal;
  color: #003399;
  margin: 0px 0px 0px 0px;
  padding: 0px 5px;
}

.p-big-text {
  margin: 0px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0px;
  font-size: 24px;
  line-height: 44px; 
  font-weight: normal;
  text-align: left;
  color: #003399;
}

.p-big-text2 {
  clear: both;
  padding-bottom: 5px;
  font-size: 24px;
  line-height: 44px; 
  font-weight: normal;
  color: #003399;
  margin: 0px 0px 0px 0px;
}


.p-smaller-text {
  font-size: smaller;
}

.p-no-margin {
  margin: 0px;
  padding: 0px;
}

.p-red-text {
  color: red;
}

.p-blue-text {
  color: #003399;
}

.li-spaced {
  padding-bottom: 8px;
}

.p-announce {
  background-image: url(/images/info_icon_sm.gif);
  background-repeat: no-repeat;
  background-position: 6px 6px;
  border: 1px; border-color: #000080; border-style: solid;
  padding: 10px 10px 14px 58px;  
  margin: 0px 0px 12px 0px;
  font-weight: bold;
  font-size: 16px;

}

.p-note {
  background-color: #E6E6FA;
  background-image: url(/images/note.png);
  background-repeat: no-repeat;
  background-position: top left;
  border: 1px; border-color: #000080; border-style: solid;
  padding: 8px 8px 8px 40px;  
  color: black;
  margin: 8px 8px 8px 40px;
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
  line-height: 14px;
}

.p-error {
  background-color: #FFFF00;
  background-image: url(/images/icon_error.gif);
  background-repeat: no-repeat;
  background-position: top left;
  border: 1px; border-color: red; border-style: solid;
  padding: 8px 8px 8px 40px;  
  color: red; 
  margin: 8px 8px 8px 40px;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
}

.img-wrap {
  border-style: solid; 
  border: 1px 1px 1px 1px; 
  border-color: #CFCFCF; 
  margin: 1px 1px 1px 1px; 
  padding: 1px 1px 1px 1px;
}

/* 
  these are the styles for managing the three column layout.  Each
  one of these is used to set the flow/parameters of one of the
  layout boxes.
*/

#header {
  width: 800px;
  margin: 0px;
  padding: 0px;
  text-align: left;
  background-image: url(/festival/images/header_nav_background.jpg);
  background-position: top;
  clear: both;
  height: 70px;
}
	
.header-logo {
  float:left;
  text-align:left;
  margin: 0px;
  padding: 0px;
}
	
.header-topNavigation {
  float:right;
  text-align:right;
  margin: 36px 0px 0px 0px;
  padding: 5px 10px 0px 0px;
}
	
#header-bottom {
  width: 800px;
  height: 205px;
  margin: 0px;
  padding: 0px;
  background-image: url("/festival/images/grey_line.jpg");
  background-repeat: no-repeat     
  background-position: bottom; 

  clear:both;
  min-height: 14px;
}

#content-top {
  width: 800px;
  margin: 0px;
  padding: 0px;
  background-image: url(/images/background_content-top.gif);
  background-repeat: repeat-x;     
  background-position: top;
  clear: both;
  min-height: 14px;
  height: 14px;
}

#footer {
  width: 800px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background-image: url("/festival/images/grey_line.jpg");
  background-position: top;
  background-repeat: no-repeat;
  clear: both;
  min-height: 75px;
  color: #1c4f9e;
  font-weight: normal;
  line-height: 18px;
}
        
#footer_links {
  color: #1c4f9e;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#footer_copyright {
  width: 800px;
  margin: 0px;
  padding: 5px 0px 5px 0px;
  text-align: center;
  background-color: #ffffff;
  color: #1c4f9e;
  clear: both;
  font-size: 11px;
}

.rigid {
  width:800px;
  margin-right:auto;
  margin-left:auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding:0px;
  text-align:left;
  background-color:#ffffff;
  display:block;
}

.float-wrapper-rigid {
  float: left;
  width: 650px;
  margin: 0px;
  padding: 0px;
}

.float-wrapper-big-rigid {
  float: left;
  width: 790px;
  min-height: 580px;
  margin: 0px;
  margin-left: 5px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  background-color: #FFFFFF;
}

.left-video-content {
  float: left;
  width: 410px;
  height: 358px; 
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF;
  border: 0px solid #E5E5E5;
}

.right-video-content {
  float: right;
  width: 360px;
  height: 480px;
  padding: 0px;
  margin: 0px 5px 0px 0px;
  background-color: #FFFFFF; 
  border: 0px solid #E5E5E5;
  overflow: auto;
}

.video-entry {
  width: 370px;
  height: 77px;
  margin: 0px;
  padding 0px;
  background-color: #FFFFFF;
  background-image: url(/content/videos/video-title-button.jpg);
}

.video-header-entry {
  width: 370px;
  height: 20px;
  margin: 0px;
  padding 0px;
  background-color: #FFFFFF;
  background-image: url(/content/videos/video-header-button.jpg);
}

.video-entry-high {
  width: 370px;
  height: 77px;
  margin: 0px;
  padding 0px;
  background-color: #FFFFFF;
  background-image: url(/content/videos/video-title-button-high.jpg);
}

.content {
  float: right;
  width: 480px;
  padding: 0px 6px 0px 10px;
  margin: 0px 4px 0px 0px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: left;
  color: #000;
  line-height: 16px;
  background-color: #ffffff;
  border-left: 1px solid #E5E5E5;
}

.left-content {
  float: left;
  width: 138px;
  padding: 0px 4px 5px 5px;
  margin: 0px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  text-align:left;
  background-color: #ffffff;
  color:#003366;
}

.right-content {
  float: right;
  width: 140px;
  padding: 10px 5px 5px 4px;
  margin: 0px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: left;
  color: #333333;
  background-image: url(/images/background_right-content.gif);
  background-repeat: repeat-x; 
  background-position: top;
  border-left: 1px solid #E5E5E5; 
}

.footer {
  clear: both;
  background-color: #FFFFFF;
}

/*
  these styles are to help format (nicely) the 
  text that is used in menues, we want the 
  memu paragraph to have a predictable size
  and when not using a pop-out menu (i.e. in
  an old browser like IE4 or WebTV), then
  we want the degraded lists to have a 
  predictable format as well.  Namely a shorter
  indent so that on WebTV it still looks like
  we at least tried.
*/
 
p.menu {
  padding: 0px;
  margin: 0px;
  text-align: left;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-height: 22px;

}

/*
   in old style browsers, we want degraded menus to be displayed
   with a more terse spacing so they don't take up as much column
   space.
*/

ul.menu {
  margin-left: 0;
  padding-left: 0;
}

ul.menu ul {
  margin-left: 10;
  padding-left: 0;
}

ul.menu li {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  list-style: none;
}

/* some specific formatting for links in the header */

a.topNavigation,
a.topNavigation:link,
a.topNavigation:visited {
  font-weight:bold;
  font-style:normal;
  font-size: 14px;
  color:#fff;
  vertical-align: top;
  text-decoration:none;
  margin-left:10px;
}
	
a.topNavigation:hover {
  font-weight:bold;
  font-style:normal;
  font-size: 14px;
  color:#fff;
  vertical-align: top;
  text-decoration:underline;
  margin-left:10px;
}

/* some specific formatting for links in the footer */

a.footerNavigation,
a.footerNavigation:link,
a.footerNavigation:visited {
  font-weight: normal;
  font-style: normal;
  color: #1c4f9e;
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
}

a.footerNavigation:hover {
  font-weight: normal;
  font-style: normal;
  color: #1c4f9e;
  text-decoration: underline;
  margin-left: 5px;
  margin-right: 5px;
}