/* ovocsolutions.css */

/********************************************************************************
Title: 			ovocsolutions.css

Description:	This is the main CSS file for the OVOC Solutions website design.
		It specifies the general layout design and basic responsive web
		design behaviour of the website when view between different 
		devices (Smartphone, Tablet, Desktop).

Programmer:	Oliver Ventur
Date Created:	September 09, 2015

Last Modified:	January 14, 2018
Latest Changes:	Resolved columns for "section" and "announcements"
                Also added padding to the "menu" h2 element.

Copyright:	(c) Copyright 2015-2018 OVOC Solutions.  All Rights Reserved.
*********************************************************************************/


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

.row {
	margin: 15px;
}
.row:after {
	content: "";
	clear: both;
	display: block;
}

[class*="col-"] {
	float: left;
	padding: 15px;
}

.header {
	width: 100%;
	padding: 15px;
	text-align: left;
			
	background: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(left, #7db9e8 0%, #2989d8 35%, #207cca 66%, #1e5799 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7db9e8), color-stop(35%,#2989d8), color-stop(66%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* IE10+ */
	background: linear-gradient(to right, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 */
	
	background-repeat: repeat;
}

.menu {
	/* margin: 15px; */ 
	background: #91D2F7;
}

.menu h2{
        padding: 5px;
}

.menu ul {
        padding: 5px; 
	list-style-type: none;
}

.section {
	/* margin-right: 30px; */
	padding: 10px;
        background-image: url("../images/BackgroundIMG_OVOCSolutionsManagedITServicesLogoTransBG.png");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: scroll;
        background-size: contain;
}

.aside { 
	/* margin-left: 30px; */
	padding: 5px;
	background: #B3D2E2;
}

.footer {
	width: 100%;
	padding: 15px;
	text-align: center;

	background: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(left, #7db9e8 0%, #2989d8 35%, #207cca 66%, #1e5799 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7db9e8), color-stop(35%,#2989d8), color-stop(66%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* IE10+ */
	background: linear-gradient(to right, #7db9e8 0%,#2989d8 35%,#207cca 66%,#1e5799 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 */
	
	background-repeat: repeat;
}

/* Smartphones */
[class*="col-"] {
	width: 100%;
}

/* Tablets */
@media only screen and (min-width: 600px) {
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}
}

/* Desktop */
@media only screen and (min-width: 768px) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}

table.center {
    margin-left: auto; 
    margin-right: auto;
}