/*

TITLE: PARULACREATIVE.COM
DATE: JUNE 2010
VERSION: 1.0
AUTHOR: JILL KELLETT

*/


/*------------------------Imports------------------------*/
@import url("css/reset.css");


/*------------------------Global------------------------*/

body {background: #f2f2f2; color: #454545; font:10px Verdana, Geneva, sans-serif; line-height: 1.5;}

.body {background-image:url(images/border-main.png); background-repeat:repeat-y; clear: both; margin: 0 auto; width: 950px;}

header, section, footer, aside, nav, article, figure {display: block;}

a {outline: 0;}

a img {border: 0px; text-decoration: none;}

nav a {color: #454545; text-decoration: none; padding: 1px 2px 1px 5px; border: 1px solid #ffffff;}

nav a:hover {border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000;}

li.selected {border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; letter-spacing: 4px; padding: 1px 2px 1px 5px;}

li a.selected {border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; padding: 1px 2px 1px 5px;}

aside li {font-size: 9px; line-height: 1.9em;}

aside header img {margin-bottom: 5px;}


/*------------------------Header------------------------*/

#banner {padding: 35px 0;}

#banner img {display: block; margin-left: auto; margin-right: auto;}

#banner nav {text-align: center; margin: 13px auto 0;}

#banner nav li {display: inline; letter-spacing: 4px; margin: 0 5px; text-transform: uppercase;}


/*------------------------Intro Aside------------------------*/

#intro {padding-top: 10px; padding-bottom: 10px; border-top: 4px double #f2f2f2; border-bottom: 4px double #f2f2f2;}

#intro img {display: block; margin-left: auto; margin-right: auto;}


/*------------------------Main------------------------*/

#main {padding: 15px 80px 40px; width: 790px; min-height: 295px; height:100%;}

#main .feature {float: left; border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #f2f2f2; padding: 3px;}

#work #main .slideshow {float: left; width: 450px; height: 285px; border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #f2f2f2; padding: 3px;}

#working #main .slideshow {float: left; width: 785px; height: 438px; border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #f2f2f2; padding: 3px;}

#main .slideshow img {padding: 3px;}

section aside {float: right;}


/*------------------------Home------------------------*/

#competencies {float: right; margin-left: 25px; width: 305px;}

#competencies li {list-style-image:url(images/home/check.png); margin-left: 22px; letter-spacing: 4px; text-transform: uppercase;}

#design-for-print {margin-top: 10px; margin-bottom: 20px; float: left;}

#design-for-web {margin-top: 10px; margin-bottom: 20px; float: right;}


/*------------------------Work------------------------*/

#work #main {background-image:url(images/border-main-work.png);}

#working #main {min-height: 450px;}

nav.left {float: left; text-align: right; width: 152px; margin-right: 25px;}

nav.left ul {margin-bottom: 25px;}

nav.left li {margin-bottom: 4px; text-transform: none; letter-spacing: 1px;}

nav.left li img {margin-right: 5px;}

#project .feature {margin-bottom: 15px; float: none;}

#description {float: right; margin-left: 10px; width: 140px;}

#description p {margin-bottom:10px;}


/*------------------------Contact Form------------------------*/

#contact form {width: 660px; margin: auto;}

#contact input, textarea {float:left; background: #f2f2f2; padding:4px 2px; border:none; font:10px Verdana, Geneva, sans-serif; width:540px; margin:0 0 15px 15px;}

#contact label {display:block; font-weight:bold; text-align:right; padding:5px 0; width:100px; float:left;}
		
#contact input#send {float:none; clear:both; margin-left:555px; margin-bottom:0px; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #f2f2f2; text-align:center; color:#454545; background:#ffffff; font-weight:bold; width: 100px;}

#contact div#message {color: #cfc30c; font-weight: bold; margin-bottom: 15px; text-align: center;}


/*------------------------Footer------------------------*/

footer.body  {text-transform: uppercase; text-align: center; font-size: 9px; letter-spacing: 4px; padding: 15px 0 25px; border-top: 4px double #f2f2f2;}

#social {background: none; margin-bottom: 60px;}

#social img {float: right}

#fb:hover {background:url(images/social/facebook-roll.png); margin: 0;}
#twt:hover {background:url(images/social/twitter-roll.png); margin: 0;}
#lkd:hover {background:url(images/social/linkedin-roll.png); margin: 0;}


/*------------------------Border------------------------*/

#border-top img {display: block; margin: 40px auto 0;}

#border-bottom img {display: block; margin: 0 auto;}