/* CSS Document */

/* =============
	 Vendor prefixes are identified with comment "PREFIXES"
	 ============ */

body { 
	padding: none; 
	color: #FFF;
	/*font-family: Trebuchet, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;*/
	/*font-family: 'Cabin Condensed', 'Lato', sans-serif; -- Google web fonts */
	font-family: 'Share', sans-serif;
	font-size: 100%;
	background-color: #5B5B5B;
}

.skipnav { position: absolute; left:-99999px; }

h2 i { 
	visibility: hidden;
	font-size: 9pt; 
}

p {
	/*font-size: 0.75em;*/
	font-size: 0.85em;
	line-height: 1.4em;
}

div li {
	 margin: 0.35em auto 0.35em -1.7em;;
	 font-size: 0.85em;
}	 

.clrb {	display: block; clear: both; }
.clrr { display: block; clear: right; }


figure {
	margin: 0.5em 0;
	padding: 8px 8px 0 0;
	float: left;
	border: 1px dotted #999;
}
figure a { 
	float: inherit;  
	margin-bottom: 1em;
	text-decoration: none; border: none;
/* --- PREFIXES --- */	
-webkit-box-shadow: 5px 5px 8px #333;
-moz-box-shadow: 5px 5px 8px #333;	
box-shadow: 5px 5px 8px #333; /* Horiz. L, Vert. L, Shadow color */
}
figcaption {
	float: inherit;
	margin-left: 1em;
	font-size: 0.7em;
	font-style: italic;
	padding-bottom: 4px;
}		
p.fig {	margin: 0;	}    /* ===== For the dummy para needed for block-level element in figure ===== */

table { 
	font-size: 0.75em; 
	margin-right: 2%;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	border-collapse: collapse;
	background-color: #666;
}
caption {
	font-style: italic;
	font-size: 0.9em;
	padding: 0.5em 0;
}
td { 
	border-bottom: #999 dotted 1px; 
	vertical-align:baseline; 
	padding: 0.4em ;
	text-align: left;
}
th {
	font-weight: bold;
	border-bottom: /*#5B5B5B*/ #333 solid 2px;
	background-color: #555;
	padding: 0.4em;	
}
th.in { padding-left: 2em; } /*-- Indented table head -- */

#outerWrapper {
	margin: 0.5em;
	float: left;
	background-color: #00A33D;
	border: 5px solid #FFF;
	max-width: 1200px;
	padding-bottom: 1em;
	/* --- PREFIXES -- */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px; 
-webkit-box-shadow: -3px 3px 6px #775028;
-moz-box-shadow: 5px 5px 8px #333;	
box-shadow: -3px 3px 6px #775028; /* Horiz. L, Vert. L, Shadow color */
}

#outerWrapper header { /*-- Specifying outerwrapper because subpgs use header too */
	/*display: block;*/
	height: 95px;
	margin-top: 0;
/*	padding-right: 10em;*/
	background-color: #006A27;
	border-bottom: 5px solid #0B8D07;
	min-width: 720px;
/* --- PREFIXES --- */	
-webkit-border-radius-top-left: 12px;
-moz-border-radius-topleft: 12px;
border-radius-top-left: 12px; 
-webkit-border-radius-top-right: 12px;
-moz-border-radius-topright: 12px;
border-radius-top-right: 12px; 
}

#logo { /* Site Title graphic holder */
	background-image: url(../graphics/SiteTitle.png);
	height: 42px; width: 208px;
	float: left;
	margin: 1.5em 0em 0em 1em;
}
#logo h1 { display: none; }	

#ctrGraphic { /* graphic used in the center of the top banner */
	background-image: url(../graphics/vroom-plus.png);
	height: 78px; /*width: 168px;*/	 width: 300px;
	float: left;
	margin: 1em 0em 0em 8em;
	margin-left: -1em;
/* --- PREFIXES --- */ 	
	-moz-transition: -moz-transform 2s ease-in; /* <--- ADDED TRANS */
	-webkit-transition: -webkit-transform 2s ease-in;
	-o-transition: -o-transform 2s ease-in;
	transition: transform 2s ease-in
/*	border: 1px solid pink;*/
}

#ctrGraphic:hover { /* <--- ADDED TRANS. */
/* --- PREFIXES --- */
	-moz-transform: translate(250px);
	-webkit-transform: translate(250px);
	-o-transform: translate(250px);
	transform: translate(250px);
	}

header p { /* Also see media sec. at bottom */
	display: none;
}


/*#leftSidebar,*/


nav { /* --- All other navs are based on this --- */
	float: left; 
	width: 188px;
	padding-right: 12px;
	background-color: #996633; 
	border-right: 4px solid #775028;
	border-top: 0px solid #775028;
	text-align: right;
	font: 1.3em Georgia, "Times New Roman", Times, serif;
	letter-spacing: 0.15em;
}

/* vvvv OLD, PRE-TRANS. vvvv /
nav a { 
	text-decoration: none; 
	color: #FFF; }
/ -------------------- */
nav a {
		text-decoration: none;
		color: #FFF;
		opacity: 0.4;
	/* --- PREFIXES --- */
		-moz-transition: all 0.4s ease-in-out;
		-webkit-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
		}
	
nav a:link { /*text-decoration: none; color: #FFF;*/ }
nav a:visited { /*text-decoration: none color: #FFF;*/ }
nav a:hover { /*text-decoration: none;*/ 
	/*font-weight: bold;*/ 
	/*letter-spacing: 0.13em;*/ 
	opacity: 1.0;
	text-shadow: 4px 4px 4px #000;
	}
nav a:active { 
	text-decoration: underline; 
	/*font-weight: bold;*/ }

nav img {
	display: block;
	float: right;
	margin-right: -12px;
	margin-top: 0.5em;
}

#contentWrapper { /* Everything outside of the sidebar */
	margin-left: 230px;
	padding-right: 1.2em;
}

#introBlock { 
	display: block;
	padding: 0em 1.8em 0.5em 0em;
/*	margin-top: -6px;*/
	text-align: justify;
	text-shadow: 1px 1px 1px #000;
	/* --- PREFIXES --- Moved to the media area at bottom -*/
/*-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
column-count: 2;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
column-gap: 2em; */
} 

#introBlock p:first-child:first-letter { font-size:1.7em; }

#columns-3 { 
	/*display: block; */
	float: left;
	/*clear: left;*/
	/*width: 100%;*/
/*	min-height: 200px;*/
	margin-top: 0.6em;
}

#leftColumn { 
	float: left;
	/* --- PREFIXES --- */
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 165px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 165px; /*was 12px */
border-bottom-right-radius: 4px;
border-bottom-left-radius: 165px; 
background: url(../graphics/chinaflag-alpha.png) center center no-repeat;
-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
box-shadow: 3px 3px 6px rgba(0,0,0,0.5);/*#775028;*/ /* Horiz. L, Vert. L, Shadow color */
}
/* -- Below styles so that paragraphs curve around column -- */
#leftColumn p:nth-child(3) { margin-left: 1em; }
#leftColumn p:nth-child(4) { margin-left: 2em; }
#leftColumn p:nth-child(5) { margin-left: 5.7em; text-indent: -1.5em; }
#leftColumn p:nth-child(6) { margin-left: 6.1em; }

#leftColumn h2 { 
	background: url(../graphics/Hdg-China.png) center center no-repeat;
/* --- PREFIXES --- */
-webkit-box-shadow: 3px 0px 6px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 0px 6px rgba(0,0,0,0.5);
box-shadow: 3px 0px 6px rgba(0,0,0,0.5);/*#775028;*/ /* Horiz. L, Vert. L, Shadow color */
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 12px; 
}

#centerColumn { 
	float: left;
	margin-left: 2%; /*margin-right: 1%;*/
	background: url(../graphics/ThtBubb.png) bottom center no-repeat;
/* --- PREFIXES --- */	
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.5);
box-shadow: 0px 3px 6px rgba(0,0,0,0.5); /* Horiz. L, Vert. L, Shadow color */
}
#centerColumn h2 {
	background: url(../graphics/Hdg-Thoughts.png) center center no-repeat;
/* -- PREFIXES --- */	
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;	
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
	/* No box shadow because the shadow's on the bottom */
}

#rightColumn { 
	float: right; 
/*	margin-right: 0.7em;*/
	background: url(../graphics/monitor.png) center no-repeat;
	min-height: 100px;		
/* --- PREFIXES --- */	
-webkit-border-bottom-right-radius: 165px; /* was 12px */
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 165px;
-moz-border-radius-bottomleft: 4px;
   border-bottom-right-radius: 165px;
   border-bottom-left-radius: 4px; 	
-webkit-box-shadow: -3px 3px 6px rgba(0,0,0,0.5);
-moz-box-shadow: -3px 3px 6px rgba(0,0,0,0.5);
   box-shadow: -3px 3px 6px rgba(0,0,0,0.5); /* Horiz. L, Vert. L, Shadow color */
}	
#rightColumn h2 { 
	background: url(../graphics/Hdg-Sites.png) center center no-repeat;
/* --- PREFIXES --- */	
-webkit-box-shadow: -3px 0px 6px rgba(0,0,0,0.5);
-moz-box-shadow: -3px 0px 6px rgba(0,0,0,0.5);
	 box-shadow: -3px 0px 6px rgba(0,0,0,0.5);
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 12px;
   border-top-right-radius: 12px;
   border-top-left-radius: 4px;
}
/* -- Below styles so that paragraphs curve around column -- */
#rightColumn p:nth-child(3) { margin-right: 1em; }
#rightColumn p:nth-child(4) { margin-right: 2em; }
#rightColumn p:nth-child(5) { margin-right: 2.25em; }
#rightColumn p:nth-child(6) { margin-right: 3em; }
#rightColumn p:nth-child(7) { margin-right: 5em; }

/*
#leftColumn p:nth-child(3) { margin-left: 1em; }
#leftColumn p:nth-child(4) { margin-left: 2em; }
#leftColumn p:nth-child(5) { margin-left: 5.7em; text-indent: -1.5em; }
*/


#columns-3 h2 { /* h2 settings for left, center, & right columns */
	border: 1px #FFF solid;
	border-bottom-width: 4px;
	margin: -1.2em -0.31em 0 -0.32em;
	background-color: #FF0000;
}

#columns-3 a:link { 
	color: inherit; 
	text-decoration: none; }
#columns-3 a:visited { color: #D2D2D2; }
#columns-3 a:hover { 
	text-decoration: underline; 
	text-shadow: 1px 1px 5px #000;}
#columns-3 a:active { color: #FFFF00; }

	
#leftColumn,
#rightColumn,
#centerColumn {
/*	width: 29%;*/
	padding: 1.2em 0.5em 1em 0.5em;
	padding-top: 1.2em; 
	width: 32%;
	min-height: 200px;	
	background-color: #0000FF;
/* -- Below not supported in most browsers yet -- PREFIXES --- */
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;	
}	
/* --------------- SUB PAGES' STYLES ------------------- */
.subpg { 
	background-color: #5B5B5B; 
	padding: 0 3em;
}		
.signpost { 
	width: 579px;
	float: left;
	margin-top: -40px;
}
article { }
.subpg a {
	text-decoration: none;
	color: #FFF;
}	
.return { 
	float: right;
	height: 32px; width: 100px;
/*	background: url(PgHd-RET.png) no-repeat center;*/
	background: #035E9F;
	border: 3px solid #FFF;
	padding-top: 11px;
	text-align: center;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	margin: -40px 0 20px auto;
	font-weight: bold;
	/* --- PREFIXES --- */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
  border-radius: 8px;
-webkit-box-shadow: 4px 2px 4px #333;
-moz-box-shadow: 4px 2px 4px #333;
box-shadow: 4px 2px 4px #333;
}
.return:hover { 
	background-color: #B5273C;
	text-shadow: 1px 1px 5px #000; 
}

.subpg #container {  /* ==== The BLUE pages' version of the container div, as opposed to browns' ==== */
	background: #035E9F;
	border: 4px solid #FFF;
	padding: 2em 4em;
	clear: left;
	/* --- PREFIXES --- */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
  border-radius: 12px;
-webkit-box-shadow: 4px 4px 8px #333;
-moz-box-shadow: 4px 4px 8px #333;
  box-shadow: 4px 4px 8px #333;
}	

h3 {
	/*font-size: 0.8em; <-- This was fine b4 Google fonts */
	font-size: 1em;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px 2px #333;
}	
.subpg h3 { display: inline; }  /* ===== So heading lines up with time on blue pages ==*/

time { 
	font-size: 0.75em;
	color: #CCC;
/*	margin: auto 0.5em auto -4.5em;*/
	float: right;
	display: block;
}
.subpg article p { 
	text-indent: 1.5em;
}
.subpg article p:nth-child(2) {
	text-indent: 0; 
}
.subpg article p:last-child { margin-bottom: 3em;  }

/*------------ Brown Link Page Styles --------------------*/
.brownPg {
	background: rgba(91,91,91,1);
	padding: 1em 2em 1em 1em;
		/*---PREFIXES -- */
-moz-transition: all 40s linear; /* <--- added trans. */
-webkit-transition: all 40s linear;
-o-transition: all 40s linear;
	transition: all 40s linear;

}
.brownPg:hover { background: rgba(0,0,128,1);} /*navy --- added for trans. -- */

.brownPg #container {
	/*background: url(smilin.png) no-repeat bottom right;
	padding-bottom: 180px;*/
}
.brownPg img {  
	float: right; 
	margin-left: 10px;
}
.brownPg nav {
	display: block;
	margin: auto 1%;
	float: none;
	width: auto;
	background: none;
	font-size: 0.75em;
	font-weight: bold;
	color: /*#D2D2D2;*/#FFFF00; /* <-- unlinked nav item color */
	text-align: center;
	padding: 0.5em;
	border-bottom: #999 dotted 1px;
	border-right: none;
	/* inherits font & letter spacing from main "nav" */
}	
.brownPg nav ul { 
	display: inline; 
	list-style-type: none;
}
.brownPg nav li { 
	display: inline; 
	margin: auto 0.75em;
}

/* ===== Hyperlinks in both the brown and blue pgs ===== */
#container a:link { 
	color: #FFF; 
	text-decoration: underline; }
#container a:visited { color: #CCC	; }
#container a:hover {
	color: #FFF; 
	text-shadow: 2px 2px 2px #000; }
/* ===== END ====*/

/* ======== Top navigation on the brown pgs ======= */
.brownPg nav a { 
	color: #FFF;
	text-decoration: none; }
.brownPg nav a:link { /*text-decoration: none; */} 
.brownPg nav a:visited { /*color: #FFF;*/ }
.brownPg nav a:hover { 
	text-shadow: 2px 2px 2px #00A33D; }
	/*letter-spacing: inherit; 
	 ==== END ====*/

.brownPg h2 {
	float: left;
	padding: 3em 1em;
	margin: 0 0.8em 0.5em auto;
	border: 6px solid #000;
	/*-- PREFIXES -- */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 5px 5px 10px #999;
-moz-box-shadow: 5px 5px 10px #999;
box-shadow: 5px 5px 10px #999;
}
#Me h2 {
	background: url(../graphics/PgHd-Me.png) no-repeat center #FFF;
	width: 138px; height: 65px;
}
#Updates h2 {
	background: url(../graphics/PgHd-upd.png) no-repeat center #FFF;
	width: 185px; height: 26px;
}
#AboutSite h2 {
	background: url(../graphics/PgHd-aboutSite.png) no-repeat center #FFF;
	width: 124px; height: 93px;
}
@media screen and (min-width: 900px) {
	article div {
		-webkit-column-count: 2;
		-webkit-column-gap: 2em;
		-moz-column-count: 2;
		-moz-column-gap: 2em;
		-moz-column-rule: 1px dotted #999;		
		column-count: 2;
		column-gap: 2em;
		text-align: justify;
		padding-bottom: 1em;
		border-bottom: 1px solid #CCC;
	}
	.brownPg #container {
		-webkit-column-count: 2;
		-webkit-column-gap: 2em;
		-moz-column-count: 2;
		-moz-column-gap: 2em;
		column-count: 2;
		column-gap: 2em;
		text-align: justify;
	}
}

@media screen and (min-width: 900px) {
#introBlock {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
	-webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  -o-column-gap: 2em;
  column-gap: 2em;
  }
	
header p {
	display: inherit;
	text-align: right;
	font-style: italic;
	text-shadow: 2px 2px 2px #000;
	float: right;
	width: 16em;
	margin-top: 2em; margin-right: 2%;
	
}	
    		
} /* <-- End, @media declaration */