* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #555;
    font-family: 'Lato','Arial',sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
}

/* Bordered form */
    form {
    border: 3px solid #f1f1f1;
        width: 250px;
    padding:14px;
    }

pre {
    margin-left: 50px;
    border: 50px;
    padding: 5px;
}

.detailtext {
    margin-left: 15%;
    border: 50px;
    padding: 5px;
    font-size: 80%;
}

.vendorimage {
   margin-left: 15%; 
}

.links {
   margin-left: 15%; 
}
     
    input {
            display:inline-block;
   
        }
        
    
    body
        {
	       padding:0;
	       margin:0;
	
        }
        
    font {
    		color: red;
    }    
	
    label {
            	color: black;
                width:150px;
            }
    #year {
    			width:50px;
   		 }        
   
            
    #recordadd {
    				color: green;
    				font-weight:bold;
    				font-size:150%;
    				} 
    				
   #required {
    				color: red;
    				
    				font-size:110%;
    				}  				      
	
    #company {
                width:250px;
            }
    #address1 {
                width:250px;
            }
    #address2 {
                width:250px;
            }
    #city {
                width:150px;
            }
    #prov {
                width:20px;
            }

     #postcode {
                width:50px;
                }

     #country {
                width:40px;
                }
                
           

    #latitude 	{

                width:150px;
                }

    #longitude 	{
                width:150px;
                }
	#serial 
    {
        margin-left:20px;
        margin-right:50px;
        width:150px;
        text-align: right;
    }    
    

        p {
            color:white;
        }

/* Add a hover effect for buttons */
    button:hover {
        opacity: 0.8;
        }

    #menu
    {
	width:590px;
	margin:0px auto;
	text-align:center;
	border-bottom:1px solid #CCC;
    }

    #menu a
    {
	text-decoration:none;
	display:inline-block;
	color:#666;
	padding:14px;
	background-color:#F8F8F8;
    }

#menu a:hover
{
	color:#fff;
	background-color:#30f;
}
.select 
    {
        margin-left:20px;
        margin-right:50px;
        width:150px;
        text-align: center;
    }
    

.vendor 
{
        width: 20px;
        height:20px;
        padding: 12px 12px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

/* Add padding to containers */
.container {
    padding: 16px;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

/*Textarea*/
    .textarea {
		margin: auto;
		display: inline-block;
		color:#1f1f1f;
		margin-left: 50px;
		}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}
           

    
        h1 	{
                float:left;
                font-size:175%;
                margin:50px;
                color:black;
            }
	h2 {
			margin: 25px auto 0;
			text-align: center;
			text-transform: uppercase;
			font-size: 17px;
			color:#1f6d9b;
		}
	
        #name  {
                float:left; 
                padding:20px; 
            }
        .clear-float {
                clear:both;
            }  
        #logo 	{
                float:left;
                width:450px;
                margin:20px;
            }
    .main {
    
            background-color: #e9e9e9;
        }      
 
    #wrapper
    {
	width:800px;
	text-align: center;
    background-color: #d1d1ce;    
	margin:0px auto;
	min-height:400px;
	border:1px solid #999;
	border-bottom:3px solid #999;
	border-radius:5px;
	padding-bottom:20px;
    }

    #error
    {
	width:560px;
	margin:0px auto;
	height:30px;
	background-color:red;
	margin-top:20px;
	padding-left:10px;
	padding-top:10px;
	color:#FFF;
	font-weight:bold;
	font-size:15px;
	display:none;
	
    }
    
     #nonerror
    {
	width:560px;
	margin:0px auto;
	height:30px;
	background-color:green;
	margin-top:20px;
	padding-left:10px;
	padding-top:10px;
	color:#FFF;
	font-weight:bold;
	font-size:15px;
	display:none;
	
    }

    #submit
        {
          background-color:dodgerblue; 
            color:aliceblue;
        }
 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}