
/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

#bt1,#bt2,#bt3,#bt4{
	
	border : 1px solid black;
	width : 100px;
	height : 100px;
	background-color : green;
	color : red;
	font-style : bold;
	font-size : 40px; 
	font-weight : 20px;
	
	
}
#bt1{
	position : absolute ;
	left : 92px;
	top : 0px;
}
#bt2{
	position : absolute;
	top : 80px;
	left : -8px;
}
#bt3{
	position : absolute;
	margin-right : -2px;
	left : 192px;
	top : 80px;
}

#bt4{
	position : absolute;
	top : 160px;
	left : 92px;
}
#gen{
	position : absolute;
	margin-top : 4px;
	width : 304px;
	top : 60px;
	left : 0px;
}
#mainSec{
	position : absolute;
	left : 10px;
	top : 80px;
}
#btSec{
	position : absolute;
	top : 300px;
	left: 10px;
}
h1{
	position : fixed;
	left : 60px;
	background-color : #CC00;
	color : magenta;
}
#north {
	position : absolute;
	left : 120px;
	top : -20px;
}
#west{
	position : absolute;
	top : 60px;
	left : 20px;
}
#east {
	position : absolute;
	top : 60px;
	left : 220px;
}
#you{
	position : absolute;
	left : 130px;
	top : 260px;
}
h1{
	position : absolute;
	color : red;
	top : -20px;
}
#bt1:hover{
	box-shadow : 4px 6px 4px white;
	border-radius : 20px;
}
#bt2:hover{
	box-shadow : 4px 6px 4px white;
	border-radius : 20px;
}
#bt3:hover{
	box-shadow : 4px 6px 4px white;
	border-radius : 20px;
}
#bt4:hover{
	box-shadow : 4px 6px 4px white;
	border-radius : 20px;
}
#score{
	position : absolute;
	top : 410px;
	left : 0px;
	
}
#sr1,#sr2,#sr3,#sr4{
	
	width : 55px;
	background-color: magenta;
	color : white;
	padding : 1px;
	margin-left : -4px;
	
}

#sclabel{
	position : absolute;
	top : 390px;
	left : 60px;
	
}
#sl,#wl{
	margin-left : 5px;
}
#el,#yl{
	margin-left : 20px;
}
#gen:hover {
	
	height : 22px;
	cursor : pointer;
	box-shadow : inset;
}
#gen{
	position:absolute;
	width : 400px;
	left : -40px;
	background-color : yellow;
}
#head_part{
	background-color : #F0C090;
	border : 1px solid blue;
}
#bkbt{
	border-right : 1px solid blue;
	margin-right : 10px;
}
#main_wrapper{
	position : fixed;
	width : 300px;
}
.g{
	position : absolute;
	left : 100px;
	top : 87px;
}
body{
	position : fixed;
	background-color : gray;
	background : url("bg2.jpeg") ;
	
}
#selectedSec{
	width : 100%;
}
#logo{
	position : fixed;
	left : 60px;
	width : 240px;
	top : 20px;
}
#bt1,#bt2,#bt3,#bt4{
	background : url("button.jpeg");
}
