body{
margin:0;
padding:0;
line-height: 1.5em;
}

/*b{font-size: 110%;}*/
em{color: red;}

#fly
{

	position: absolute;
	left: -500px;
	width: 47px;
	height: 68px;
	
}

#fly:hover {color:red; font-size:200%;}


#top{
/*background: #EAEAEA;*/
height: 3px; /*Height of top section, origin is 90px*/

}

#top h1{
margin: 0;
padding-top: 5px;  /* origin is 15px */
text-align: center;
}

#wrapper{
float: left;
width: 100%;
}


/* change 200px(100px) to 0 6% 0 100px below and in #right change 200px and -200px to 15% and -15%, move "right" div block right after div called "top"  */
/* in index.php. Also change responsive layout 840 #right, reverse the #right to display: none  */
#content{
margin: 0 100px 0 104px; /* 0 6 0 7 Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth. No #rightcolumn and #leftcolumn width is used, customize to your needs. */
/* 16% (6%) is used instead of original 15% to give more room as <li></li> content in #rightcolumn in chrome was having room trouble. */
text-align: justify;
padding: 0 0 0 0.5%;
/*opacity: 0.9;*/
/*overflow: visible;*/
}


.aligner{
text-align:center;
}

.alignerb{
text-align:left;
margin-left: 10%;  /*  22%  */
}

.alignerc{
text-indent: 35px;
}

.alignerd{
text-align: left;
margin: 0 0 0 7%;
}

.alignere{
text-align:center;
border: 1px solid black;
border-radius: 15px;
background: yellow;
padding: 7px;
height: auto;
}

.alignerf{
text-align: center;
color: blue;
/*font-style: italic;*/
}

.alignerg{
float: left;
/*color: #006000; /* dark green, almmost black */
color: blue;
}

.alignerh{
float: right;
/*color: #006000;  /* dark green, almost black */
color: blue;
/*font-weight: bold;*/
}

.usaphone{
color: blue;
text-align: center;
}


table{
width: 300px;
border: 1px solid black; 
text-align: center; 
background: #FFFF00; 
padding: 14px;
border-spacing: 2px; /* this  is space between <td>. Since this table has only one <td> then this setting is not seen in browesers. */
margin-left: auto;  /* this is to center the entire table. */
margin-right: auto; /* this is to center the entire table. */
}


#leftlong{
float: left;
width: 3%; /* breaks stuff on mobiles! Width of #leftlong(max-width: 840px) !MUST! be also set in px in mobile settings below NOT to break stuff! */
margin-left: -100%;
margin-top: 190px;
/*background: yellow;*/
word-wrap: break-word;
color: red;
}

#left{
float: left;
width: 118px; /* 12% Width of left column in percentage */
margin-left: -100%;   /* -100%  */
text-align: left;  /* used to press your image against the left margin, suggested by https://validator.w3.org  */
/*background: #C8FC98;*/
}

#right{
float: right;
width: 200px; /*Width of right column in pixels. Origin 15%. */
margin-left: -200px; /* -15% Set margin to that of -(RightColumnWidth)*/
text-align: right;  /* used to press your image against the right margin, suggested by https://validator.w3.org  */
/*background: #FDE95E;*/
/*position: relative;*/
/*overflow: visible;*/
}

.text{    /* it's not used anywhere.  */
clear:both;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.gutter{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#myfooter
{
	
	/*clear: left; /**/
	float: left; /* If on it makes your footer move up and down togther with the #leftimage when the #leftimage's margin-top is changed. */
	border: 2px solid;  /*this one is used together with border-radius (1 line below) and padding at the end of this container */
	border-radius: 15px 50px 30px;
	/*Presto is Opera's rendering engine. This thing does not support the versions + OS as per list found here http://www.conditional-css.com/u4ea_support  */
	/*[if Presto] border: 0px;*/   
	min-height: 20px;
	/*min-width: 30%;   /* 44 */
	width: 77%; 
	text-align: center;
	background-color: yellow;
	padding: 4px;
	margin-left: 0%;    /* 27 */
	margin-right: 16%;   /* 27 */
	margin-bottom: 2%;
	margin-top: 0px;
		
		
}  

.foot{
margin: 0 32% 0 32%;  /* 0 32 0 32 */
/*width: 33%;*/
border: 2px solid;
border-radius: 15px 50px 30px;
background: yellow;
padding: 4px;
text-align: center;
}

a:hover{
color: red;
}

a{
color: blue;
}

#contact, #flip {
    padding: 5px;
    text-align: center;
  /*background-color: #e5eecc;*/
    border: solid 1px #c3c3c3;
}

#flip2 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    /*background-color: #FFFF00;*/ /*this is yellow*/
    border: solid 1px #c3c3c3;
    display: none;
}

#flip2:hover {
color: red;
cursor: pointer;
}

#contact {
    padding: 20px;
    display: none;
}

#hasjs {
display: none;
text-decoration: underline;
color: blue;
}

#hasjs:hover{
color: red;
cursor: pointer;
}

#nojs {
color: red;
}

#hasmail{
display: none;
cursor: pointer;
}

#hasmail:hover{
color: blue;
cursor: pointer;
}

#nomail{
color: red;
text-align: center;
border: solid 1px #c3c3c3;
padding: 5px;
}

#phones{
text-align: center;
/*color: #53FF53;  /* very light green */
color: red;
display: none;
visibility: hidden;
}

.blue{
color: blue;
}

.red{
color: red;
}

#video {
padding: 5px;
text-align: center;
/*background-color: #e5eecc;*/
background-color: #FFFF00;
border: solid 1px #c3c3c3;
display: none;
width: 350px;    /* 480px; 600px; 40% */
position: absolute;
}

#videob {
padding: 5px;
text-align: center;
/*background-color: #e5eecc;*/
background-color: #FFFF00;
border: solid 1px #c3c3c3;
display: none;
width: 600px;    /* 480px; 600px; 40% */
position: absolute;
}

.close-image{
float:right;
position:relative;
margin-top: -6px;
margin-right: -8px;
}

#noflash {
padding: 5px;
text-align: center;
/*background-color: #e5eecc;*/
background-color: #FFFF00;
border: solid 1px #c3c3c3;
display: none;
width: 300px;    /* 480px; 600px; 40% */
position: absolute;
}

/* ####### responsive layout CSS ####### */ 

@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
	
	#right{
	display: none;  /* either this one + 1 line below or everything else below +- margin-top: */
	visibility: hidden;  /**/
	/*float: none;         /*  none  */
	/*width: 100%;      /*  100%  */
	/*margin-left: 0%;      /*  0 */
	/*margin-top: -160px;   /* my test. moves it up to make it totally out of sight as it goes first in index.php to see the right corner of #content's letters that overlaps on #right*/
	/*clear: both;*/
	}
	
	#content{
	margin-right: 0%;   /*  0%  */
	margin-left: 104px;     /* 16% my setting, original is 35% or 23%(5 or 19 reverse) if #leftcolumn is turned on  */
	text-align: justify;   /*  my setting  */
	padding-right: 1.5%;   /* my settimg  */
	}

	#left{
	float: left;
	width: 30%;       /*  30% my setting. */
	margin-left: -100%;  /*  -94 my setting  */
	background: none;   /*  my setting  */
	}

	#leftlong{   /* #leftlong is entirely mine */
	float: left;
	width: 80px;   /* percents ONLY HERE fail in opera-mini!!! DO NOT USE PERCENT HERE!!! Original is 10%=80px(5 reverse) if #leftcolum is turned on */
	margin-left: -100%;
	/*background: yellow;*/
	word-wrap: break-word;
	}

	.foot{
	margin: 0 24% 0 24%;
	}

}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	#left{
	float: none;
	width: 100%;
	clear: both;
	margin-left: 0;
	}

/* my test setting, works OK on opera mini */
	#leftlong{
	float: none;
	width: 100%;  /* 100%  */
	clear: both;
	margin-left: 0;
	}
	
	#content{
	margin-left: 0%;  /*  0; */
	}

	.foot{
	margin: 0 24% 0 24%;
	}

	.alignerg{
	display: none;
	visibility: hidden;
	}

	.alignerh{
	display: none;
	visibility: hidden;
	}

	.usaphone{
	display: none;
	visibility: hidden;
	}

	#phones{
	display: block; /* origins is block */
	visibility: visible; /* origin is visible */
	}

	.blue{         /* this one is used when JavaScript is off, to turn off showing phones for two times  */
	display: none;  /* origin is none */
	visibility: hidden; /* origin is hidden */
	}
	
	#nojs{
	display: none;
	visibility: hidden;	
	}

	

/*	#hasjs {*/       /*The below block is an eaxmple on how to force #hasjs to be visible no matter what. Careful, it may break things. */
/*	display: block;*/
/*	visibility: visible;*/
/*	}*/
/**/
/*	#hasmail{*/
/*	display: block;*/
/*	visibility: visible;*/
/*	}*/	
	
}

/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) { 

	html {
		-webkit-text-size-adjust: none;
		}

}