/*
Title: Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection
Tutorial on: http://www.onextrapixel.com
Author: http://www.toddmotto.com
*/

* {
	margin: 0px auto;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
body {
	font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#444;
	background:#F9F9F9;
	line-height: 1.0;
}

a{
	color: red;
}

a:link {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.0em;
    color: red;
}

.wrapper {
	max-width:500px;
	width:100%;
	margin:0 auto;
	position:relative;
}

/* main sets padding around the container */

.main {
        padding:0px 0px 0px 0px;
}

/* contact-form sets margins around content in container */

#contact-form {
	text-shadow:0 1px 0 #FFF;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background:#F9F9F9;
	padding: 20px 20px 20px 20px;
	line-height: 1.50;
	margin 40: auto;
}
#contact-form h3 {
	color:#991D57;
	display:block;
	font-size:28px;
}
#contact-form h4 {
	color:#D80415;
	margin:5px 0 15px;
	display:block;
	font-size:18px;
}

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
} 

/* Navcontainer 1 Column */

#navcontainer1 ul {
padding: 0 10px 0px 10px;
margin: 0 0 1px 0;
position:relative;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;

 -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Chrome, Safari, Opera */
         column-count: 1;
   -webkit-column-gap: 6px;
      -moz-column-gap: 6px;
           column-gap: 6px;
  -webkit-column-rule: 0px outset #ff00ff;
     -moz-column-rule: 0px outset #ff00ff;
          column-rule: 0px outset #ff00ff;
   -webkit-column-width: auto;
      -moz-column-width: auto;
           column-width: auto;
}
#navcontainer1 li {
margin: 0px 0px 10px 0px;
position:relative;
width: 20%
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
#navcontainer1 a {
display: block;
padding: 12px;
max-width: 250px;
margin-left: auto;
margin-right: auto;
height: 50px;
color: #fff;
font-size: 20px;
background-color: red;
text-decoration: none;
text-align: center;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 0px solid #800000;
font-weight:normal;
}
#navcontainer1 a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navcontainer1 ul ul li {
margin: 0px 0px 10px 0;
}
#navcontainer1 ul ul a {
display: block;
padding: 12px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
height: 50px;
background-color: #369;
font-size: 20px;
text-decoration: none;
text-align: center;
}
#navcontainer1 ul ul a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}

 -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Chrome, Safari, Opera */
         column-count: 2;
   -webkit-column-gap: 6px;
      -moz-column-gap: 6px;
           column-gap: 6px;
  -webkit-column-rule: 0px outset #ff00ff;
     -moz-column-rule: 0px outset #ff00ff;
          column-rule: 0px outset #ff00ff;
   -webkit-column-width: auto;
      -moz-column-width: auto;
           column-width: auto;
}
#navcontainer1 li {
margin: 0px 0px 10px 0px;
position:relative;
width: 20%
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
#navcontainer2 a {
display: block;
padding-top: 10px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
max-width: 185px;
margin-left: auto;
margin-right: auto;
height: 50px;
color: #fff;
font-size: 16px;
background-color: red;
text-decoration: none;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
border: 0px solid #800000;
font-weight:normal;
}
#navcontainer1 a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navcontainer1 ul ul li {
margin: 0 0 1px 0;
}
#navcontainer1 ul ul a {
display: block;
padding: 12px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
height: 50px;
background-color: #369;
font-size: 16px;
text-decoration: none;
text-align: center;
}
#navcontainer1 ul ul a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}

/* Navcontainer 3 Column */

#navcontainer3 ul {
padding: 10px 10px 10px 10px;
margin: 0 0 1px 0;
position:relative;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;

 -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Chrome, Safari, Opera */
         column-count: 3;
   -webkit-column-gap: 6px;
      -moz-column-gap: 6px;
           column-gap: 6px;
  -webkit-column-rule: 0px outset #ff00ff;
     -moz-column-rule: 0px outset #ff00ff;
          column-rule: 0px outset #ff00ff;
   -webkit-column-width: auto;
      -moz-column-width: auto;
           column-width: auto;
}
#navcontainer3 li {
margin: 0 0 10px 0;
position:relative;
width: 20%
max-width: 100px;
margin-left: auto;
margin-right: auto;
}
#navcontainer3 a {
display: block;
padding: 12px;
max-width: 300px;
margin-left: auto;
margin-right: auto;
height: 50px;
color: #fff;
font-size: 20px;
background-color: red;
text-decoration: none;
text-align: center;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 0px solid #800000;
font-weight:normal;
}
#navcontainer3 a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navcontainer3 ul ul li {
margin: 0 0 1px 0;
}
#navcontainer3 ul ul a {
display: block;
padding: 12px;
max-width: 375px;
margin-left: auto;
margin-right: auto;
height: 50px;
background-color: #369;
font-size: 20px;
text-decoration: none;
text-align: center;
}
#navcontainer3 ul ul a:hover {
color: #fff;
background-color: #69C;
text-decoration: none;
}

hr { border: 0; height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
padding: 0px;
margin-top: 1px; margin-bottom 1px;
}

p { text-align: center;
}