﻿/*
Theme Name: Basis CSS
Version: 1.0
Author: Elias Saerens
*/

/* reset styles */

html, body 
{	margin: 0; 
	padding: 0;
	border: 0; 
	background:transparent;
	font-size: 10px; 
}

div, span, article, aside, footer, header, hgroup, nav, section,
 h1, h2, h3, h4, h5, h6, p, blockqoute, a, ol, ul, li, table,
 tr, th, td, tbody, tfoot, thead 
{
	margin: 0;
	padding: 0;
	border:0;
	vertical-align: baseline;
	background: transparent;
}
	
img 
{ 
	margin:0; 
	padding:0; 
	border:0; 
}

table, tr, th, td, tbody, tfoot, thead 
{ 
	margin: 0;
	padding: 0;
	border: 0; 
} 

table 
{
	border-collapse: collapse;
	border-spacing: 0;
}

input, select, textarea, form, fieldset
{
	margin: 0px;
	padding: 0;
	border: 0; 
}

article, aside, dialog, figure, footer, header, hgroup, nav, section
{
	display: block;
}

h1, h2, h3, h4, h5, h6, p, li, blockqoute, td, th, a, caption, em, strong, strike
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
}

ol, ul 
{
	list-style: none;
}









/* Globaal*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

html {	
			 min-height: 100%;
			 height:700px;
			 /*width:100%;*/
	}
body { 	background: rgb(61,150,210); /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzZDk2ZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDU2YmIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-radial-gradient(center, ellipse cover,  rgba(61,150,210,1) 0%, rgba(69,107,179,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(61,150,210,1)), color-stop(100%,rgba(69,107,179,1))); /* Chrome,Safari4+ */
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(61,150,210,1) 0%,rgba(69,107,179,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-radial-gradient(center, ellipse cover,  rgba(61,150,210,1) 0%,rgba(69,107,179,1) 100%); /* Opera 12+ */
		background: -ms-radial-gradient(center, ellipse cover,  rgba(61,150,210,1) 0%,rgba(69,107,179,1) 100%); /* IE10+ */
		background: radial-gradient(ellipse at center,  rgba(61,150,210,1) 0%,rgba(69,107,179,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d96d2', endColorstr='#456bb3',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	
		margin:auto;
		/*font-family: 'Arial', sans-serif;*/
		font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
		/*font-family: 'Open Sans', sans-serif;*/
		/*overflow: hidden;
		*/
		width:100%;
 		}

/* Hoofding*/

h1, h2, h3, h4, h5, h6 
{
	font-weight: bold;
	color: #000;
}

h1 {
	right:0;
	margin-left:20px;
	font-weight:bold;
	font-weight: 500;
    line-height: 1.1;
	color:#403E55;
	font-size:30px;
	opacity: 0.5;
	/*line-height:40px;*/
	}
	
h2 {
	font-size: 25px;
	color:#403E55;
	margin-left:20px;
	margin-bottom: 10px;
	}
	
h3 {
	font-size: 20px;
	color:#403E55;
	margin-left:20px;
	margin-bottom: 10px;
	margin-top: 20px;
	}
	
h4 {
	right:0;
	font-weight:bold;
	color:#403E55;
	font-size:16px;
	margin-left:20px;
	/*opacity: 0.5;*/
	line-height:16px;
	}

h5 {font-size: 14px; }

h6 {font-size: 14px; }	



h1 img, h2 img, h3 img, h4 img, h5 img, h6 img 
{
	margin: 20px;
}

/* Tekst-elementen*/

p				{ color: #000; font-size: 12px; line-height: 150%; }
p.left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p.right			{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a				{	}
a:link			{ color: #255;  font-size: 15px; font-weight: bold; }
a:visited		{ color: #255; }
a:active		{ color: #255; }
a:focus			{ color: #255; }
a:hover			{ color: #255; }

blockqoute		{ color: #000; font-size: 12px; }

strong			{ 
					font-weight: bold;
			        font-size:16px;
					color:#403E55; 
				}
					
em				{ font-style: italic; }

/* Afbeeldingen */


/* Lijsten */

ol				{ list-style-type: decimal; }
ul				{	}

ol li				{ color: #000; font-size: 12px; }
ul li				{ color: #000; font-size: 12px; }

dl				{	}
dt				{	}
dd				{	}

/* Tabellen */

table			{ width: 100%; }
tr				{	}
.odd			{ background-color: #eee; }
.even			{ background-color: fff; }

th				{ font-weight: bold; }
thead, th			{ background: #ccc;	}

tbody			{	}

th, td, caption	{	}
caption			{	}

tfoot				{	}
.tfooter		{ background-color: #ccc; text-align: center; font-style: italic; }

caption			{ background: #efefef; }

/* Varia */

sup, sub		{ line-height: 0; }

abbr, acronym	{ border-bottom: 1px dotted #666; }
address			{	}
del				{ background: #FFCECE; color: #f00; }

coe, pre			{ background-color: #FF9, padding: 2px 0px; margin: 4px 25px; font-family: "Courier New", Courier, monospace; font-size: 12px; }


/* Containers */


#wrapper			{  width: 900px; height: 100%; margin: 0px auto; border-right: 3px #005333 solid; border-left: 3px #005333 solid; }

#top				{ 
						margin:auto;
						/*margin-top:3.5%;
						width:1350px;*/
						height:220px;
						background-position: center;
						background-color:#1C86C6;
						background-repeat:no-repeat;
						box-shadow: 7px 7px 30px #111;
						overflow:hidden;
						/*margin-left:25%;
						margin-right:22%;*/
						

					}

#top img			{ width: 100%; height:100%;  /*margin:0px 150px;*/ }



#topnav				{background-color:#000000;  clear:both;   /*text-indent: 150px;*/ }

#topnav ul			{ width: 100%; float: left; margin: 0px; background-color:#000000;}
#topnav ul li 		{ display:inline; color:#FFFFFF; }
#topnav ul li a 	{float left; padding: 10px 20px; font-size: 14px; line-height: 40px; }
#topnav ul li select{ float: right; margin: 10px 20px; }


#topnav a:link 		{color:white;}				  
#topnav a:hover		{background-color:#0099FF; color:#FFFFFF; padding: 12px 20px;}
#topnav a:visited 	{color:#FFFFFF;}
#topnav a:active 	{color:#FFFFFF;}
#topnav a:focus 	{color:#FFFFFF;}
	


#banner			{	}

#subbanner		{	}


#content-wrapper{ background-color:#FFFFFF; height:500px; 	}

#leftnav		{	}

#leftside		{	}

#rightside		{	}

#content		{	margin: auto;
					background-color:white;
					height:600px;
					width:830px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
				
#content-design	{	margin: auto;
					background-color:white;
					height:2600px;
					width:730px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
				
#content-mechanics{	margin: auto;
					background-color:white;
					height:1900px;
					width:730px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}


#content-cost{	margin: auto;
					background-color:white;
					height:1180px;
					width:730px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
				
#content-electronics{	margin: auto;
					background-color:white;
					height:2280px;
					width:1130px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
				
#content-electronics img {
							margin-left:7%;
	
							}
							
#content-electronics-good{	margin: auto;
					background-color:white;
					height:3020px;
					width:1130px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
				
#content-electronics-good img {
							margin-left:7%;
	
							}				

#content-team	{	margin: auto;
					background-color:white;
					height:760px;
					width:930px;
					margin-bottom: 18px;
					margin-top:20px;
					-webkit-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					-moz-box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					box-shadow: 10px 10px 50px 22px rgba(0,0,0,0.75);
					border-radius: 20px;
					overflow: hidden;

				}
	
				
#content-team ul	{
					margin-left:30px;
					margin-right:30px;
					margin-top:10px;
					margin-bottom:10px;
										
					}
				
#content-team ul img	{
						margin-right:25px;
						margin-bottom:20px;
						height:250px;
						width:250px;
						}				

#footer			{ /*overflow: hidden;*/	}

/* Bijkomend, maar niet per se nodig */

#box1			{	}

#box2			{	}

#box3			{	}

#slidercontainer{

					width:650px;
					height:300px;
					margin:auto;
					padding: 10px;
					overflow: hidden;
				}

#hh1 {
	background-color:none;
	text-align:left;
	margin-left:20px;
	margin-top: 20px;
	
	}

/* Extra Layout */

p.tekstinhoud {
	margin-top: 10px;
	margin-right:25px;
	margin-left: 20px;
	margin-bottom:10px;
	color:black;
	line-height:18px;
	font-size:15px;
	text-align:justify;
	}

.clr {
	clear:both;
	padding:5px;
	margin:0;
	width:100%;
	font-size:0;
	line-height:5px;
}	

.teamfoto	{
	float:left;
	padding-top:5px;
	padding-bottom:30px;
	
	}
	
/* Extra Navigatie */


/* Formulieren */

form	
{
	text-align: left;
	margin: 20px; 
}

label, submit, input, textarea
{
	border: 0; 
	padding: 0;
	margin: 0;
	background: none;
}	

label
{
	float: left;
	width: 150px;
	text-align: right;
	display: block;
}

input, textarea
{
	border: 1px #333 solid;
	margin-left: 10px;
}	

input
{
	width: 280px;
}

textarea
{
	width: 280px;
	height: 150px;
	margin-bottom: 16px;
}

select	{	}

.submit
{	
	width: 90px;
	height: 25px;
	margin-left: 150px;
	font-size: 12px;
}

br
{
	clear: left;
}

/* Varia */

.copyright-text	{ font-size: 80%; font-style: italic; color: #333; }
.footer-text	{ font-size: 80%; font-style: normal; color: #666; }

.title			{ font-size: 18px; font-weight: bold; color: #333; }
.subtitle		{ font-size: 14px; font-style: italic; color: #333; }

.artist			{ font-size: 16px; font-weight: bold; color: #333; }
.author			{ font-size: 14px; font-weight: bold; color: #555; }
.editor			{ font-size: 14px; font-style: italic; color: #555; }

.pub-date		{ font-size: 10px; font-style: italic; color: #555; }
.article-date	{ font-size: 10px; font-style: italic; color: #555; }
.location		{ font-size: 10px; font-style: italic; color: #555; }
	
/* Voor extra bekijk volgende website: https://www.youtube.com/watch?v=DuNJAUzFXTA 
 op 5:10 */
	
/* Something Felicia added for tables, but i will put it here to make the code cleaner*/

.tg  {border-collapse:collapse;border-spacing:0; margin:10px;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-0ord{text-align:right}
.tg .tg-e3zv{font-weight:bold}
.tg .tg-lqy6{text-align:right;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-34fq{font-weight:bold;text-align:right}