css.css

body{
	margin: 0px;
    font-family: Arial
}

#header{
	height:80%;
	width:100%;
	background-color:#333333
}

#header-content{
	height:15%;
	width:100%;
	display:flex
}

#left-content{
	width:60%;
	height:100%;
	float:left;
	color: #FFF;
	display:flex;
	line-height:110px;
	float:left
}

#left-content h1{
	line-height:45px;
	padding-left: 100px;
	padding-right: 50px;
	color: #FFF
}

#left-content h3 a{
	color: #FFF; 
	text-decoration: none;
	line-height:45px;
	padding-left: 20px;
	display:flex
}

#right-content{
	width:40%;
	height:100%;
	color: #FFF;
	line-height:40px;
	float:left
}

#right-content h4 a{
	color: #FFF; 
	text-decoration: none;
	line-height:40px;
	display:flex;
	float:right;
	padding-right:10px
}

#pannel{
	height:85%;
	width:100%;
	background-color:#FFF
}

#pannel img{
	margin:10px;
	height:95%;
	width:98%
}

#content1{
	height:90%;
	width:100%;
}

#content-1{
	height:100%;
	width:85%;
	background-color:#E5E5E5;
	margin:3px auto
}

#content-1-category{
	width:100%;
	height:8%;
	display:flex;
	background-color: #E5E5E5;
	border-bottom:2px solid #BF9E4B;
	border-right: 1px solid #BF9E4B
}

#content-1-product{
	width:100%;
	height:100%;
}

.category{
	line-height:45px;
	color:black;
	text-align:center;
}

.category a{
	color:black;
	text-decoration: none
}

#a{
	width:15%;
	height:100%;
	background-color:#BF9E4B;
}

#b{
	width:15%;
	height:100%;
}

#c{
	width:15%;
	height:100%;
}

#d{
	width:15%;
	height:100%;
}

#e{
	width:15%;
	height:100%;
	background-color:#BF9E4B;
}

#content-1-product1{
	height:45%;
	width:100%;
	display:flex
}

#content-1-product2{
	height:50%;
	width:100%;
	display:flex
}

.product-photo{
	padding-left:33px;
	padding-top: 30px;
	height:120px;
	width:245px
}

.product-photo2{
	padding-left:30px;
	height:190px;
	width:250px
}

.product-content{
	float:center;
	padding-left:10px ;
	text-align:center
}

.context{
	height:70px;
	width:320px;
}

.context span{
	float:center;
	text-align:center;
	display:block;
}

.product-button-buy{
	float:bottom;
	background-image: url('buy.png');
	height:34px;
	width:34px
}

.product-button-detail{
	float:bottom;
	background-image: url('eye.png');
	height:35px;
	width:35px
}

#product1{
	height:100%;
	width:25%;
	border-left: 2px solid;
	text-align:center;
	display:block
}

#product2{
	height:100%;
	width:25%;
	border-left: 2px solid;
	text-align:center;
	display:block
}

#product3{
	height:100%;
	width:25%;
	border-left: 2px solid;
	text-align:center;
	display:block
}

#product4{
	height:100%;
	width:25%;
	border-left: 2px solid;
	border-right: 2px solid;
	text-align:center;
	display:block	
}

#product5{
	height:93%;
	width:25%;
	border-left:2px solid;
	border-top: 2px solid;
	border-bottom: 2px solid;
	text-align:center;
	display:block	
}

#product6{
	height:93%;
	width:25%;
	border-left:2px solid;
	border-top: 2px solid;
	border-bottom: 2px solid;
	text-align:center;
	display:block	
}

#product7{
	height:93%;
	width:25%;
	border-left:2px solid;
	border-top: 2px solid;
	border-bottom: 2px solid;
	text-align:center;
	display:block	
}

#product8{
	height:93%;
	width:25%;
	border-left:2px solid;
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-right: 2px solid;
	text-align:center;
	display:block	
}

#content2{
	height:90%;
	width:100%;
	margin-top: 10px
}

#content-2{
	height:100%;
	width:85%;
	background-color:#333333;
	margin:20px auto;
}

#content-2-product{
	width:100%;
	height:100%;
	color: #FFF
}

#content3{
	height:90%;
	width:100%;
	margin-bottom:20px
}

#content-3{
	height:100%;
	width:85%;
	background-color:#E5E5E5;
	margin:20px auto;
}

#footer{
	height:50%;
	width:100%;
	background-color:#333333;
}

#footer-content{
	height:80%;
	width:100%;
	display:flex;
}

#footer-1{
	height:95%;
	width:20%;
	margin: 5px auto;
	padding-left:20px;
}

#footer-1 h3{
	color:#FFF
}

#footer-1 ul li{
	color:#FFF;
	list-style-type: none;
	padding-top: 5px;
	padding-bottom:10px
}

#footer-1 ul li a{
	text-decoration:none;
	color:#FFF
}

#footer-contact{
	height:20%;
	width:100%;
	text-align:center;
	color:#FFF;
	background-color:#333333;
	line-height:60px
}

#detail-body{
	width:100%;
	display:flex;
}

#detail-picture{
	width:64%;
	height:96%;
	background-color:#333333;
	margin:10px 
}

#detail-content{
	width:33%;
	height:96%;
	background-color:#333333;
	margin: 10px
}


#detail-body-content{
	width:98%;
	background-color:#333333;
	margin: 10px;
	color:red;
	display:block
}

# detail-body-content h1{
	padding-left:10px;
	text-align:center
}


#gun-picture{
	width:99%;
	height:100%;
	margin: 5px;
	border-bottom:3px solid #FFF;
}

#gun-picture img{
	padding-left: 150px;
	max-height:100%;
	max-width:100%;
}

#sticker-picture{
	width:99%;
	height:27%;
	margin: 5px;
	display:flex;
}

#sticker{
	height:93%;
	width:30%;
	margin:5px;
	margin-right: 30px;
	margin-left:30px
}

.sticker img{
	height:100%;
	width:80%;
}

#product-name{
	height:8%;
	width:95%;
	margin: 5px auto;
}

#product-name h2{
	color:#FFF
}

#product-state{
	height:75%;
	width:95%;
	margin: 10px auto
}

#product-state img{
	max-height:100%;
	max-width:100%
}

#price{
	height:8%;
	width:95%;
	margin: 5px auto;

}

#price span{
	line-height:50px;
	font-size:30px;
	color:#FFF
}

.cart-name, .cart-price, .cart-action, .cart-amount, .cart-photo{
	line-height: 80px;
	width: 20%;
	padding-left: 20px
}

.cart-action input{
	background-color:red;
	margin-top:35px
}

.cart-photo img{
	max-height:100px
}

#detail-body-content h1{
	padding-left:20px
}

#detail-body-content h1 input{
	margin-right:30px;
	float:right;
	background-image: url('cash.png');
	height:35px;
	width:35px
}

#detail-body-content h1 input img{
	max-height:100%;
	max-width:100%
}

#header-main{
	height:10%;
	width:100%;
	background-color:#333333; 
}

#header-pannel{
	height:80%;
	width:100%;
	margin-top:5px;
	display:block
}

#header-pannel img{
	max-height:100%;
	max-width:100%
}

#header-pannel iframe{
	float:right;
	width:525px;
	padding-top:50px
}

#header-pannel h1{
	color:red;
	padding-left:20px
}

#picpannel{
	height:98%;
	width:100%;
}

#picpannel img{
	max-height:100%;
	max-width:100%;
	margin-left:160px 
}

#news{
	width:100%;
	min-height:90%;
	background-color:#283780;
	margin:10px auto
}

.news-class{
	height:200px;
	width:90%;
	background-color:black;
	margin: 20px auto;
	display:flex
}

.news-class img{
	max-height:100%;
	max-width:100%;
}

.news-class input{
	float:top;
	background-color:black;
}