body
{
	background-image:url('images/backgrounds/christian-joudrey-98245-unsplash_small.jpg');
    height:100%; 
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
	background-attachment:fixed;
	background-color:#ccc;
	font-family:verdana;
}

#container
{
	width:960px;	
	opacity:1.0;
	margin:auto;
	border-radius:20px;
}

header
{
	background-image:url('images/banner_full.png');  
	background-repeat:no-repeat;
	background-color:white;
	border-radius:inherit;
	height:150px;
	border-radius:20px 20px 0px 0px;
}

nav
{
	text-align:center; /* not needed */  
}

#content
{
	min-height:500px;
	background-color:rgba(255,255,255,1);
	padding:5px 40px 5px 40px;   
}

footer
{
	background-color:#CCC;
	color:white;
	padding:1px; 
	border-radius:0px 0px 20px 20px;
}

footer p, footer a
{ 
  color:#EC0813; /*Set to Red. Gold = D4AF37*/
  font-size:9pt;
  font-weight:bold;
  text-align:center;
}

h1
{
  font-size:18pt;
  color:#EC0813;
}

h2
{
  font-size:14pt;
  color:#555;
}

h3
{
	font-size:12pt;
	font-weight:bold;
	color:#000;
}

p
{
	font-size:12pt;
	text-align:justify;  
}

table {
    font-family:arial, sans-serif;
    border-collapse:collapse;
    width:100%;
}

td, th {
    border:1px solid #ddd;
    text-align:left;
    padding:8px;
}

tr:nth-child(even) {
	background-color: #dddddd;
}

tr.lineup
{
	background-color: transparent;
}

td.lineup
{
  text-align: center;
}

div.dojokun 
{
  border:4px solid #555;
  border-collapse:collapse;
  border-style: solid;  
  width:400px;
  margin:auto;  
}

p.dojokun
{
  text-align: center;	
}

table.club-clothing
{
	border:2px solid #555;
}

img.club-clothing
{
	width:75px;
	height:60px;	
}

.smallPrint
{
	font-size:10pt;
	color:#aaa;
}

.proverb
{
	font-family:Arial;
	font-style:italic;
	font-size:12pt;
	text-align:center;
}

.kanbukai_table {
	width:100%;
}

.kanbukai_image_column {
	width:15%;
}

.kanbukai_image {
	width:100%;
}

a
{
	color:#555;
}

.align_right
{
	float:right;
	margin-left:10pt;
}

.align_left
{
	float:left;
	margin-right:10pt;
}

.belt_image
{
	float:right;
	margin-left:10pt;
	width:50px;
	height:42px;
}

.contacts 
{
	width:800px;
}

.stance_image {
	height:35%;
}

/* https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */
/* Add a black background color to the top navigation */
.topnav {
    background-color: #CCC;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #EC0813;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
	font-weight:bold;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #DDD;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 16px; 
	font-weight:bold;
    border: none;
    outline: none;
    color:#EC0813;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}
/*---------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:960px)
{
	/*Tablets*/
	#container { width:600px; }
	#content { min-height:600px;	padding:5px 15px 5px 15px; } 
	.contacts { width:100%; }
	header { background-image:url('images/banner_tablet.png'); height:94px;  }
}

@media only screen and (max-width:600px)
{
	/*Mobile Phones*/	
	#container { width:100%; }
	h1, h2, h3, p, li { font-size:9pt; }	
	header { background-image:url('images/banner_mobile.png'); background-size:contain; }
	div.dojokun { width:100%; }
	.topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
	.topnav a.icon { float: right; display: block; }
    .topnav.responsive {position: relative;}
	.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
	.topnav.responsive a { float: none; display: block; text-align: left; }
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}