@charset "UTF-8";
/* CSS Document */
body 
{
	padding: 0;
	background-image: url(Layout-Images/simonworks_background.png);
	background-repeat: repeat;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 1040px;
	margin: 0 auto;
}
header, nav, footer, article 
{
	display: block;
}
#main
{
	margin: 0 10px;
}
/* Header */
#header
{
	height: 130px; 
}
/* Nav */
#nav-header
{
	height: 60px;
	padding: 0 30px 0 30px;
	background-image: url(Layout-Images/content_background.png);
}
#nav-header .nav
{
	height: 60px;
	width: 120px;
	float: left;
}
#nav-header .nav:hover
{
	height: 60px;
	width: 120px;
	float: left;
	background-image: url(Layout-Images/Buttons/background_button.png);
}
#nav-header .nav-2
{
	height: 60px;
	width: 120px;
	float: right;
}
/* Content */
#content
{
	padding: 0 30px 0 30px;
	background-image: url(Layout-Images/content_background.png);
}
#article
{
	padding: 10px;
	background-color: #F1F2F2;
	overflow: auto;
}
/* Home */
p.home
{
	font-size: 14px;
	line-height: 25px;
	padding: 15px;
	color: #333;
}
span.home
{
	font-size: 22px;
	color: #71CAE8;
	margin: 0;
	padding: 0;
}
img.home
{
	float: right;
	padding: 15px 5px 5px 0;
}
/* Portfolio */
#portfolio
{
	
}
#portfolio-images
{

}
#portfolio-description
{
	clear: both;
	background-image: url(Layout-Images/portofolio-background.png);
	width: 440;
	padding: 20px 20px 20px 470px;
	height: 110px;
	margin: 0 5px 5px 5px;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
	font-size: 12px;
}
p.header
{
	margin: 0 0 10px 5px;
	font-size: 18px;
	color: #CCC;
}
img.portfolio
{
	border: none;
	margin: 0 5px 10px 5px;
}
img.portfolio-large
{
	float: left;
	border: none;
	margin: 0 15px 15px 5px;
}
img.portfolio-small
{
	float: right;
	border: none;
	margin: 0 5px 15px 0;
}
/* Contact */
#contact
{
	width: 900px;
	padding: 15px;
	background-color: #333;
	color: #FFF;
	font-size: 13px;
	margin: 0 5px 0 5px;
	overflow: auto;
}
#contact2
{
	width: 555px;
	padding: 15px;
	background-color: #666;
	color: #FFF;
	float: left;
	font-size: 13px;
}
img.contact
{
	padding: 0 0 0 15px;
	float: right;
}
#submit
{
	background-image: url(Layout-Images/send_button.png);
	background-position: 0 0;
	border: none;
 	margin: 0;
 	padding: 0;
	height: 40px;
	width: 80px;
	font-size: 0;
}
#submit:hover
{
	background-image: url(Layout-Images/send_button.png);
	background-position: 0 -40px;
	border: none;
 	margin: 0;
 	padding: 0;
	height: 40px;
	width: 80px;
	font-size: 0;
} 
input.contact 
{
	background-color: #FFF;
	border: none;
	color: #333;
}
textarea.contact 
{
	background-color: #FFF;
	border: none;
	color: #333;
}
span.contact 
{
	font-size: 22px;
	color: #C5EBF9;
}
h5.blue
{
	font-size: 12px;
	color: #09F;
}
/* Footer */
#footer
{
	clear: both;
	padding: 0 10px 0 10px;
	height: 180px;
	background-image: url(Layout-Images/footer.png);
}
#nav-footer
{
	width: 170px;
	padding: 15px;
	float: right;
}
#nav-footer .nav
{
	float: left;
	margin: 5px;
}
/* Links */
A
{
	text-decoration:none;
}
a.footer:link 
{
	color: #333;
	text-shadow: 0.75px 0.75px 0px #888;
}
a.footer:visited
{
	color: #333;
	text-shadow: 1px 1px 0px #bad3ed;
}
a.footer:hover
{
	color: #D2EDF3;
}
a.connect:link 
{
	color: #CCC;
}
a.connect:visited
{
	color: #CCC;
}
a.connect:hover
{
	color: #CCC;
}

/* Home Animation */
#simonworks {
	height: 300px; 
	width: 930px;
	margin: 0 5px 0 5px;
  	background-position: 0 -600px;
  	background-image:url(Layout-Images/simonworks-intro-01.png);
  	-webkit-animation-name: simonworks-intro;
  	-webkit-animation-duration: 15s;
  	-webkit-animation-timing-function: linear;
  	-webkit-animation-iteration-count: 1;
 }
 @-webkit-keyframes simonworks-intro {
        0% {
                background-position: 0 -600px;
        }
		5% {
                background-position: 0 -600px;
        }
		10% {
                background-position: 0 0;
        }
		30% {
                background-position: 0 0;
        }
		35% {
                background-position: -1860px 0;
        }
		55% {
                background-position: -1860px 0;
        }
		60% {
                background-position: -1860px -600px;
        }
		80% {
                background-position: -1860px -600px;
        }
		85% {
                background-position: 0 -600px;
        }
        100% {
                background-position: 0 -600px;
        }
}