/* trentrlogan.com */

body {
	margin: 0px;
	/*background-color: #8c3a0b;*/
	background-color: #335;    
	font-family: sans-serif;
	font-size: small;
}

#panel {
	display: block;
}

blockquote {
}

ul { 
	padding-left: 1.2em; 
}

.linespace li {
	margin-bottom: 1em;
}

.id {
}

.center-image {
	margin-left: auto;
	margin-right: auto;
}

img.flipped {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.quotation {
	background-color: #cccccc;
	background-image: url("images/quotes.png");
	background-position: left top;
	background-repeat: no-repeat;
	width: 70%;
	padding: 5%;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
}

.flippedanswer {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg); 
	-o-transform:rotate(-180deg); 
	transform:rotate(-180deg);
	ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	font-size: xx-small;
	color: #999999;
}

#container {
	margin-left: auto;
	margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0px;
	background-color: white;
}

.xcubicle {
	background: rgba(200,200,200,.8);
	width:250px;
	border-radius: 5px;
	margin: 1%;
	padding: 1%;
}

.pics {
	background: rgba(255,255,255,.8);
	width:430px;
	border-radius: 10px;
	margin: 2%;
	padding: 2%;
}

.tiles {
	width:300px;
	margin: 1%;
	padding: 1%;
    float: left;
}

.clearcubicle {
	background: transparent;
	width:94%;
	border-radius: 10px;
	margin: 2%;
	padding: 1%;
}
	
#header {
	text-align: center;
	background: rgba(255,255,255,.8);
	border-radius: 10px;
	margin: 2%;
	padding: 1%;
}

#leftcol {
	background: rgba(255,255,255,.8);
	padding: 1%;
}

#rightcol {
	padding: 1%;
	background: rgba(255,255,255,.8);
}

#onecol {
	padding-left: 1%;
        padding-right: 1%;
        padding-top: 0%;
        padding-bottom: 0%;
        margin: 0%;
	background: white;
}

#footer {
	padding: 1%;
	/*background-color: #b54b0e;*/
    background-color: #003;
	color: white;
}

.copyright {
	text-align: center;
}

#menu_button {
	display: none;
}



/*************************************/
/* NAVIGATION BAR                    */
/*************************************/

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003;
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
    display: block; /*inline-block */
    color: white;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #333;}

ul.topnav li a.active {background-color: #006;}

ul.topnav li.right {float: right;}

/*************************************/

/* <500, 501-765, 765, >766, <500 */

@media screen and (max-width: 500px) {
#container {
	width: 100%;
}

#menu_button {
	display: block;
	position: absolute;
	left: 10px;
	top: 10px;
}

#header {
	display: none;
	width: 94%;
	height: 135px;
	clear: both;
}
#leftcol {
	width: 98%;
	float: none;
}
#rightcol {
	width: 98%;
	float: none;
}
#footer {
	clear: both;
}

.pics {
	width:92%;
	margin: 2%;
	padding: 2%;
}

.pic420 {
	width: 100%;
}
.vid420_315 {
	width: 330px;
	height: 248px;
}

#panel {
	display: none;
	position: absolute;
	width: 100%;
	background-color: rgba(255, 0, 0, 0.2);
}
}



/*********************************************************************************/
@media screen and (max-width: 765px) and (min-width: 501px) {

#container {
	width: 100%;
}
#header {
	display: block;
	width: 94%;
	clear: both;
	background-size: 100%;
}
.header {
	width: 100%;
}
#leftcol {
	float: left;
	width: 61%;
}
#rightcol {
	float: left;
	width: 27%;
}
#footer {
	clear: both; 
}
.pic420 {
	width: 420px;
}

.vid420_315 {
	width: 420px;
	height: 315px;
}
}


/************************************************************************************/
@media screen and (min-width: 766px) {

#leftcolumn {
	float: left;
	width: 67%;
	margin: 0px;
	padding: 0px;
}
#rightcolumn {
	float: right;
	width: 33%;
	margin: 0px;
	padding: 0px;
}

#container {
	width: 766px;
}
#header {
	display: block;
	width: 94%;
	clear: both;
}
.header {
	width: 100%;
}
#leftcol {
	float: left;
	width: 61%;
}
#rightcol {
	float: left;
	width: 27%; 
}
#footer {
	clear: both;
}
.pic420 {
	width: 420px;
}
.vid420_315 {
	width: 420px;
	height: 315px;
}
}

@media screen and (max-width: 500px) {



/*************************************/
/* NAVIGATION BAR                    */
/*************************************/

ul.topnav li a {
    padding: 16px 16px;
}

ul.topnav {
    border: 1px solid #999;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
}

ul.topnav li {
	float: left;
	border-bottom: 1px solid #999;
}

ul.topnav li:last-child {
	border-bottom: none;
}

ul.topnav li.right, ul.topnav li {
	float: none;
}

/*************************************/

}