html { overflow: auto; }

/* elements */
body { cursor: default; background-image: url('images/background.png'); text-align: center; margin: 0; font-family: Trebuchet; font-size: 100%; overflow: auto;  }
img { border-style: none; }
a { font-weight: bold; color: #0000ff; text-decoration: underline; cursor: pointer; }
a:hover { color: #ffffff; }

/* page containers */
#container { position: relative; margin: auto; width: 800px; text-align: justify; }
#menuBar { position: relative; background-image: url('images/back.png'); width: 800px; height: 190px; z-index: 1; }

/* logo */
#logo { float: left; margin-top: 20px; margin-left: 50px; width: 150px; height: 150px; }

/* menu */
#menu { margin-top: 15px; margin-right: 25px; float: right; width: 550px; height: 150px; }
.button { cursor: pointer; float: left; margin: 5px 30px 5px 30px; height: 30px; width: 120px; line-height: 30px; font-weight: bold; color: #000000; text-decoration: none; background-image: url('images/button.png'); text-align: right; }
.button:hover { background-image: url('images/button_over.png'); background-color: #ffffff; height: 30px; }
#contactU:hover { color: #ffffff; }
#gallery:hover { color: #ffffff; }
#classes:hover { color: #ffffff; }
#workshops:hover { color: #ffffff; }
#danceI:hover { color: #ffffff; }

/* sub menus */
.subMenu { position: relative; width: 200px; font-weight: bold; text-align: center; display: none; background-image: url('images/background.png'); overflow: hidden; border: 2px solid #ffffff; }
.sub { width: 200px; height: 30px; line-height: 30px; float: left; background-image: url(images/sub_button.png); font-size: 12px; font-weight: bold; color: #000000; text-decoration: none; }
.sub:hover { background-color: #ffffff; color: #000000; }

/* contact us */
#contact { background:#D3D3D3 url('images/background.png'); padding:10px; width:400px }
#beginners { background:#D3D3D3 url('images/background.png'); padding:10px; width:400px }

/* gallery */
#galHead { font-weight: bold; top: 14px; }
#galMenu { position: relative; margin: auto; }
.folder { cursor: pointer; position: relative;  float: left; width: 100px; height: 100px; font-weight: bold; margin: 5px; }
.folder:hover { color: #ffffff; }
#gal { display: none }
#main {  position: relative; background-color: #D3D3D3; margin-top: 15px; padding: 10px; max-height: 510px; max-width: 540px; }
#thumbs { position: relative; margin: 5px auto 5px auto; width: 570px; height: 91.5px; overflow: hidden; }
.ctrlP { background-image: url('images/arrow-left.png'); cursor: pointer; position: relative; float: left; margin: -5px 5px; height: 35px; width: 35px; line-height: 35px; font-weight: bold; text-align: center; }
.ctrlP:hover { background-image: url('images/arrow-left_over.png'); }
.ctrlN { background-image: url('images/arrow-right.png'); cursor: pointer; position: relative; float: right; margin: -5px 5px; height: 35px; width: 35px; line-height: 35px; font-weight: bold; text-align: center; }
.ctrlN:hover { background-image: url('images/arrow-right_over.png'); }
#galBack { margin-top: -20px; left: 15px; cursor: pointer; position: relative; float: left; background-image: url('images/galButton.png'); width: 200px; height: 30px; line-height: 35px; font-weight: bold; }
#galBack:hover { color: #ffffff; background-image: url('images/galBack_over.png'); }
#slideshow { margin-top: -20px; right: 15px; cursor: pointer; position: relative; float: right; background-image: url('images/galButton.png'); width: 200px; height: 30px; line-height: 35px; font-weight: bold; }
#slideshow:hover { color: #ffffff; background-image: url('images/galSlide_over.png'); }
.thumbnail { max-width: 90px; max-height: 67.5px; margin: 5px; padding: 5px; border: 2px solid #ffffff; cursor: pointer; }

/* included page content */
.subContent { display: none; }

/* cricket */
#cricket { float: left; width: 100px; height: 100px; margin: 5px; }

/* title */
#title { clear: both; position: relative; float: right; width: 800px; height: 30px; background-image: url('images/title.png'); text-align: center; line-height: 30px; font-weight: bold; }

/* page logo */
#pageL { float: right; width: 100px; height: 100px; margin: 10px 10px 0 0; }

/* page */
.announcement { padding : 5px; font-weight: bold; color: blue; font-size: 16px; border: 2px solid black; text-align: center; }
#content { position: relative; float: left; width: 560px; min-height: 240px; padding: 10px; text-align: center; }

/* footer */
#footer { float: left; position: relative; margin: 10px 0; background-color: #D3D3D3; border: 1px solid black; width: 100%; height: 16px; line-height: 16px; font-family: Courier New; font-size: 11px; padding: 2px; }
#leroc { background-image: url('images/leroc.png'); cursor: pointer; position: relative; z-index: 1; float: right; width: 100px; height: 100px; }
#leroc:hover { background-image: url('images/leroc_over.png'); }
#uka { background-image: url('images/uka.png'); cursor: pointer; position: relative; z-index: 0; float: right; margin-top: -50px; width: 100px; height: 100px; }
#uka:hover { background-image: url('images/uka_over.png'); }

/* line */
#separator { background-color: #000000; height: 2px; width: 75%; margin: auto; }