/*
Font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/


body					{		background-image:url(../images/Background/Canvas-texture_small.jpg);
								background-repeat:repeat; max-width:100%;
								font-family:'Open Sans', Arial, Helvetica, sans-serif;
								line-height:150%;	}
h1						{	font-family:'Open Sans Condensed', Arial, Helvetica, sans-serif; font-size:24px; color:#666666;	}
h2						{	font-family:'Open Sans Condensed', Arial, Helvetica, sans-serif; font-size:18px; color:#666666;	}
h3						{	font-family:'Open Sans Condensed', Arial, Helvetica, sans-serif; font-size:14px; color:#666666;	}
p						{	font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:12px;	}

#wrapper				{	width:900px;
								margin:0px auto;
								padding:0px;	}

#top					{	width:100%;
								height:200px;
								margin-top:2%;
								
								background-color:#666666;		
								border-radius: 10px 10px 0 0;
								-moz-border-radius: 10px 10px 0 0;
								-webkit-border-radius: 10px 10px 0 0;	}
			
#logo					{	float:left;
								padding-left:30px;
								width:400px;	}
#logo img				{	width:100%;
							height:auto;	}
								
/* Social Media */								
#social-media			{	float:right;
								padding-right:2%;
								padding-top: 130px;	}
#social-media ul li		{	display:inline;
								list-style:none;
								padding-right:10px; }
#social-media a:link	{	text-decoration:none;	}
#social-media a:visited	{	text-decoration:none;	}
#social-media a:active	{	text-decoration:none;	}
#social-media a:hover	{	text-decoration:none;	}
#social-media a:focus	{	text-decoration:none;	}

/* Menu */								
#topnav					{	width:100%;
								clear:both;
								background-color:#FFF;
								padding:10px 0 10px 0;	}
#topnav ul				{ 	margin:0; 
								padding-left:2%;		}
#topnav ul li			{	display:inline-block; 
								list-style-type:none;
								margin: 0 50px 0 0;			}
#topnav a:link			{	font-weight:bold; text-decoration:none; text-transform:uppercase; color:#000; font-size:12px;	}
#topnav a:visited		{	font-weight:bold; text-decoration:none; text-transform:uppercase; color:#000; font-size:12px;	}
#topnav a:active		{	font-weight:bold; text-decoration:none; text-transform:uppercase; color:#000; font-size:12px;	}
#topnav a:hover			{	font-weight:bold; text-decoration:none; text-transform:uppercase; color:#666666; font-size:12px; 	}
#topnav a:focus			{	font-weight:bold; text-decoration:none; text-transform:uppercase; color:#666666; font-size:12px;	}
	
/* Banner image must be 900px x 300px */	
#banner					{	float:left;
								width:900px;
								height:300px;
									}
#banner ul 				{	margin-top:0; padding-top:0;}
.banner 				{ 	position: relative; overflow: auto;	 }
.banner ul				{	padding:0;	}
.banner ul li 			{ 	float: left;
								list-style-type:none;	 }
														
#content				{	float:left; 
								width:96%;
								background-color:#FFF;
								padding:2%;
								border-bottom:1px #000 dotted; }
#leftside				{	float:left;	
								width:70%;;
									}
#rightside				{	float:right;
								width:25%;	}
#rightside ul			{	padding:0px;	}
#rightside ul li		{	font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:12px;
								list-style:none; padding-left:0px;	}

#small-left				{	float:left;
								width:250px;	}
#small-left ul			{	padding: 0px 0 0 10px;
								margin:0 0;	}
#small-left ul li		{	font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:12px;
								list-style:none;  }
#small-right			{	float:right;	
								width:300px; 	}
								
/* About us page list */							
#contacts-persons		{	float:left; width:100%;	}
#contacts-persons ul	{	padding:0;	}
#contacts-persons ul li {	list-style:none; 
								width:100%;	}
#contacts-person-block	{	width:100%; 
								clear:both;
								padding-top:10px;	}
#contacts-person-block img	{	width:30%; 
									height:auto;
									float:left;	}
#contacts-person-block-info	{	float:right;
									width:65%;	}
/* Contact Us page */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#email			{	width:50%;
						float:right;
}
.feedback-input {
	color:#3c3c3c;
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 12px;
	border-radius: 0;
	line-height: 16px;
	background-color: #fbfbfb;
	padding: 5px 5px 5px 40px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  	border: 1px solid rgba(0,0,0,0);
}
/* Icons ---------------------------------- */
#txtName{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 20px 20px;
	background-position: 5px 3px;
	background-repeat: no-repeat;
}

#txtName:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 20px 20px;
	background-position: 5px 3px;
	background-repeat: no-repeat;
}

#txtEmail{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 20px 20px;
	background-position: 5px 3px;
	background-repeat: no-repeat;
}

#txtEmail:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 20px 20px;
 	background-position: 5px 3px;
	background-repeat: no-repeat;
}

#txtMessage{
	background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
	background-size: 20px 20px;
	background-position: 5px 3px;
	background-repeat: no-repeat;
}

#txtMessage {
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

#button-blue{
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #3498db;
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}






/* Footer */
#footer					{	width:100%;
								clear:both;	
								padding:10px 0;
								margin-top:10px;
								
								margin-right:20px;
								text-align:center;
								background-color:#FFF;	}

#footer ul li			{	display:inline; 
								font-size:12px;
								margin:0 30px 0 0;
								}
/* Supplier logos images = height 40px */
#footer-supplier-logo		{	 	}
#footer-supplier-logo ul	{	width:100%; margin:2%; padding:0;	}
#footer-supplier-logo ul li	{	display:inline-block;
									width:auto; 	}


/* This is for the iPad and similar */
@media only screen and (max-width: 918px){
body			{	
					}
#wrapper		{	width:98%;
						margin:2% auto;	}
#top			{		}
#logo			{	width:60%; max-width:400px; 	}
#banner			{	visibility:hidden;
						height:0; width:0;	}
#banner ul 		{	width:0px; 	}
#banner img		{	width:opx;	}
.banner			{	width:0px;	}
.banner ul				{	width:opx;	}
.banner ul li 			{ 	width:0px	 }
#leftside				{	width:60%;	}
#rightside				{	float:left;
								width:35%;	}
}

/* This is for the iPhone ans similar */
@media only screen and (max-width: 480px){
body					{ 		}
#top					{	height:150px;text-align:center;
								margin-top:2%;	}
			
#logo					{	width:60%;	}
#topnav					{		}
#topnav ul				{ 	padding-left:0;		}
#topnav nav ul li			{	width:100%;	
									text-align:center;
									height:30px;	}
#social-media			{	display:none;	}
#content				{	width:96%;
								padding-right:2%;	}
#leftside				{	width:100%;	}
#rightside				{	float:left;
								width:96%;	}

/* Contacts page list */							
#contacts-persons		{	float:left; width:100%;	}
#contacts-persons ul	{	padding:0;	}
#contacts-persons ul li {	list-style:none; 
								width:100%;	}
#contacts-person-block	{	width:100%; 
								clear:both;
								padding-top:10px;	}
#contacts-person-block img	{	width:100%;
									}
#contacts-person-block-info	{	float:left;
									width:96%;	}


	#form-div{
		left: 3%;
		margin-right: 3%;
		width: 88%;
		margin-left: 0;
		padding-left: 3%;
		padding-right: 3%;
	}

}