/*SANE DEFAULTS */
div,img {
	margin:0px 0px;
	padding:0px 0px;
}

p,h1,h2,h3,h4,h5,ul,ol {
	margin:20px;
}

hr {
	margin:0px 20px;
}

li {
	margin:5px 20px;
}

li:first-child {
	margin-top:0px;
}

li:last-child {
	margin-bottom:0px;
}

div,body,img,p,h1,h2,h3,h4,h5,ul,ol,li,a{
	box-sizing:border-box; /*this is to put borders and padding inside of the box dimensions...EXPERIMENTAL*/
	font-family:Ubuntu,tahoma,verdana;
}

div,p,ul,ol,li,a {
	font-size:15px;
	font-weight:normal;
	font-family:Ubuntu,tahoma,verdana;
}

/*This might be too broad*/
ul li {
	list-style-image: url(./images/global/bullet-1.png);
	margin-bottom:5px;
}


body {
	background:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,.5) 30%,rgba(0,0,0,.5) 70%,rgba(0,0,0,1)), url(./images/global/background-stripes-trans4.png),#33f;
	padding:15px;
	margin:0px;
}

html {
	overflow-y: scroll;
}

a {
	outline:0;
}

.sup {
	vertical-align:super;
	font-size:80%;
}

	/* END SANE DEFAULTS */
	
/*ID BASED DIRECTIVES*/	
#kilroy {
	position:absolute;
	top:64px;
	left:65%;
	z-index:11;
}

#kilroy img {
	height:auto;
	width:80px;	
}
#container-container {
	position:relative;
	margin:0 auto;
	max-width:1200px;
	min-width:600px;
	box-shadow:0px 0px 10px 2px rgba(0,0,0,.75);
	border-radius:20px 20px 20px 20px;
	border:1px #666 solid;
	padding:4px;
	background:linear-gradient(0deg,#222,#444);
	}
	
#header-container {
	position:relative;
	margin:0 auto;
	padding:0px; /*remove this if adding more divs for layout*/
	height:100px;
	border-color:#222;
	border-style:solid;
	border-width:2px 2px 0 2px;
	border-radius:15px 15px 0 0;
	background:#900;
	z-index:10;
	}
	
#header-left {
	display:inline-block;
	width:50%;
	height:100%;
	text-align:left;
	vertical-align:top;
	padding:5px;
	border-radius:13px 0 0 0;
	background:url(./images/global/flag-wave-usa3-small.png) no-repeat;
	background-size:auto 170px;
	background-position:left center;
	opacity:1;
	}

#header-center {
	/*display:inline-block;
	width:60%;*/
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:top;
	padding:5px;
	color:#fff;
	text-shadow: 2px 2px 0px #000;
	text-shadow:	1px 1px 0px rgba(0,0,0,.75),
					1px -1px 0px rgba(0,0,0,.75),
					-1px 1px 0px rgba(0,0,0,.75),
					-1px -1px 0px rgba(0,0,0,.75),
					0px 3px 2px rgba(0,0,0,.75);
	font-size:36px;
	font-weight:bold;
	white-space:nowrap;
	background:linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 10%,rgba(255,255,255,0) 90%,rgba(255,255,255,.4));
	border-radius:15px 15px 0 0;
	}

#header-right {
	display:inline-block;
	width:50%;
	height:100%;
	text-align:right;
	vertical-align:top;
	padding:5px;
	border-radius:0 13px 0 0;
	background:url(./images/global/flag-wave-cali3-small.png) no-repeat;
	background-size:auto 170px;
	background-position:right 35%;
	/*border:1px #fff solid;*/
	opacity:1;
	}	
	
#menu-container {
	display:table;
	width:100%;
	position:relative;
	margin:0 auto;
	height:25px;
	line-height:25px;
	border-color:#222;
	border-style:solid;
	border-width:2px 2px 2px 2px;
	background:linear-gradient(0deg,rgba(0,0,0,.75) 15%, rgba(0,0,0,0), rgba(255,255,255,.4) 85%),#444;
	z-index:10;
	box-sizing:border-box;
	}

#body-container {
	position:relative;
	margin:0 auto 4px auto;
	min-height:450px;
	border:2px #222 solid;
	border-top:0px;
	background:#ccc;
/*	-moz-box-shadow:inset 0 0 20px #222;
	-webkit-box-shadow:inset 0 0 20px #222;*/
	/*border-radius:0 0 15px 15px;*/
	box-shadow:inset 0 0 10px #222; /* this is causing the corner border bleed problem */
	/*overflow:auto;*/
	/*padding:20px;*/
	}
	
#page-title {
	position:relative;
	top:0px;
	text-align:center;
}

#page-title p {
	letter-spacing:1px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	display:inline-block;
	line-height:30px;
	background:linear-gradient(0deg, rgba(0,0,0,.5) 80%, rgba(0,0,0,.7));
	border:2px #222 solid;
	border-top:0;
	border-radius:0 0 25px 25px;
	padding:0 30px 0 30px;
	margin:0;
	box-shadow:0px 2px 2px rgba(0,0,0,.5);
	text-shadow:	1px 1px 0px rgba(0,0,0,.75),
					1px -1px 0px rgba(0,0,0,.75),
					-1px 1px 0px rgba(0,0,0,.75),
					-1px -1px 0px rgba(0,0,0,.75);

}

#footer-container {
	margin:0 auto;
	border:2px #222 solid;
	border-radius:0px 0px 15px 15px;
	background:linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,0) 20%,rgba(255,255,255,0) 80%,rgba(255,255,255,.4)),#900;
	}

#footer-container .col {
	width:33%;
	padding:10px;

}

#footer-container .col:nth-child(1){
	text-align:left;
	color:#fff;
	white-space:nowrap;
	vertical-align:bottom;
	line-height:21px;
}

#footer-container .col:nth-child(2) {
	text-align:center;
}

#footer-container .col:nth-child(3){
	text-align:right;
	
	}
#footer-container .col:nth-child(3) a {
	display:inline-block;
	/*box-shadow:0px 2px 2px 1px rgba(0,0,0,.5);*/
	width:127px;
	height:40px;
	vertical-align:top;
	border:1px #222 solid;
	box-sizing:content-box;
	}

#footer-container p {
	margin:0;
	padding:0;
	color:#ddd;
	font-size:14px;
	/*letter-spacing:1px;*/
	font-weight:500;
	text-shadow:	1px 1px 0px rgba(0,0,0,.5),
					1px -1px 0px rgba(0,0,0,.5),
					-1px 1px 0px rgba(0,0,0,.5),
					-1px -1px 0px rgba(0,0,0,.5);
	}
	
#top-button {
	height:40px;
	width:80px;
	vertical-align:top;
}

#wu {
	width:127px;
	height:40px;
	vertical-align:top;
}


#post-footer-container {
	position:relative;
	width:100%;
	border:0;
}

#post-footer-abs {
	position:absolute;
	width:inherit;
	margin:15px auto;
	text-align:center;
}

#post-footer-block {
	display:inline-block;
	position:relative;
	background:linear-gradient(0deg,rgba(17,17,17,1),rgba(34,34,34,.85) 8%,rgba(102,102,102,.85) 92%,rgba(164,164,164,.9)),url(./images/global/brushed-steel3.png);
	border:1px #000 solid;
	border-radius:5px;
	margin-bottom:10px;
	padding:10px 15px;
	box-shadow:0px 0px 10px 2px rgba(255,0,0,0);
}

#post-footer-block p {
	font-size:14px;
	color:#222;
	margin:0px 0 5px 0;
	text-shadow:0px 1px 0px #aaa;
	font-weight:700;
}

#post-footer-block ul {
	color:#111;
	margin:0 auto;
	padding:0;
	max-width:176px;
	line-height:10px;
	border:0px #999 solid;
}

#post-footer-block ul li {
	display:inline-block;
	font-size:10px;
	margin:0 0 2px 0;
	vertical-align:middle;
}
	
#post-footer-block ul li a {
	color:#ccc;
	font-size:12px;
	text-decoration:none;
	text-shadow:0px 0px 2px #000;
}

#post-footer-block ul li a:hover {
	color:#fff;
	text-decoration:underline;
}
	
#w3c-block {
	display:inline-block;
	margin:0 auto 20px auto;
	padding:4px;
	background:linear-gradient(0deg,#222,#444);
	border:1px #666 solid;
	border-radius:5px;
	box-shadow:0px 0px 8px 2px rgba(64,128,255,.25);
}
	
#w3c-block a {
	display:inline-block;
	vertical-align:top;
}	

#w3c-block a:first-child {
	margin-right:4px;
}

#w3c-block img {
	display:block;
	border:2px #3179af outset;
	width:70px;
}


	
/*CLASS BASED DIRECTIVES*/

/* TABLES */
.table-container {
	box-shadow:0px 4px 4px rgba(0,0,0,.5);
	border-radius:10px 10px 0 0;
	margin:20px;
}

table.pretty {
	width:100%;
	border-bottom:0px #444 solid;
	margin:0;
	/*border-collapse: collapse;*/
}

table.pretty th {
	color:#fff;
	text-shadow:	1px 1px 0px rgba(0,0,0,.75),
					1px -1px 0px rgba(0,0,0,.75),
					-1px 1px 0px rgba(0,0,0,.75),
					-1px -1px 0px rgba(0,0,0,.75);
	text-align:center;
	background:linear-gradient(0deg,rgba(0,0,0,.75) 15%, rgba(0,0,0,0), rgba(255,255,255,.4) 85%),#666;
	border-top:1px #444 solid;
	border-bottom:1px #444 solid;
	border-left:1px #999 outset;
	border-right:1px #999 outset;
}
table.pretty th:first-child {
	background:linear-gradient(0deg,rgba(0,0,0,.75) 15%, rgba(0,0,0,0), rgba(255,255,255,.4) 85%),#666;
	border-top:1px #442 solid;
	border-bottom:1px #442 solid;
	border-left:1px #442 solid;
	border-right:1px #999 outset;
	border-radius:15px 0 0 0;
}
table.pretty th:last-child {
	background:linear-gradient(0deg,rgba(0,0,0,.75) 15%, rgba(0,0,0,0), rgba(255,255,255,.4) 85%),#666;
	border-top:1px #444 solid;
	border-bottom:1px #444 solid;
	border-left:1px #999 outset;
	border-right:1px #444 solid;
	border-radius:0 15px 0 0;
}

table.pretty td,th {
	padding:0 10px;
	line-height:24px;
	
}

table.pretty td {
	border-right:1px #666 solid; /*inner*/
	border-bottom:1px #666 solid; /*inner*/
	background:linear-gradient(0deg,#ddd,#fff);
}

table.pretty td:first-child {
	border-left:1px #444 solid;
	border-right:1px #666 solid; /*inner*/
}
table.pretty td:last-child {
	border-right:1px #444 solid;
}
table.pretty tr:last-child td {
	border-bottom:1px #444 solid;
}


/* Main Menu */
.menu-block 	{
	display:table-cell;
	padding:0px;
	margin:0px;
	vertical-align:top;
	/*overflow:visible;*/ /*Not sure why I had this here */
	font-size:14px;
	white-space:nowrap;
}

.menu-title		{
	position:relative;
	letter-spacing:1px;
	text-align:center;
	color:#ddd;
	font-weight:500;
	font-size:18px;
/*	text-shadow: 0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5);*/
	text-shadow:	1px 1px 0px rgba(0,0,0,.75),
					1px -1px 0px rgba(0,0,0,.75),
					-1px 1px 0px rgba(0,0,0,.75),
					-1px -1px 0px rgba(0,0,0,.75);
	padding:0 20px 0 20px;
	border-left:1px solid #aaa;
	border-right:1px solid #222;
	height:36px;
	line-height:36px;
}

.menu-list 		{
	display:none;
	color:#ccc;
	overflow:visible;
	position:absolute;
	top:36px; /* bug here between ff and chrome, box-sizing probably*/
	min-width:inherit;
	width:auto;
	border-top:0;
	border-left:1px solid #aaa;
	border-right:1px solid #222;
	border-bottom:1px solid #666;
	z-index:0;
	background:linear-gradient(180deg,#080811,#336 80px);
	box-shadow:inset 0px 0px 20px #080811,0px 4px 8px rgba(0,0,0,.75);

}

.menu-list div {
	list-style-type: none;
	list-style-image: none;
	/*background-color:#111;*/
	line-height:36px;
	padding:0px 5px 0px 5px;
	white-space: nowrap;
	z-index:8;
}

.menu-list div:last-child {
	padding-bottom:5px;
}

.menu-list div:first-child {
	padding-top:5px;
}

.menu-list div a {
	display:block;
	color:#ccc;
/*	text-shadow: 0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5),0px 0px 2px rgba(0,0,0,.5);*/
	text-shadow:	1px 1px 0px rgba(0,0,0,.75),
					1px -1px 0px rgba(0,0,0,.75),
					-1px 1px 0px rgba(0,0,0,.75),
					-1px -1px 0px rgba(0,0,0,.75);

	margin:0;
	padding:0 10px 0 10px;
	border:1px rgba(0,0,0,0) solid;
	text-decoration:none;
}

.menu-list div a:hover {
	color:#fff;
/*	background-color:#224;*/
	box-shadow:inset 0px 0px 10px #080811;
	border-radius:5px;
	border:1px #66f solid;
	
}	

.menu-block:hover .menu-title	{
	/*border-bottom:0px;*/
	/*background:linear-gradient(to top, rgba(0,0,0,.6) 10%, rgba(0,0,0,0), rgba(255,255,255,.6) 90%), #f00;*/
	background:linear-gradient(0deg,rgba(0,0,0,.75) 15%, rgba(0,0,0,0), rgba(255,255,255,.4) 85%),#336;
	color:#fff;
	z-index:9;
}

.menu-block:hover .menu-title:last-child {
	background:0;
}


.menu-block:hover .menu-list	{
	display:block;
}
/* End Main Menu */

/* Fancy Image Border */
/*Note: Use photoFullWide for 100% width*/

/* Redo this using 'outline' along with 'border' */

.photo {
	border:1px #666 solid;
	box-shadow:0px 4px 4px rgba(0,0,0,.5);
	margin:0 auto;
}

.photo img {
	display:block;
	box-sizing:border-box;
	border:4px #fff solid;
}

.photoFullWide {
	width:100%;
	border:1px #666 solid;
	box-shadow:0px 4px 4px rgba(0,0,0,.5);
	margin:0 auto;
}

.photoFullWide img {
	display:block;
	box-sizing:border-box;
	border:4px #fff solid;
	width:100%;
	height:auto;
}
/* End Fancy Image Border*/

/*Fancy List of Buttons */
/* set to display table for a cenetered inline block */
		.link-list {
			display:table;
			margin:0 auto;
		}
		
		.link-list-head {
			color:#fff;
			font-size:22px;
			font-weight:500;
			text-shadow:	1px 1px 0px rgba(0,0,0,.75),
							1px -1px 0px rgba(0,0,0,.75),
							-1px 1px 0px rgba(0,0,0,.75),
							-1px -1px 0px rgba(0,0,0,.75);
			text-align:center;
			height:30px;
			line-height:28px;
			margin-bottom:5px;
			padding:0 5px;
			border:1px #444 solid;
			background:linear-gradient(0deg,rgba(0,0,0,.5), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(255,255,255,.5)),rgba(128,128,128,.75);
			border-radius:15px 15px 5px 5px;
			box-shadow:0px 2px 2px rgba(0,0,0,.5);
		}
		
		.link-button {
			margin-bottom:5px;
			height:24px;
			text-align:left;
			border:1px #444 solid;
			background:linear-gradient(0deg,rgba(0,0,0,.3), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(255,255,255,.3)),rgba(255,255,255,.5);
			border-radius:5px;
			box-shadow:0px 2px 2px rgba(0,0,0,.5);
			white-space:nowrap;
		}
		
		.link-button:last-child {
			margin:0;
		}
		
		.link-button a {
			display:block;
			padding:0 5px;
			color:#000;
			text-decoration:none;
			font-weight:500;
			font-size:16px;
			line-height:22px;
		}
		
		.link-button:hover {
			background:linear-gradient(0deg,rgba(0,0,0,.5), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(255,255,255,.5)),rgba(64,64,64,.5);
		}
		
		.link-button:hover a {
			color:#fff;
			text-shadow:	1px 1px 1px rgba(0,0,0,.5),
							1px -1px 1px rgba(0,0,0,.5),
							-1px 1px 1px rgba(0,0,0,.5),
							-1px -1px 1px rgba(0,0,0,.5);
		}
/* End Fancy List of Buttons*/

/* GENERIC COLUMNS */
		.col-block {
			display:table;
			width:100%;
		}
		
		/* .col might be able to replace all the others, because width seems automatic with table-cell. */
		/* Why is width 1% (or any percentage smaller than 100 divided by the number of cells in a row) necessary to make it distribute evenly though? */
		.col {
			display:table-cell;
			vertical-align:top;
			width:1%; /* WTF Mate - Quirk*/
			min-height:20px;
			/*text-align:center;*/
		}
		.col:first-child {
			padding-left:0px;
		}
		.col:last-child {
			padding-right:0px;
		}
		
		/* remove all the col below after migrating off of them */
		.col-20:first-child {
			padding-left:0px;
		}
		.col-20:last-child {
			padding-right:0px;
		}		

		.col-25 {
			display:table-cell;
			vertical-align:top;
			width:25%;
			min-height:20px;
			text-align:center;
		}
		.col-25:first-child {
			padding-left:0px;
		}
		.col-25:last-child {
			padding-right:0px;
		}		
		
		.col-60 {
			display:table-cell;
			vertical-align:top;
			width:60%;
			min-width:60%;
			min-height:20px;
			text-align:left;
			padding:10px;
		}
		.col-50 {
			display:table-cell;
			vertical-align:top;
			width:50%;
			min-height:20px;
			padding:10px;
		}
		.col-50:first-child {
			padding-left:0px;
		}
		.col-50:last-child {
			padding-right:0px;
		}
		
		.col-33 {
			display:table-cell;
			vertical-align:top;
			width:33%;
			padding:10px;
		}
		.col-33:first-child {
			padding-left:0px;
		}
		.col-33:last-child {
			padding-right:0px;
		}
		
		/* USE THE FOLLOWING FOR TROUBLESHOOTING ONLY, DISABLE OTHERWISE */
		/*h1,h2,h3,h4,h5,h6,p,div,ul,ol,li,table,tr,th,td,img {
		box-sizing:border-box;
		border-top:1px solid #f66;
		border-right:1px solid #6f6;
		border-bottom:1px solid #66f;
		border-left:1px solid #f6f;
		}*/