@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}
body { 	
			background-color:#FFFFFF;
			margin:auto;
			width:auto;
			font-family:"Gill Sans Std", "Myriad Pro", "Gill Sans MT", Arial, Helvetica, sans-serif;
			font-size: 1.5em;
			color: #003a58;
}

#container { 
			margin-left: auto;   
             margin-right: auto;
             background-color: #FFFFFF;    
 	         width: 1000px;  	        
			 padding-bottom: 10px; 
}

header, nav, main, footer {
			display: block;
}

header { 	background-color :#FFFFFF;
			height: 150px;
			background-image:url(../images/Design_solutions_Plus_banner.jpg); 
			background-repeat:no-repeat;
			margin-bottom: 20px;
}

h1	{
			text-indent:100%;
			white-space: nowrap;
			overflow: hidden;
}


h2 {		padding-top: 50px;
			font-size: 2em;
}
h3 {		padding-top: 50px;
			font-size: 1.2em;
	}
h4 {		
			font-size: 1em;
			padding-left: 10px;
			padding-bottom: 0;
			clear: left;		
}

img { 		padding-left: 10px;
			padding-right: 10px;
}


nav
	{
	float:right;
	width:100%;
	background-color:#a71d33;
	}

nav ul
	{
	margin:0px;
	padding:0px;
	}

nav ul li
	{
	list-style-type:none;
	display:inline;
	text-align: right;
	}

nav li a
	{
		display:inline-block;
		float: right;
		padding:20px 20px;
		color:#FFF;
		font:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		font-size: 20px;
		text-decoration:none;
	
	}
	
nav li
	a.selected 
	{
	font-weight:bold	
	}

nav li
	a:hover
	{
	color:black;
  	background-color:#1a4c6d

	}
 ul
	{
	margin:10px;
	padding:10px;
	}

 ul li
	{
	list-style-type:square;
	
	}	
main {
	
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 2em;
	margin-left: 75px;
	background-color: #FFFFFF;
	display: block;
	padding-top: 0;
	
}
.logo-image
{

	float:left;
	padding-top: 20px;
	
}
.index-image
{

	float:right;
	padding-top: 20px;
	padding-left:20px;
	padding-bottom: 50px;
	margin-left:20px;
	margin-bottom:20px;
}

#floatright { 
		float: right;
		margin: 10px; 
}

#gallery { position: relative; }
figure { position: absolute;
         left: 280px;
		 text-align: center;
		 opacity: .25; }
#gallery ul { width: 300px; 
              list-style-type: none;
}
#gallery li { display: inline; 
              float: left;
			  padding: 10px;
}
#gallery img { border-style: none; }
#gallery a { color: #eaeaea;
             text-decoration: none; 
			 font-style: italic;
}
#gallery span { position: absolute; 
                left: -1000px;
				opacity: 0;
                transition: opacity 3s ease-in-out; 
}
#gallery a:hover span { position: absolute;
                        top: 16px; 
						left: 320px;
                        text-align: center; 
						opacity: 1;
}


.description {
	margin-top: 50px;
	clear: both;
}

footer {	background-color:#a52234;
			color:rgba(255,255,255,1);
			font-size: .60em;
			font-style: italic;
			text-align: left;
			padding-top:10px;
			padding-left:10px;
			padding-bottom: 10px;
			border-top: solid 2px;
			border-bottom-color: #221811;	
}

 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.contact {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}