body {background: #070d3f url(../images/moonshark-generic-background.jpg) repeat-x left top;margin: 0;
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;}

p {font-size: 0.8em; color: #0e195b; line-height: 1.9em; margin:15px 0;}

a {outline: none;}

a img {border: none;}

div#wrapper {width: 980px; margin: 0 auto; background: none; min-height: 800px;}

h2 {color: #fff; font-weight: lighter; font-size: 1.35em;}


/* -------------------------------------------------------------------------------

									Header Styling

--------------------------------------------------------------------------------- */

div#header {height: 151px;}

div#header ul#topnav {margin: 5px 0 0 0; padding: 0; list-style-type: none; float: right;}

div#header ul#topnav li {float: left;}

div#header ul#topnav li a {display: block; color: #fff; text-decoration: none; font-size: 0.9em; font-weight: normal; padding: 17px 0 6px 52px;}

div#header ul#topnav li a#onlink, div#header ul#topnav li a:hover {background: url(../images/nav-bg.png) no-repeat left top;}


h1 {
	width: 351px;
	height: 117px;
	margin: 0;
	background: url(../images/moonshark-logo.png) no-repeat left top;
	text-indent: -9999px;
	margin-top: 31px;
float: left;
}


/*
h2#strapline {width: 586px; float: right; border-left: 1px solid #2a336e; padding-left: 15px; line-height: 1.5em; text-align: right; margin: 17px 0 0 0;}
*/

h2#strapline {width: 600px; float: right; border-left: 1px solid #2a336e; padding-left: 5px; line-height: 1.5em; text-align: right; margin: 17px 0 0 0;}
h2#strapline a {color: #1c92d2;font-size: 2.05em; text-decoration: none; background: url(../images/mywork-bottomline.png) repeat-x left bottom;}

/* -------------------------------------------------------------------------------

								A few examples panel

--------------------------------------------------------------------------------- */

div#few-examples {width: 434px; margin-top: 20px; float: right;}

div#few-examples h3 {width: 409px; height: 32px; margin: 0 0 10px 0; background: url(../images/a-few-examples-of-my-work.png) no-repeat left top; text-indent: -9999px;}

div#few-examples li a {border: 1px solid #6f769c; float: left; margin: 0 6px 6px 0;}

div#few-examples li a.last {margin: 0;}

div#few-examples li a img {float: left;}

div#few-examples li a:hover {border: 1px solid white;}

/* -------------------------------------------------------------------------------

							Homepage Content Styling

--------------------------------------------------------------------------------- */

body#homepage {
	background: #fff url(../images/moonshark-background.jpg) repeat-x left top;
}

body#homepage div#wrapper {width: 980px; margin: 0 auto; background: url(../images/laptop.png) no-repeat 0 151px; min-height: 800px;position: relative;}


div#homepage-content {float: left;background: url(../images/this-is-me.png) no-repeat right 45px; width: 663px;padding-top: 112px;}

div#homepage-content h4 {font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;color: #060c31; font-weight: normal; font-size: 2em; margin: 0;}


/* -------------------------------------------------------------------------------

							Easy Slider

--------------------------------------------------------------------------------- */

	div#slider {/*position: relative; top: 20px; left: 57px;*/ float: left; margin: 20px 0 0 57px;}


	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		width:409px;
		height:253px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:0px;
		top:270px;
		z-index:1000;
		text-indent: -9999px;
		}	
	#nextBtn, #slider1next{ 
		left:486px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:40px;
		height:38px;
		background:url(../images/leftarrow.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/rightarrow.png) no-repeat 0 0;	
		}	
		


/* -------------------------------------------------------------------------------

								Testimonials Styling

--------------------------------------------------------------------------------- */

div#testimonials {float: right; width: 317px; background: url(../images/testimonials-bg.png) no-repeat left top; height: 442px;}

div#testimonials h5 {width: 267px; height: 80px; text-indent: -9999px; background: url(../images/testimonials-title.png) no-repeat left top; margin: 7px 0 22px 9px;}

div#testimonials p {color: white; font-size: 0.9em;line-height: 1.6em; }
div.quote {width: 292px; /*background: url(../images/left-quotes.png) no-repeat left top;*/ margin-left: 9px;}
div.quote-bottom {width: 292px; /*background: url(../images/left-quotes.png) no-repeat left top;*/ margin-left: 9px; margin-bottom: 20px;}
blockquote {margin: 0;  font-weight: normal; background: url(../images/right-quotes.png) no-repeat right bottom; }
blockquote strong {font-size: 0.7em; color: #1c92d2;}
div.quote-first {background: url(../images/left-quotes.png) no-repeat left top; float: left; width: 51px; height: 43px; margin-right: 3px;}


/* -------------------------------------------------------------------------------

									Footer Styling

--------------------------------------------------------------------------------- */

div#footer {background: #0c195f url(../images/footer-bg.jpg) repeat-x left top; height: 139px; clear: both;}

div#footer-inner {background: url(../images/footer-shark.jpg) no-repeat left top; height: 139px; width: 980px; margin: 0 auto;}

div#footer-inner ul {margin: 50px 0 0 0; padding: 0 0 12px 0; list-style-type: none; float: right; width: 360px; background: url(../images/footer-line.png) no-repeat right bottom;}

div#footer-inner ul li {margin-right: 30px; float: left;}
div#footer-inner ul li#last {margin-right: 0;}
div#footer-inner ul li a {display: block; text-decoration: none; float: left; font-size: 0.7em; color: #1c92d2; line-height: 1.4em;}
div#footer-inner ul li a span {color: #FFF;}

div#footer-inner ul li a:hover {color: #1c92d2;}



/* -------------------------------------------------------------------------------

								My Work Page Styling

--------------------------------------------------------------------------------- */


body#mywork p {color: white;}
body#mywork p a {background:#1c92d2; padding: 1px 3px; color: white; text-decoration: none; }
body#mywork h2 {font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;font-size: 2em; margin-bottom: 10px;margin-top: 25px;line-height: 1.3em;}
body#mywork h2 span {color: #1c92d2;}
body#mywork div#header {height: 181px;}


/* -------------------------------------------------------------------------------

								Twitter Styling

--------------------------------------------------------------------------------- */

body#mywork div#twit-div {
background: url(../images/twitter-top-contact.png) no-repeat left top;
width: 435px;
float: right;
margin-top: 20px;
}

div#latest_tweet {background: #131E63;margin-top: 17px;}

div#latest_tweet p {color: white; line-height: 1.4em;font-size: 0.8em; padding: 0 20px 0 40px; font-style: italic; margin: 0;}

div#latest_tweet p a {text-decoration: none; font-style: normal; font-size: 0.85em; color: #1C92D2; background: none;}

div#latest_tweet small {font-size: 0.8em; color: #1C92D2;}

body#mywork div#twitterbottom {
	background: url(../images/twitter-bottom-contact.png) no-repeat left top;
	width: 435px;
	height: 34px;
	float: right;
	position: relative;
}

 .loading {  
     background: url('../images/ajax-loader.gif') center no-repeat;  
     height: 38px;  
 }

body#mywork div#twitterbottom p {margin: 19px 0 0 170px; color:#FFF;font-style: italic;}

div#twitterbottom p a {color:#1c92d2; background: none; padding: none;font-style: normal;}

body#mywork img#twitter-icon { top: -120px; left: -50px; position: relative;}


/* -------------------------------------------------------

				Contact Twitter Styling

------------------------------------------------------- */

body#contact div#twit-div {
background: url(../images/twitter-top.png) no-repeat left top;
width: 380px;
float: left;
}


body#contact div#twitterbottom {
	background: url(../images/twitter-bottom.png) no-repeat left top;
	width: 380px;
	height: 39px;
	float: left;
	margin-bottom: 35px;
	position: relative;
}

body#contact div#latest_tweet p {color: white; line-height: 1.65em;font-size: 0.8em; padding: 10px 20px; font-style: italic;}
body#contact div#latest_tweet p a {background: none; color: white; text-decoration: none; font-style: normal; font-size: 0.75em; color: #1C92D2;}

/*body#contact div.loading {   
     height: 235px;  
 }
 */

body#contact div#twitterbottom p {margin: 25px 0 0 115px; color:#FFF;font-style: italic;}
body#contact div#twitterbottom p {margin: 25px 0 0 115px; color:#FFF;font-style: italic;}
body#contact div#twitterbottom p a {color:#1c92d2; background: none; padding: none;font-style: normal;}

body#contact img#twitter-icon { top: -80px; left: 305px; position: relative;}

/* ------------------------------------------------------------------------------- */


ul#portfolio-list {   
	float: left;   
	list-style: none;   
	padding:0;
	width: 980px;
	margin: 0;
}  
ul#portfolio-list li {   
	float: left;   
	list-style: none;   
	} 

.preview-image {
	float: left;
	margin: 11px 11px 11px 0;
	width: 315px;
	height: 217px;
	display: block;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	border: 2px solid #1c92d2;
-moz-box-shadow: 3px 3px 12px #000; /* x, y and blur distance*/
-webkit-box-shadow: 3px 3px 12px #000;
box-shadow: 3px 3px 12px #000;
}

.rowend {
	float: left;
	margin: 11px 0 11px 0;
	width: 315px;
	height: 217px;
	display: block;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	border: 2px solid #1c92d2;
-moz-box-shadow: 3px 3px 12px #000; /* x, y and blur distance*/
-webkit-box-shadow: 3px 3px 12px #000;
box-shadow: 3px 3px 12px #000;
}

.preview-image img{
	position: absolute;
	top: 0;
	left: 0;
}

div#client-info-panel {width: 346px; float: left;}

div#client-info-panel h2 span {display: block;}

div#client-info-panel p {line-height: 1.6em;}

div#client-info-panel p a, div#client-info-panel p a:link {background: none;}

div#client-info-panel p a:hover {text-decoration: underline;}

img#screenshot {margin-bottom: 10px; float: right; border: 7px solid #1c92d2; margin-top: 20px;}

div#client-info-panel a#live-site {color: #1c92d2; text-decoration: none; background: none; padding: 0;}

div#client-info-panel a#live-site:hover {text-decoration: underline;}

ul#skills-used {background: #131e63;  padding: 20px; margin: 20px 0;}

ul#skills-used li#title {color: #1c92d2; font-size: 1em; padding-left: 0; background: none;}
ul#skills-used li {color: white; padding-left: 30px; line-height: 2em; font-size: 0.8em; background: url(../images/tick.gif) no-repeat left 0;}

a#go-back {display: block;width: 213px; height: 44px; text-indent: -9999px; background: url(../images/back-to-portfolio.png) no-repeat left top;}

/* -------------------------------------------------------------------------------

								Contact Styling

--------------------------------------------------------------------------------- */


body#contact p {color: white;}
body#contact p a {background:#1c92d2; padding: 1px 3px; color: white; text-decoration: none; }

div#contact-left {float: left; width: 514px;}

div#contact-left form p {float: left; margin: 5px 0; width: 99%;}
div#contact-left form p label {width: 155px; float: left; text-align: right; padding-right: 5px; padding-top: 5px;}
div#contact-left form p input {width: 340px;; float: left; padding: 10px 2px; border: 2px solid #1C92D2;-moz-border-radius: 5px;
-webkit-border-radius: 5px;}
div#contact-left form p textarea {width: 340px; float: left; padding: 6px 2px;border: 2px solid #1C92D2;-moz-border-radius: 5px;
-webkit-border-radius: 5px;}
div#contact-left form p input#submit {background: #1C92D2; color: #fff; font-size: 1.1em; width: 112px; height: 39px; border: none; float: right;-moz-border-radius: 8px;
-webkit-border-radius: 8px;}

div#contact-right {float: right; width: 436px;}


/* ------------------------------------------------------------------------------- */

body#contact h3 {font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;font-size: 2em; margin-top: 25px; margin-bottom: 10px;color: white; font-weight: normal;}
body#contact h3 span {color: #1c92d2;}

body#contact h4 {width: 309px; height: 68px; margin: 0; background: url(../images/send-me-some-mail.png) no-repeat left top; text-indent: -9999px;}
body#contact h5 {clear: left; width: 408px; height: 67px; margin: 0; background: url(../images/find-me-at.png) no-repeat left top; text-indent: -9999px;}
ul#contact-logos {margin: 0 0 20px 0; padding: 0; list-style-type: none; float: right;}
ul#contact-logos li {float: left; margin-right: 15px;}
ul#contact-logos li#last-logo {margin-right: 0;}