/* VJKNELECTRICAL
Author:	Roan Fourie
Version: 1
Date Created: 2014-09-01
Comments: Created a theme for www.vjknelectrical.co.za, white, black, grey and red.
	Features:
	> Page must work on all devices and browsers
	> Page must have a centered layout, everything centered
	> Page must load relatively fast
	> page must not use Java script as far as possible
*/
/* COLOR SCHEME:
	#000000 - black
	#ffffff - white
	#505050 - Grey (dark)
	#777777	- Grey
	#808080 - Grey
	#c0c0c0 - Grey (light)
	#69170b - Red (dark)
	#dc3217	- Red
	#f4a498 - Red (light)
*/

@CHARSET "UTF-8";

html, body {
	font: 1em 'Open Sans', Verdana, Arial, Tahoma, 'Lucida Sans Unicode';
	margin: 0 auto;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%; 
	background:#fff;
	font-size:100%;
}

div {
	margin: 0 auto;
}

h1 {
	text-align: center;
	text-shadow: 2px 2px 2px #808080;
	font-size: 3.5em;
	font-weight: bold;
	line-height: 30%;
}

h2 {
	text-align: center; 
	color: #777777;
	text-shadow: 1px 1px 1px #c0c0c0;
	font-size: 2em;
	line-height: 30%;
}

h3 {
	font-size: 1.5em;
	text-align: center; 
	color: #dc3217;
	text-shadow: 1px 1px 1px #c0c0c0;
}

h4 {
	font-size: 1.2em;
	text-align: center; 
	color: #400000;
}

h5 {
	font-size: 1.2em;
	text-align: center; 
	color: #808000;
	padding: 0;
}

h6 {
	font-size: 1.2em ;
	text-align: center; 
	color: #008080;
	padding: 0;
}

p {
	font-size: 1em;
	max-width: 700px;
	margin: 0 auto;
}

ul li {
	list-style-image: url('/images/bullet.png');
}

#header {
	position: relative;
	align: center;
	width: 100%;
	
}

#header1 {
	position: relative;
	display: inline-block;
	max-width: 100%;
	align: center;
	margin: 0 auto;
	left: 50%;
}

#header2 {
	position: relative;
	max-width: 100%;
	align: center;
	left: 50%;
}

/* Menu Styling
________________________________________________________________________*/

nav {    
  text-align: center;
}
nav ul {
  margin: 0;
  padding:0;
  list-style: none;
}
.menu a {
  display:block; 
  background: #111; 
  color: #fff; 
  text-decoration: none;
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
}
.menu {  
  vertical-align: top; 
  display: inline-block;
  box-shadow: 
    1px -1px -1px 1px #000, 
    -1px 1px -1px 1px #fff, 
    0 0 6px 3px #fff;
  border-radius:6px;
}
.menu li {
  position: relative;
  list-style: none;
}
.menu > li { 
  float: left; 
  border-bottom: 4px #aaa solid; 
  margin-right: 1px; 
} 
.menu > li > a {
	display:blcok;
  margin-bottom: 1px;
  box-shadow: inset 0 2em .33em -0.5em #505050;
}
.menu > li:hover, 
.menu > li:hover > a { 
  border-bottom-color: #dc3217;
}
.menu li:hover > a { 
  color:#f4a498; 
}
.menu > .active { 
  border-bottom-color: #dc3217;
}
.menu > .active > a{ 
  color: #f4a498; 
}
.menu > li:first-child { 
  border-radius: 4px 0 0 4px;
} 
.menu > li:first-child > a { 
  border-radius: 4px 0 0 0;
}
.menu > li:last-child { 
  border-radius: 0 0 4px 0; 
  margin-right: 0;
} 
.menu > li:last-child > a { 
  border-radius: 0 4px 0 0;
}
.menu li li a { 
  margin-top: 1px;
}

/*_____________________________________________________________________
end of Menu Styling */

#site-wrapper {
	position: relative;
	padding: 0px 0px 0px 0px;
	display: block;
	overflow: auto;
	border-top: 2px solid #69170b; /* This adds a border right at the top of the webpage the whole width */
}

#content {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: inline-block;
	padding: 0px 0px 0px 0px;
}

#content1 {
	max-width: 700px;
	overflow: hidden;
	position: relative;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 20px 10px 20px 10px
}

#product-list {
	font-size: 1.2em;
	position: relative; 
	display: inline-block; 
	text-align: left;
}

#contact-form {
	position: relative;
	display: block;
	margin: 0 auto;
	left: 25%;
	padding: 1em 0 0 0;
} 

#contact {
	position: relative;
	display: block;
	margin: 0 auto;
	font-size: 1.2em;
	text-align: center; 
	color: #777777;
	padding: 0;
}

#footer {
	font-size: 0.9em;
	border-top: 2px solid #777777;
	Text-align: center;
}

#social-media {
	position: fixed;
	bottom: 2em;
	left: 2em;
}

#image_top_left {
	position: fixed;
	display: inine-block;
	top: 0.2em;
	left: 0.2em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	align: left;
	width: 65px;
	font-size: 0.1em;
}

#image_top_right {
	position: fixed;
	display: inline-block;
	top: 0.2em;
	right: 0.2em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	align: right;
	width: 65px;
	font-size: 0.1em;
}

.top-center {
	position: relative;
	display: inline-block;
	left: -50%;
}

.image_center {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 1em 0 0 0;
	font-size: 0.1em;
} 
#contact-form{
	font-size: 1em;
}
.center {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}
div.center {
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	font-size: 1em;
	padding: 0.6em 0em 0.6em 0em;
}
table.center, table.center > tr {
	width: 100%;
	text-align: left;
	font-size: 1em;
}
tr.center {
	width: 100%;
	margin: 0 auto;
	font-size: 1em;
}
#map_canvas {
	display: block;
	margin: 0 auto;
    width: 700px;
    height: 450px;
      }
.counter {
	font-size: 0.7em;
	color: red;
}