@charset="UTF-8";
/*-- @media syntax:
@media not|only mediatype and (mediafeature and|or|not mediafeature) 
{
  CSS-Code;
}
*/

.example {
	padding: 20px;
	color: white;
}

/* @media RESPONSIVE SCREEN CSS */

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*1 Extra small devices (phones, 400px and down) */

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

.example {
	background:#00FFFF;
}

.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width:20%;
	height:auto;
}

.pic-small {
	width:45%;
	height:auto;
}

.pic-big {
	width:90%;
	height:auto;
}

.pic-huge {
	width:90%;
	height:auto;
}


.zoom_tiny:hover {
    position:relative;
     width:60%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:90%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-150px;
     width:250%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}



aside {
	display:block;
	float:right;
	width: 20%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
	font-size:: 95%;
  font-weight:lighter;
}

header, address, article, footer, nav, section, div {
	color: #000;
	background-color:#FF0000;
	font-size: 95%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 0%;
	padding: .5%;
	border-radius:10px;
	border: thin solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*2 Small devices 
landscape phones and portrait tablets, 
400px and up) */

@media only screen and (min-width: 401px) {

.example {
	background: #00FF00;/*light green*/
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 15%;
	height:auto;
}

.pic-small {
	width: 25%;
	height:auto;
}

.pic-big {
	width: 35%;
	height:auto;
}

.pic-huge {
	width: 75%;
	height:auto;
}


.zoom_tiny:hover {
    position:relative;
     width:30%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:45%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-75px;
     width:150%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}


aside {
	display:block;
	float:right;
	width: 25%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}



header, address, article, footer, nav, section, div {
	color: black;
	background-color:#00FF00;/*light green*/
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 0%;
	padding: .5%;
	border-radius:10px;
	border: thin solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*3 Medium devices 
landscape tablets and small laptop, 
768px and up */
@media only screen and (min-width: 768px) {

.example {
	background: #0CF;/*light blue*/
}



.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 24%;
	height:auto;
}

.pic-small {
	width: 30%;
	height:auto;
}

.pic-big {
	width: 47%;
	height:auto;
}

.pic-huge {
	width: 80%;
	height:auto;
}




.zoom_tiny:hover {
    position:relative;
     width:45%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:60%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:90%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:100%;
    height:auto;
    display:block;
    z-index:999;
}


/* these are production sizes
.pic-tiny {
	width: 10%;
	height:auto;
}

.pic-small {
	width: 20%;
	height:auto;
}

.pic-big {
	width: 30%;
	height:auto;
}

.pic-huge {
	width: 65%;
	height:auto;
}
*/



.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-110px;
     width:200%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}


aside {
	display:block;
	float:right;
	width: 15%;
	height: auto;
	background-color: #F0F;/*light blue*/
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}



header, address, article, footer, nav, section, div {
	color: #000;
	background-color:#0CF;/*light blue*/
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 0.2%;
	padding: 1%;
	border-radius:10px;
	border: medium solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*4 Large devices 
15 inch laptops and desktops, 
1200px and up */
@media only screen and (min-width: 1200px) {

.example {
	background: orange;
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}

.pic-tiny {
	width: 8%;
	height:auto;
}

.pic-small {
	width: 16%;
	height:auto;
}

.pic-big {
	width: 32%;
	height:auto;
}

.pic-huge {
	width: 70%;
	height:auto;
}



.zoom_tiny:hover {
    position:relative;
     width:15%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:32%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:65%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:90%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-110px;
     width:200%;
    height:auto;
    display:block;
    z-index:999;
}


.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:45%;
	height:auto;
}

.pic-big-aside {
	width:45%;
	height:auto;
}

.pic-huge-aside {
	width:45%;
	height:auto;
}


aside {
	display:block;
  float:right;
	width: 15%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}



header, address, article, footer, nav, section, div {
	color: #000;
	background-color: orange;
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 1%;
	padding: 1%;
	border-radius:10px;
	border: medium solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/

/*5 Larger devices 
over 15 inch laptops and desktops
1600px and up */

@media only screen and (min-width: 1600px) {

.example {
	background: pink;
}


.hidden_aside {
	display: none;
	background-color: #EAEAEA;
}

.unhidden_aside {
	display: block;
	background-color: #00FFFF;
}


.pic-tiny {
	width: 5%;
	height:auto;
}

.pic-small {
	width: 10%;
	height:auto;
}

.pic-big {
	width: 25%;
	height:auto;
}

.pic-huge {
	width: 45%;
	height:auto;
}



.zoom_tiny:hover {
    position:relative;
     width:10%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_small:hover {
    position:relative;
     width:20%;
    height:auto;
    display:block;
    z-index:999;
}


.zoom_big:hover {
    position:relative;
     width:45%;
    height:auto;
    display:block;
    z-index:999;
}

.zoom_huge:hover {
    position:relative;
     width:75%;
    height:auto;
    display:block;
    z-index:999;
}



.zoom_aside:hover {
    position:relative;
/*   top:-25px;*/
    left:-100px;
     width:200%;
    height:auto;
    display:block;
    z-index:999;
}

.pic-tiny-aside {
	width:100%;
	height:auto;
}

.pic-small-aside {
	width:100%;
	height:auto;
}

.pic-big-aside {
	width:100%;
	height:auto;
}

.pic-huge-aside {
	width:100%;
	height:auto;
}


aside {
	display:block;
	float:right;
	width: 10%;
	height: auto;
	background-color: #F0F;
	border: thin solid #000;
	border-radius:10px;
	padding: 1%;
	text-align: center;
	vertical-align: top;	
	margin-top: 0%;
	margin-right: 3%;
	margin-bottom: 0%;
	margin-left: 3%;
}



header, address, article, footer, nav, section, div {
	color: #000;
	background-color: pink;
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: .5%;
	padding: 1%;
	border-radius:10px;
	border: medium solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
}
/*-------------------------------------------------*/
/*-------------------------------------------------*/

/* START HTML TAGS */



a:link {
	color:blue;
}

a:visited {
	color:purple;
}

a:hover {
	color:orange;
}

a:focus {
	color:green;
}

a:active {
	color:red;
}



/*
header, address, article, footer, nav, section, div {
	color: #000;
	background-color: #00FFFF;
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 1%;
	padding: 1%;
	border-radius:10px;
	border: medium solid #FF0;
	font-family:Arial, Helvetica, sans-serif;
}
*/


body {
	color: #000;
	background-color:#0FF;/*light blue*/
	font-size: 100%;
	font-weight: normal;
	clip: rect(auto,auto,auto,auto);
	margin: 0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}




.button {
	background-color:#FF0;
	border:thin;
	color: #000;
	padding: 15px 32px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin: 4px 2px;
	cursor: pointer;
}

.background_grey {
	background-color:#CCC;
}

.background_yellow {
	background-color: #FF0;
}

.background_green {
	background-color:#00FF00;
}

.background_green_dark {
	background-color:#339900;
	color:#FFF;
}


.background_black {
	background-color:#000000;
	color:#FFF;
}


.background_aqua-blue {
	background-color:#0FF;
}

.background_grey_dark {
	background-color: #666;
	color: white;
}

.background_grey_light {
	background-color: #EAEAEA;
		}

.background_red {
	background-color: red;
	color: white;
}

.h1_properties {
	font-size: 120%;
	font-weight: bold;
}

.h2_properties {
	font-weight: bold;
	font-size: 110%;
}

.h3_properties {
	font-weight: bold;
	font-size: 110%;
}

/*display ALL borders of all boxes
* {
	border:thin solid rgba(150 150 150 0.1);
	}
*/


/*
div {
	bottom: auto;
	border: medium solid #00F;
	font-size: 100%;
	background-color: #5FFFE7;
	padding: 1%;
	}
*/

img {
/*
	display: inline-block;
	position: relative;
	background-color: #FF0;
	background-position: center;
	margin: 1%;
	border: thin solid #00F;
	box-sizing:border-box;	
		padding: 1px;
	min-width: 20%;	
	max-width: 90%;
	width: 200px;
	float:left;
	*/
	}

#image_round {
	display:block;
	border-radius:100%;
	/*	
	border:thick;
	background-color: red;
	background-image: url('logo.png');
	background-position: center;
	*/
}

#Video_Device_Options {
	width: 70%;
}

#gaming {
	width:45;
}

.hidden {
	display: none;
	background-color: #EAEAEA;
}

.unhidden {
	display: block;
	background-color: #00FFFF;
}

.hidden2 {
	display: none;
	background-color: #EAEAEA;
}

.unhidden2 {
	display: block;
	background-color: #00FFFF;
}

.auto-size {
	width:auto;
}


figure {
	background-color: #CCC;
	padding: 0px;
	color: #000000;
	float: none;
	border: thin solid #000;
	font-size: 100%;
	height: auto;
	width: auto;
	margin-top: 0%;
	margin-right: 2%;
	margin-bottom: 0%;
	margin-left: 0%;
}

span.dropt {
	border-bottom: thin dotted;
	background: #ffeedd;
}

span.dropt:hover {
	text-decoration: none;
	background: #ffffff;
	z-index: 6;
}

span.dropt span {
	position: absolute;
	left: -9999px;
	margin: 20px 0 0 0px;
	padding: 3px 3px 3px 3px;
	border-style:solid;
	border-color:black;
	border-width:1px;
	z-index: 6;
}

span.dropt:hover span {
	left: 2%;
	background: #ffffff;
}

span.dropt span {
	position: absolute;
	left: -9999px;
	margin: 4px 0 0 0px;
	padding: 3px 3px 3px 3px;
	border-style:solid;
	border-color:black;
	border-width:1px;
}

span.dropt:hover span {
	margin: 20px 0 0 170px;
	background: #ffffff;
	z-index:6;
}

span.imgswap:hover img {
	visibility:hidden;
}

span.imgswap {
	background-image:url("/photosr.us/css/bottom-image.jpg");
	background-repeat: no-repeat;
	display:block;
}

/*css classes ONLY*/
.dropv, .dropv ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.dropv a {
	display: inline;
	width: 170px;
}

.dropv li {
	float: left;
	padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
	position: absolute;
	background: #993399;
	padding: 0px 0px 0px 4px;
	width: 170px;
	left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
	left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
}

.dropv li ul li a:hover {
	color: yellow;
	background:#663399;
}


.font_uppercase {
	text-transform: uppercase;
}

.font_lowercase {
	text-transform: lowercase;
}

.font_capitalize {
	text-transform: capitalize;
}


.font_small {
	font-family: "Courier New", Courier, monospace;
	font-size: 75%;
	color: #000;
	font-weight: bold;
}

.font_blinking {
	background-color: #FFFFFF;
	font-size: 100%;
	color: #000;
	text-decoration: blink;
}

.menu_font_size {
	font-size: 12px;
}