* { margin: 0; padding: 0; }

body { background: url(img/homepage-back.png) repeat-x #FFFFFF; font-family: Verdana, Helvetica, san-serif; font-size: 12px; color: #454545; }

a:link, a:active, a:visited { color: #999;}
a:hover { color: #444; }

input, textarea { background: #ffffff; border: 1px solid #ccc; padding: 3px; }
input[type=submit] { background: url(img/input-submit-bg.png) 0px -10px; color: #fff; cursor: pointer; padding: 10px 15px; border: 0px; -moz-border-radius: 10px; }
input[type=submit]:hover { background: url(img/input-submit-bg.png) 0px -60px; }
input[type=submit]:focus { background: url(img/input-submit-bg.png) 0px -110px; }

#wrapper { width: 960px; margin: 0 auto; }

#header { width: 960px; height: 150px; float: left; }

h1#logo a { width: 237px; height: 108px; float: left; background: url(img/grid45-logo.png) no-repeat; margin-top: 20px; }
h1#logo a span { display: none; }

#twitter { width: 288px; height: 86px; float: right; margin-top: 35px; } 
#twitter a { width: 288px; height: 86px; float: left; background: url(img/twitter-image.png) no-repeat; opacity: .8; outline: 0; }
#twitter a:hover { opacity: 1; }
#twitter a span { display: none; }

#phone-number { background: #fff6ad; padding: 2px; color: #555; }


/* site menu */
#menu-wrap { width: 960px; float: left; }

ul#menu { list-style-type: none; margin-top: 6px; }
ul#menu li { float: left; margin-right: 5px;  }
ul#menu li a { background: url(img/nav.png) repeat; display: block; height: 37px;padding: 0; outline: 0; }
ul#menu li a span { display: none; }

ul#menu li#home, ul#menu li#home a { width: 70px; background-position: 0px 0px; }
ul#menu li#projects, ul#menu li#projects a { width: 92px; background-position: -70px 0px; }
ul#menu li#services, ul#menu li#services a { width: 94px; background-position: -163px 0px; }
ul#menu li#aboutus, ul#menu li#aboutus a { width: 97px; background-position: -258px 0px; }
ul#menu li#contact, ul#menu li#contact a { width: 109px; background-position: -356px 0px; }

ul#menu li#home a:hover { background-position: 0px -37px; }
ul#menu li#projects a:hover { background-position: -71px -37px; }
ul#menu li#services a:hover { background-position: -164px -37px; }
ul#menu li#aboutus a:hover { background-position: -259px -37px; }
ul#menu li#contact a:hover { background-position: -356px -37px; }

ul#menu li#home a.onpage { background-position: 0px -37px; }
ul#menu li#projects a.onpage { background-position: -71px -37px; }
ul#menu li#services a.onpage { background-position: -164px -37px; }
ul#menu li#aboutus a.onpage { background-position: -259px -37px; }
ul#menu li#contact a.onpage { background-position: -356px -37px; }


/* sub header and intro stuff */
#subhead { width: 960px; height: 250px; float: left; margin-top: 10px; }

#intro-text { width: 430px; float: left; }
#intro-text h2 { width: 430px; height: 67px; background: url(img/intro-text.png) no-repeat; float: left; text-indent: -9999px; margin-top: 25px; margin-bottom: 5px; }
#intro-text p { color: #ffffff; font-size: 12px; line-height: 22px; text-align: justify; }

a#intro-learn-more { width: 177px; height: 36px; float: left; margin-top: 14px; background: url(img/learn-more-button.png) repeat 0 0; }
a#intro-learn-more:hover { background: url(img/learn-more-button.png) repeat 0 -36px; }
a#intro-learn-more span { display: none; }


/* carousel slieshow */
#carousel { float: right; width: 500px; margin-top: 20px; }

#slideshow img { width: 499px; }

#carousel-overlay { z-index: 7; position: absolute; width: 598px; height: 280px; background: url(img/slide-show-overlay.png) no-repeat; margin: -7px 0 0 -50px; }

/* content css stuff */
#content { width: 960px; float: left; margin-top: 50px; }
#content h2 { font-size: 25px; font-style: italic; letter-spacing: 0px; word-spacing: -2px; margin-bottom: 15px; color: #454545; }
#content h3 { font-family: Arial; font-size: 18px;  letter-spacing: 0px; word-spacing: -1px; margin-bottom: 5px; color: #717171; }
#content p { line-height: 20px; margin-bottom: 20px;}

#main { width: 660px; float: left; }

#sidebar { width: 260px; float: right; padding-left: 20px; }

#sidebar ul { padding-left: 2px; padding-bottom: 10px; list-style-type: none; }
#sidebar li { padding: 7px 0; }

#home-about { width: 560px; float: left; }


#home-services { width: 360px; float: right; padding-left: 20px; }
.skill { width: 380px; margin-bottom: -5px; float: left; }
.skill h3 { font-weight: normal; font-size: 14px; color: #343434; letter-spacing: 0px; word-spacing: -1px;  }
.skill p { font-size: 11px; margin-bottom: 0px; color: #727272; }
.skill img { float: left; margin-right: 20px; margin-top: 5px; margin-bottom: 45px; }

a.content-quote { margin-top: 15px; float: left; background: #555; border-bottom: 0; -moz-border-radius: 10px; padding: 10px 20px; color: #fff; font-size: 14px; font-weight: bold; }
a.content-quote:hover { background: #999; border-bottom: 0; }
a.content-quote:focus { background: #000; }

img.centered {

	display: block;

	margin-left: auto;

	margin-right: auto;

	}



img.alignright {

	padding: 6px;

	margin: 0 0 2px 7px;

	display: inline;

        background: #f0f0f0;
        border: 1px solid #ccc;

	}



img.alignleft {

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

	}



.alignright {

	float: right;

	}



.alignleft {

	float: left;

	}

/* project page */

.project { width: 960px; float: left; border-top: 1px solid #ccc; padding: 25px 0; }
.project-info { width: 280px; padding-right: 20px; float: left; }
.project-image { width: 660px; float: right; }
.project-work { color: #999; font-size: 10px; margin-top: -10px; }
.project-url { padding-top: 25px; }
.project-url a { background: #555; padding: 10px; color: #fff; text-decoration: none; }




/* footer */
#footer { width: 100%; float: left; background: #252525; margin-top: 35px; }
#footer-inside { width: 960px; margin: 35px auto; color: #c5c5c5; }

#footer-inside p { width: 500px; float: right; text-align: right; font-size: 10px; letter-spacing: 0px; word-spacing: -1px; color: #555; margin-bottom: 30px; }

#footer-inside ul { float: left; width: 400px; margin-bottom: 30px; list-style-type: none; }
#footer-inside li { float: left; margin-right: 10px; }
#footer-inside li a { color: #999; font-size: 10px; font-weight: bold; text-decoration: none; padding: 5px; }
#footer-inside li a:hover { -moz-border-radius: 5px; background: #3c3c3c; }