﻿.imagewithtext {
font-family: "Times New Roman", serif;
font-weight: normal;
width: 200px;
float: left;
display: inline;
border-color: #ccc #222 #222 #ccc;
border-width: 5px;
border-style: dotted;
margin: 0 10px 5px 0;
padding: 0 10px 10px;
text-align: center;
}
.red {color:red}
p {
font-size: 19px;
}

.imt {
margin-left:-500px;
position: absolute;
width: 250;
height: 120;
}
.imt1 {
margin-left:170px;
position: absolute;
width: 350;
height: 120;
}

.popup {
position: relative;
z-index: 1;
}

.popup:hover {
background-color: transparent;
z-index: 2;
}

.popup span {
position: absolute;
visibility: hidden;
}

.popup span img {
border-width: 0;
padding: 2px;
}
A:link.popup {color: black; text-decoration: none;}

.popup:hover span {
visibility: visible;
top: -50;
left:3 px;
}
body{
margin:10px;
	background: #FFF;
}

.popup1 {
position: relative;
z-index: 1;
}

.popup1:hover {
background-color: transparent;
z-index: 2;
}

.popup1 span {
position: absolute;
visibility: hidden;
}

.popup1 span img {
border-width: 0;
padding: 2px;
}
A:active.popup1 {color: blue;}
A:link.popup1 {color: red; }
A:visited.popup1{color: indigo;text-decoration: none;}
A:hover.popup1 {color: lime; text-decoration: none;font-weight: bold}
.popup1:hover span {
visibility: visible;
top: 0;
left:3 px;
}

.popup2 {
position: relative;
z-index: 1;
}

.popup2:hover {
background-color: transparent;
z-index: 2;
}

.popup2 span {
position: absolute;
visibility: hidden;
}

.popup2 span img {
border-width: 0;
padding: 2px;
}
A:active.popup2 {color: blue;}
A:link.popup2 {color: lime; }
A:visited.popup2{color: indigo;text-decoration: none;}
A:hover.popup2 {color: lime; text-decoration: none;font-weight: bold}
.popup2:hover span {
visibility: visible;
top: -350;
left: -300;
}


#footer {
background-image:url(../fon/metal-texture-011.jpg);
color : #fff;
font-size : 50%;
padding : 5px;
clear : both;
}

#footer a {
color : #fff;
}

#footer a:hover {
color : #f00;
}

#footer p {
padding : 2px;
text-align : center;
font-size: 12px;
}
.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		display: none;
		pointer-events: none;
	}

	.modalDialog:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }
	
	.modalDialog1 {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		display: none;
		pointer-events: none;
	}

	.modalDialog1:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog1 > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close1 {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close1:hover { background: #00d9ff; }
	
	.modalDialog2 {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 800ms ease-in;
		-moz-transition: opacity 800ms ease-in;
		transition: opacity 800ms ease-in;
		display: none;
		pointer-events: none;
	}

	.modalDialog2:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog2 > div {
		width: 800px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close2 {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close2:hover { background: #00d9ff; }