/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 2, 2016, 4:53:48 PM
    Author     : LeoAngelo
*/

body
{
          font: arial,verdana,lucida grande,sans-serif ,10;
          background-color: whitesmoke;
}

body p{
  font-size: 0.82;
  line-height: 1.82;
  
}

#Wrapper{
    
    width: 1080px;
    height: 50px;
    background-color: greenyellow;
    margin: 10px auto;
    
}

#Banner{
    
    height: 60px;
    background-color: white;
    min-width: 800px;
    background-image: url("../images/Gadgets.png");
    background-size:  contain;
    margin-top: 10px;
    font-size:  larger;
    
  
}

#LeftArea{
    
 height: auto;
 width: 200px;
 float: left;
 background-color:  lightblue;
 margin: 10px;
    
}

#CenterArea{
    
 height: auto;
 width: 600px;
 float: left;
 background-color: lightblue;
 margin-top: 10px;
 min-height: 400px;
 
}

#RightArea{
    
 margin: 10px;   
 height:  auto;
 width: 200px;
 float: right;
 background-color: lightblue;
 
 
}
#Navigation{
    list-style: none;
        
}

.productTable
{
    
    width: 500px;
    height: 150px;
    margin: 10px 10px 10px 10px;
    border: 3px solid #E3E3E3;
    border-radius: 10px;
  
}

.productTable tr th, .productTable tr td
{
    
    text-align: left;
    padding: 0px 5px 0 5px;
}

.productTable img
{
    padding: 0px 10px 10px 10px;
    height: 150px;
    width: 150px;
}

#login{
    float: right;
    border-radius: 25px;
    margin-top: 10px;
    width: 400px;
    height: 40px;
    list-style: none;
    background-color: white;
    border-color: blue;
    border: 2px  ridge blue;
    font-size: 14px;
    display: block;
    
}

#Propic
 {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 40px;
    margin-top: 10px;
    border: 1px  ridge blue;
    list-style: none;
    background-color: white;
    border-color: blue;
    font-size: 14px;
    display: block;
    float: left;
    
}


#AddItemArea1{
    
margin-left: 100px;
margin-top: -30px    
}

#loginbox{
    
margin-left: 100px;
margin-top: 30px 
}

#Commentbox {

height: 25px !important;

width: 220px !important;

font-size: 14px !important;

}


#slideshow{
				width:164px;
				height:124px;
				border-top:2px solid #997;
				border-right:2px solid #997;
				border-bottom:2px solid #664;
				border-left:2px solid #664;
                                
			}
			
			#rotatingImage{
				display:block;
				width:160px;
				height:120px;
				border-top:2px solid #664;
				border-right:2px solid #664;
				border-bottom:2px solid #997;
				border-left:2px solid #997;
			}
* {box-sizing: border-box;}

.profilecontainer {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  
  height: auto;
  width: 80%;
  border-radius: 50%;
}

.overlay {
  
  position: absolute; 
  
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0); /* Black see-through */
  color: #f1f1f1; 
  width: 220%;
  transition: .5s ease;
  opacity: 1;
  color: blue;
  font-size: 10px;
  padding: 10px;
  text-align: center;
  background-image: url("mask.gif") ; 
  height: 120%;
  top: -20px;
  left: -20px;
}

.profilecontainer:hover .overlay {
  opacity: 1;
}