@charset "utf-8";
/* CSS Document */
 

.parallelogram1,  .parallelogram2, .parallelogram3
{    	
	height: 30px; 
	width: 100px; 
	-moz-transform: skew(-20deg); 
	-o-transform: skew(-20deg); 
	-webkit-transform: skew(-20deg); 
	transform: skew(-20deg);

 
	margin-left: 15px;
	margin-top:   9px;
	border-radius: 15px;
	box-shadow: 2px 2px 3px 3px black;
}


.parallelogram1 
{ 
	background-color: #F0F; 
}

.parallelogram2 
{ 
	background-color: purple; 
}

.parallelogram3 
{ 
	background-color: #2E0854; 
}

#radioEnglish, #radioRussian, #radioToEnglish
{
	font-size: 24px;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	text-align:center;	
	margin-left: 30px;  
} 

#radioEnglish
{
	color:#F0F; 
}

#radioRussian
{	 
	color: purple; 
}

#radioToEnglish
{ 
	color:#2E0854; 
}










#checkFor2
{
	height: 20px;  
	width:  20px;
	position:relative;
	top:3px;
}
 
 
#checkForCSS
{
	visibility:hidden;	
	font-family:Agency FB;
	font-size: 24px;	
	line-height: 34px;		
}


#displayCount
{
	color: blue; 
	font-size: 22px; 
	font-family:Agency FB;	
}

#displayRemaining
{
	color: maroon;  
	font-size: 22px; 
	font-family:Agency FB; 
	position:relative; 
	left: 220px;  
	top:-22px;
	width: 20px;	
}

#percentDone
{
	text-align:center; 
	width: 230px; 
	font-size: 22px; 
	font-family:Agency FB;
	position:relative; 
	left: -5px;  
	top: 5px;	
	
}



.keyWordsBox
{	 
	margin-top:30px; 
	height:35px;  
	width:230px; 
	font-size:24px;
	font-family:Geneva, sans-serif;  
	color: orange;    
	border:2px solid orange;
	
    box-shadow: 1px 2px 3px 4px black; 
	-moz-box-shadow: 1px 2px 3px 4px black; 
	-webkit-box-shadow: 1px 2px 3px 4px black; 
	
	 
	
 	text-shadow: 2px 2px 3px rgba(0,0,0,1), 
              2px 3px 3px rgba(0,0,0,1), 
              3px 2px 3px rgba(0,0,0,1), 
              2px 2px 3px rgba(0,0,0,1); 
			  
	text-shadow: 1px 2px 3px 4px black; 
	letter-spacing:2px;	
	margin-bottom: 15px;
	border-radius: 5px;
}


.keyWordsBox2
{
	color:orange;

	box-shadow:  0px 0px 20px 0px orangered;
	-webkit-box-shadow: 0px 0px 20px 0px orangered;
	-moz-box-shadow: 0px 0px 20px 0px orangered; 

	text-shadow: 5px 5px 3px orangered;
	-webkit-text-shadow: 5px 5px 3px orangered;
	-moz-text-shadow: 5px 5px 3px  orangered; 
}

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 225px;         
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    position:relative;
    top:  -10px;
              
}

.progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;    
}




.blue span {
    background-color: #34c2e3;   
}

.purple span {
      xxbackground-color: #fecf23;
	 background-color: purple;
      background-image: linear-gradient(top, #fecf23, #fd9215);  
}   

.green span {
      background-color: #a5df41;
      background-image: linear-gradient(top, #a5df41, #4ca916);  
}







.stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);            
    
    animation: animate-stripes 3s linear infinite;             
}

@keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

.shine span {
    position: relative;
}

.shine span::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 3px;
    animation: animate-shine 2s ease-out infinite;             
}

@keyframes animate-shine {
    0% {opacity: 0; width: 0;}
    50% {opacity: .5;}
    100% {opacity: 0; width: 95%;}
}

.glow span {
    box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;    
    animation: animate-glow 1s ease-out infinite;          
}

@keyframes animate-glow {
 0% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
 50% { box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
 100% { box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }













.submitClear
{
	margin-top:10px;
}

.circleMarginLanguage
{
	margin-top:15px;	
}

.circleMarginDirection
{
	margin-top:30px;	
}

.languageTop
{
	 height: 45px;
     width: 90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background: #F0F;
	 margin-top:5px;
	 
	 xborder:3px solid gray;
     box-shadow: 1px 2px 3px 4px black;
}

.languageBottom 
{
	 height: 45px;
     width:  90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     background: purple;
	 margin-top: 10px;
	 margin-bottom: 5px;
	 
    box-shadow: 1px 2px 3px 4px black;
}



.directionTop
{
	 height: 45px;
     width: 90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:  #F0F;
	 margin-top: 5px;
	 
	 box-shadow: 1px 2px 3px 4px black;
}

.directionBottom
{
	 height: 45px;
     width:  90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     background: purple;
	 margin-top: 10px;
	 margin-bottom: 5px;
	 box-shadow: 1px 2px 3px 4px black;
}

#dirUp
{
	font-size: 24px;
	color: #F0F;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	margin-left:  8px;
}

#dirDown
{
	font-size: 24px;
	color: purple;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	margin-left:  8px;
}






 
#sortByText1, #sortByText4, 
#sortByText2, #sortByText3, 
#sortByText5, #sortByText6,
#sortByText4a, #sortByText7
{
	font-size: 24px;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	
}
 
#sortByText1
{
	color: red; 
	margin-left:  24px;	 
}

#sortByText2
{
	color: orange;
	margin-left:  68px;	
	
}

#sortByText3
{
	color: #00ff00;
	margin-left:  51px;
	 
}

#sortByText4
{
	color: #2E0854;
	margin-left:  72px;
 
}

#sortByText5
{
	color: green;
	margin-left:  78px;
	 
}

#sortByText6
{
	color: yellow;
	margin-left:  50px;
	 
}
 
#sortByText4a
{
	color: blue;
	margin-left:  78px;
	 
}


#searchByText1, #searchByText4, 
#searchByText2, #searchByText3, 
#searchByText5, #searchByText6,
#searchByText4a, #searchByText7
{
	font-size: 24px;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	
}

#searchByText1
{
	color: red; 
	margin-left:  24px;	 
}

#searchByText2
{
	color: orange;
	margin-left:  66px;	
	
}

#searchByText3
{
	color: #00ff00;
	margin-left:  47px;
	 
}

#searchByText4
{
	color: #2E0854;
	margin-left:  212px;
 
}

#searchByText5
{
	color: green;
	margin-left:  81px;
	 
}

#searchByText6
{
	color: yellow;
	margin-left:  50px;
	 
}
#searchByText7
{
	color: blue;
	margin-left: 78px;
	 
}



.square
{
	height:50px;
	width:50px;
	display:inline-block;
	margin-top:5px;
	xborder:3px solid gray;
    box-shadow: 1px 2px 3px 4px black;
	-mox-box-shadow: 1px 2px 3px 4px black;
	-webkit-box-shadow: 1px 2px 3px 4px black;	
    xbackground: radial-gradient(circle closest-corner, white, black);	

}

#square1
{
	margin-left: 47px;	
	background-color: red;
}
 
#square3
{
	margin-left: 47px;	
	background-color: #00ff00;
}



#square2
{
	margin-left: 104px;	
	background-color: orange;
}

#square5
{
	margin-left: 104px;	
	background-color: green;	
}


#square4 
{
	margin-left: 85px;	
	background-color: #2E0854;	
}



#square4a
{
	margin-left: 105px;	
	background-color: blue;	
}

#square6
{
	margin-left: 105px;	
	background-color: yellow;	
}

#square7
{
	margin-left: 85px;	
	background-color: yellow;	
}





.oval
{

	display:inline-block;
	margin-top:5px;
	xborder:3px solid gray;
    box-shadow: 1px 2px 3px 4px black;
	-mox-box-shadow: 1px 2px 3px 4px black;
	-webkit-box-shadow: 1px 2px 3px 4px black;	
  	
	
	
    width: 70px;  
   height: 35px; 
   xbackground: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}
.oval:hover, .square:hover,
.languageBottom:hover,   .languageTop:hover,  .directionTop:hover,   
.directionBottom:hover, .keyWordsBox:hover, .ovalBig:hover, 
.parallelogram1:hover,  .parallelogram2:hover, .parallelogram3:hover
{
	 background: radial-gradient(circle 	closest-corner,  #00CCFF, blue);
}

#oval1
{
	margin-left: 35px;	
	background-color: red;
}
 
#oval3
{
	margin-left: 35px;	
	background-color: #00ff00;
}



#oval2
{
	margin-left: 85px;	
	background-color: orange;
}

#oval4 
{
	margin-left: 192px;	
	background-color: #2E0854;	
}

#oval5
{
	margin-left: 85px;	
	background-color: green;	
}

 

#oval6
{
	margin-left: 85px;	
	background-color: yellow;	
}

#oval7
{
	margin-left: 85px;	
	background-color: blue;	
}
 


.ovalBig
{
	
	position:absolute;  
	left: 310px;
	top:140px;
	z-index:10;
	 
	
	 
	xdisplay:inline-block;   
	
	display:none;
	margin-top:5px;
    box-shadow: 1px 2px 3px 4px black;
	-mox-box-shadow: 1px 2px 3px 4px black;
	-webkit-box-shadow: 1px 2px 3px 4px black;	
  	
	background-color: blue;		
   width: 260px;  
   height: 130px; 
   
   -moz-border-radius: 250px / 125px;
   -webkit-border-radius: 250px / 125px;
   border-radius: 250px / 125px;
}
 
 
.toFrom
{
	 color: #9bcc60;
	 position:relative; 
	 top:-10px; 
	 left:2px;
}

.datePickerTextBox
{	
	text-align:center; 
	margin-top:10px; 
	border-radius:50%; 
	width:150px; 
	height: 24px; 
	background-color: #201913; 
	color:#9bcc60;	
}
 


#keyWordText
{
	font-size: 24px;
	color: orange;
	font-family:Geneva, sans-serif;
	letter-spacing: 2px;
	margin-left:  20px;
}

.header2
{
	font-size: 24px;
	color: brown;
	font-family:Geneva, sans-serif;
	letter-spacing:2px;
	text-align:center;	
	height:10px; 
}

.keyWordsBox::-ms-clear 
{
    display: none;
}

.keyWordsBox:focus
{
	background: radial-gradient(circle 	closest-corner,  #00CCFF, blue);	 
}


.submitButton
{
	margin-top:50px;
	width: 95px; 
	height: 95px;
	background-color: pink;
	border: 2px solid pink;
	font-size: 22px;
	
	color: purple;
	text-align:center;
 
	border-radius: 50%;
     box-shadow: 1px 2px 3px 4px black; 
	-moz-box-shadow: 1px 2px 3px 4px black; 
	-webkit-box-shadow: 1px 2px 3px 4px black; 
	
	background: radial-gradient(circle closest-corner, pink, purple);	
	outline:0;
}

.submitButton:hover
{
	xbackground: radial-gradient(circle closest-corner, purple,pink );
		background: radial-gradient(circle closest-corner, #00CCFF, blue );
color: navy;
		
	 
}

.submitButton:active
{
	background: radial-gradient(circle closest-corner, white, pink );
}
  
  
#whichLanguage
{
	margin-left: 19px;	
}

#searchBy
{
	margin-left: 10px;
}


#sortBy
{
	margin-left: 37px;
}

#whichDirection
{
	margin-left: 17px;
}

#keyWords
{	 
	margin-left: 14px;
	color: orange;	
}

.colorBrown
{
	color:brown;
	font-family: Agency FB; 
	font-size: 26px;
	letter-spacing:2px;
	line-height: 36px;
	font-weight:bold;	
}



#bgBlack
{  
	height: 40px; 
	width: 40px; 
	position:relative; 
	left: 10px;  
	top: 10px;
	mborder: 1px solid black;

}


.moon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 8px 8px 0px 0   #999999;
	display: inline-block;
} 

.sun
{  
	width: 40px;
	height: 40px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #fc3;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.22, rgb(204,153,0)),
		color-stop(1, rgb(255,219,112))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(204,153,0) 22%,
		rgb(255,219,112) 100%
	); 
	
	-webkit-box-shadow: 0 0 50px #c90;
	-moz-box-shadow: 0 0 50px #c90;
	box-shadow: 0 0 50px #c90; 
	position:relative;
	top: 10px;
	left: 50px;
	
	display: inline-block;
 
 
} 
 






#currentSearch
{
	font-family: Agency FB; 
	font-size: 30px;
	letter-spacing:2px;
	
	color:#302;



	font-weight:bold;
	padding-bottom:15px;	
}


.agencyFBFont,  #keyWords, #whichDirection, #sortBy, #whichLanguage, #searchBy
{
	font-family: Agency FB; 
	font-size: 26px;
	letter-spacing:2px;	
	font-weight:bold;
	line-height:26px;
}

 .Three-DeeXX, #currentSearchx
 {
 
 line-height: 1em;
 
 position:relative;
 z-index:-1;
 top: 20px;
 
 
 text-shadow:0px 0px 0 rgb(223,223,223),1px 1px 0 rgb(220,220,220),2px 2px 0 rgb(218,218,218),3px 3px 0 rgb(216,216,216),4px 4px 0 rgb(213,213,213),5px 5px 0 rgb(211,211,211),6px 6px 0 rgb(209,209,209),7px 7px 0 rgb(206,206,206),8px 8px 0 rgb(204,204,204),9px 9px 0 rgb(202,202,202),10px 10px 0 rgb(199,199,199),11px 11px 0 rgb(197,197,197),12px 12px 0 rgb(195,195,195),13px 13px 0 rgb(192,192,192),14px 14px 0 rgb(190,190,190),15px 15px 0 rgb(188,188,188),16px 16px 0 rgb(185,185,185),17px 17px 0 rgb(183,183,183),18px 18px 0 rgb(181,181,181),19px 19px 0 rgb(179,179,179),20px 20px 0 rgb(176,176,176),21px 21px 0 rgb(174,174,174),22px 22px 0 rgb(172,172,172),23px 23px 0 rgb(169,169,169),24px 24px 0 rgb(167,167,167),25px 25px 0 rgb(165,165,165),26px 26px 0 rgb(162,162,162),27px 27px 0 rgb(160,160,160),28px 28px 0 rgb(158,158,158),29px 29px 0 rgb(155,155,155),30px 30px 0 rgb(153,153,153),31px 31px 0 rgb(151,151,151),32px 32px 0 rgb(148,148,148),33px 33px 0 rgb(146,146,146),34px 34px 0 rgb(144,144,144),35px 35px 0 rgb(141,141,141),36px 36px 0 rgb(139,139,139),37px 37px 0 rgb(137,137,137),38px 38px 0 rgb(134,134,134),39px 39px 0 rgb(132,132,132), 40px 40px 0 rgb(130,130,130),41px 41px 40px rgba(0,0,0,0.6),41px 41px 1px rgba(0,0,0,0.5),0px 0px 40px rgba(0,0,0,.2);}

.gradient{
position:absolute;
background-image: -moz-radial-gradient(135deg, #000, #333 100%);
background:-webkit-gradient(radial, 40% 0%, 0% 100%, from(#333), to(#000000));
opacity:.3;
width:100%;
z-index:-1;
}     
/*  cat  */
.content2
{
	
	height:auto; 	
	padding-top:10px;
	padding-bottom:20px;
}

.content3
{
	background-color:white;
}

.body2
{
 	background-image:url(images/common/paper.gif);
}

.body3
{
 	background-image:url(images/common/paper.gif);
}

.backgroundWhite
{
	background-color:white;
}

.backgroundBlack
{
	background-color:black;
    mm-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    mmanimation: myfirst 5s;
}