body { background-color: rgba(0,0,0,0.95); color: rgb(203,194,194); font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; } /* regular black background @ 95% with light grey body test */
/*body { background-color: rgba(255,255,255,0.9); color: #777; font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; } /* regular white background */
/*body { background-color: rgba(255,215,0,0.9); color: #777; font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; } /* 50th anniversary gold background */
/*h1 { margin: 0px 0px 1em 0px; color: #076d6f; font-size: 1.7em; }*/
/*h1 { margin: 0px 0px 1em 0px; color: rgba(242, 242, 242, 0.9); font-size: 1.7em; } /* Main, Large Headings - Light Grey @ 90% */
h1 { margin: 0px 0px 1em 0px; color: rgba(0, 80, 188, 0.9); font-size: 1.7em; } /* Main, Large Headings - Medium Blue @ 90% */
h2 { margin: 0px 0px 1em 0px; color: rgba(255,255,0,0.8); font-size: 1.2em; text-decoration: underline;} /* Underlined Headings - Yellow @ 80% */
/*h3 { margin: 0px 0px 1.5em 0px; color: #339999; font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }*/
/*h3 { margin: 0px 0px 1.5em 0px; color: rgba(114,204,204,0.9); font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; } /* Side Panel Headings - Light Blue @ 90% */
h3 { margin: 0px 0px 1.5em 0px; color: rgba(255,255,0,0.8); font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; } /* Side Panel Headings - Red @ 80%*/
h4 { margin: 0px 0px 1.5em 0px; color: rgb(203,194,194); font-size: 12px; font-family: sans-serif; margin: 0; padding: 0; } /* small body text */
a { color: rgb(0, 162, 255); text-decoration: none; } /* Clickable Links Font Color, Light Blue */
table { text-align: center; vertical-align: middle; } /* center all table elements, text and images alike!! */ 
td { padding: 10px; }
/*td { padding: 10px; vertical-align: top } /* 11-2017, added vertical-align so founders club photo, name, and date are at top. NOTE: Also affects High School competition page table entries where placing and name fields are now top justified instead of centered!! */

header { height: 300px; width: auto; background: #eee url(hcc_banner.jpg) no-repeat center; background-size: 100% 100%; margin-bottom: 50px; position: relative; } /* Banner height,width & other properties */
header a.logo { position: absolute; display: block; width: 375px; height: 275px; background: url(hcc_logo_yellow_stroke.png) no-repeat 0 0; background-size: contain; z-index: 1; top: 45px; left: 10px; }
header a.logo span { display: none; }

article { width: 70%; float: left; margin-bottom: 75px; }
article div { padding: 0px 30px 0px 30px; border-right: 1px solid #555; }

/* Gallery styles for article div image galleries */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{ /* CSS for the thumbnail images */
height: 100px;
width: auto;
border: 0;    
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
height: 400px;
width: auto;
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
/*top: 0; /* used to be 0 */
left: 200px; /*position where enlarged image should offset horizontally */
z-index: 50;

}
/* ---------------- End of Article Div Gallery Styles --------------- */


aside { width: 30%; float: left; }
aside div { padding: 0px 30px 0px 30px; }

/* Gallery styles for aside div image galleries */
.asidegallerycontainer{

position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail2 img{ /* CSS for the thumbnail images */
height: 75px;
width: auto;
border: 0;    
border: 1px solid white;
margin: 0 5px 5px 0;
}

/*.thumbnail2:active{*/
.thumbnail2:hover{
background-color: transparent;
}

/*.thumbnail2:active img{*/
.thumbnail2:hover img{
border: 1px solid blue;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
height: 300px;
width: auto;
border-width: 0;
padding: 2px;
}

/*.thumbnail2:active span{ /*CSS for enlarged image*/
.thumbnail2:hover span{ /*CSS for enlarged image*/
visibility: visible;
/*top: 0; /* used to be 0 */
left: -450px; /*position where enlarged image should offset horizontally */
z-index: 50;

}
/* ---------------- End of Aside Div Gallery Styles --------------- */


nav { background-color: rgba(0,0,0,.6); position: relative; padding: 45px 0px 0px 350px; } /* (Menu text padding variables: top,right,bottom,left), this is where the menu text is positioned... */

/* Add menu rules here */

nav ul { list-style: none; margin: 0; padding: 0; }

nav ul::after { content:''; display: block; clear: both; }
/*nav ul li:hover { background-color: rgba(0,102,202,.7); } /* submenu items background color when the main menu item is hovered over or touched, with .7 transparency */
nav ul li:hover { background-color: rgba(125,125,125,.7); } /* submenu items background color(medium grey) when the main menu item is hovered over or touched, with .7 transparency */
nav ul li:hover > ul { display: block; }

/*nav ul li a { display: inline-block; color: #F9E66B; padding: 8px 20px; font-size: 0.90em; text-decoration: bold; width: 220px; } /* this is the font-color, item-size(due to padding) & font-size of the sub-menu items, sub-menu size=width */
nav ul li a { display: inline-block; color: #F9E66B; padding: 15px 30px; font-size: 0.98em; text-decoration: bold; width: 280px; } /* this is the font-color, item-size(due to padding) & font-size of the sub-menu items, sub-menu size=width */

/*nav ul li  a:hover { background-color: rgb(200,0,0); } /* this is the solid red color of the menu items as they are hovered over with the mouse or touched */
nav ul li  a:hover { background-color: rgb(50,50,50); } /* this is the solid dark grey color of the menu items as they are hovered over with the mouse or touched */

/*nav ul ul { display: none; position: absolute; top: 100%; background-color: rgba(0,102,202,.7); } /* subitem color when the main menu item is hovered over or touched */
nav ul ul { display: none; position: absolute; top: 100%; background-color: rgba(125,125,125,.7); } /* subitem color(medium grey) when the main menu item is hovered over or touched */
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }

/* Top Level Menu Override Rules Here*/

nav > ul { padding-left: 35px; } /* This is the distance the top level menu items are spaced from the left side of the logo*/
nav > ul > li { float:left; } /* the float property is what positions the top level menu items next to each other rather than below each other */ 
nav > ul > li > a { padding: 12px 20px 12px 20px; width: auto; } /* overrides the amount of space around top level menu items(item size) and automatically sets their width to the size of the menu item text */

@media screen and (max-width: 768px) {
	
	header a.logo { width: 120px; height: 44px; } /* 120px x 44px */
	article { width: 100%; float: none; margin-bottom: 40px; }
	article div { margin: 0px 40px; padding: 0px 0px 30px 0px; border-right: none; border-bottom: 1px solid #555; }
	aside { width: 100%; float: none; }
	
	nav { padding: 70px 0px 0px 10px; }
	nav > ul { padding-left: 0px; padding-right: 20px; }
	nav > ul > li > a { padding: 8px 12px 10px 12px; }

}