body {background-color: #89BEE8}

.container {
	background-color: #fff;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto;
    margin-right: auto
}

.container {width:90%;max-width:1200px}

@media (max-width:767px)
	{
    .container {width: 100%}
	}

header {
	background-color: #E0EEFA
}

#logo {height:120px;width:auto;margin:20px 10px 0 20px;}

.contact-block {font-size:14pt;}

.company-block {float:right;margin:20px 10px 10px 10px;}

.company-block td {padding:5px 10px;}

@media (max-width:920px)
	{
	.company-block {display:none;}
	}

.name {font-size:20pt;}

@media (min-width:560px)
	{
	#logo {float:left;}

	.contact-block {padding-top:25px;padding-left:220px;}
	}

nav {
	margin-top:20px;
    background-color: #069;
    clear: right
}

nav li {
    list-style-type: none;
    display: inline-block;
    border-right: thin silver solid
}

nav ul li.icon {
    display: none;
    border: none
}

nav a {
    padding: 10px;
    font-size: 14px;
    display: block;
    color: #FFF
}

nav a:hover {
    background-color: #099;
    color: #FFF;
    text-decoration:none;
}


@media(max-width:560px) {
    nav ul li:not(:first-child) {
        display: none
    }
    nav ul li.icon {
        float: right;
        display: inline-block;
        margin: 0 5px 0 0
    }
    nav ul.responsive {
        position: relative
    }
    nav ul.responsive li.icon {
        position: absolute;
        top: 0;
        right: 0
    }
    nav ul.responsive li {
        float: none;
        display: block;
        border: none;
        padding: 3px
    }
    nav ul.responsive li a {
        display: block;
        text-align: left
    }
}

#TopNav .active {
    color: #FFF;
    padding: 10px;
    background-color: #0099E3;
}

#content {min-height:34em;}

.product-list li {
	padding-left: 4em;
	margin-top: 10px;
	list-style:none;
	text-align:left;
}

.list-title {color:#000099;font-weight:bold;margin-left:-6em;display:inline-block;width:6em;}

.item img {
	margin-left:auto;
	margin-right:auto;
}

footer {
    margin-top: 80px;
    padding-bottom: 50px
}

.copyright,footer ul,.creator {text-align: center}

footer li {
    list-style: none;
    display: inline-block
}

footer li a {
    padding: 0 10px
}

form,
label {
    margin-top: 20px
}

form {
    background-color: #FFFFCA;
    border: thin solid #CCC;
    padding: 10px;
    border-radius: 5px;
    max-width: 900px
}

label {
	display:inline-block;
    width: 12em;
    margin-top:5px;
}

@media (min-width:481px) {
    input,
    textarea {
        margin-right: 2em;
        width: 18em
    }
}

@media (max-width:480px) {
    input,
    textarea {
        width: 14em
    }
}

.error,
.error_box,
.form_error, .details_error {
    color: red
}

@media (min-width:1060px)
	{
    .form_error, .details_error {
        display: inline-block;
        margin-left: 32em;
        position: relative;
        }

    
    .form_error {top: -1.5em}
    
    .details_error {top:-4.5em;}
    
    input[type=submit] {width: 8em}
	}

@media (min-width:661px) and (max-width:1059px)
	{
    .form_error, .details_error {
        display: inline-block;
        margin-left: 30em;
        position: relative;
        }
	
 	.form_error {top: -1.5em}
 	
    .details_error {top:-5.5em;}
	}

@media (max-width:660px)
	{
    .form_error,.details_error {display: block;margin-top: 5px;}

    input,textarea {width: 95%;}
	}

.col1, .col2 {float: left;text-align: justify;font-size:14pt;}

@media (min-width:1200px)
	{
    .col1,.col2 {max-width:48%;}
    
    .col1 {margin: 20px 0;float: left;}
    
    .col2 {margin: 20px 0 30px 40px}
	}

@media (min-width:1060px) and (max-width:1199px)
	{
    .col1,.col2 {max-width: 47%}
    
    .col1 {margin: 20px 0;}
    
    .col2 {margin: 20px 0 30px 40px}
	}


@media (min-width:800px) and (max-width:1059px) {
    .col1,.col2 {max-width: 47%}
    
    .col1 {margin: 20px 0}
    
    .col2 {margin: 20px 0 40px 30px;}
}


@media (max-width:799px)
	{
    .col1 {margin-top: 30px;width: 100%}
    
    .col2 {margin: 0;width: 100%}
	}


.wide {
    width: 100%;
    height: auto
}

.alert-box {
    box-shadow: 3px 3px 2px #666;
    border: 3px solid #006;
    border-radius: 20px;
    background-color: #0099E3;
    padding: 10px;
    margin: 20px;
    display: block;
    width: 16em;
    max-width: 90%;
    color: #fff;
    font-size: 20pt;
    text-align: center
}

a.alert-box:hover {
    color: #DFDFDF;
    position: relative;
    left: 2px;
    top: 2px;
    box-shadow: 3px 3px 2px #999
}

@media (max-width:481px) {
    .alert-box {
        width: 280px;
        font-size: 12pt;
        padding: 10px;
        margin: 10px
    }
}

img {max-width:100%;height:auto;}

.wide-text {font-size:14pt;margin-top:30px;}