/*------------------------------------------------
Generic styles
------------------------------------------------*/
body { font-family: Helvetica, Calibri, Verdana, Sans-Serif; font-size: 20px; width: 1200px; }
div.errors { border: 1px solid #DD3C10; background-color: #FFEBE8; padding: 10px; line-height: 18px;
             margin-top: 10px; width: 300px; }
div.errors ul { margin: 0; padding: 0; list-style-type: none; }
div.errors ul li { margin: 5px 0 5px 0; }
input[type=text], input[type=password], textarea { border: solid 1px #BBBBBB; padding: 5px;
                                                   font-family: Calibri, Verdana, Sans-Serif; font-size: 12px; }
input[type=text]:focus, input[type=password]:focus, textarea:focus { border: solid 1px #000000; }
span.required { color: Red; }
h1 { text-indent: -3000px; margin: 0; padding: 0; font-size: 1px; }
a, img, a img { border:none; outline:none; }
.right { float: right; }
.left { float: left; }
.clear { clear: both; }



/*------------------------------------------------
Header styles
------------------------------------------------*/
div#header { width: 100%; height: 128px; margin: 0; padding: 0; position: relative; }
div#header a { width: 900px; height: 128px; display: block; position: absolute; text-indent: -3000px;
               background: url('http://images.kylabutterfield.com/kylabutterfield.gif') no-repeat; }
div#header a.home { background-position: 0 0; }
div#header a.about { background-position: 0 -128px; }
div#header a.work { background-position: 0 -256px; }
div#header a.blog { background-position: 0 -384px; }
div#header a.resume { background-position: 0 -512px; }
div#header a.contact { background-position: 0 -640px; }


/*------------------------------------------------
Nav styles
------------------------------------------------*/
ul#nav { width: 269px; height: 404px; background: url('http://images.kylabutterfield.com/menu.gif'); margin: 0 31px 0 0;
		 padding: 0; position: relative; list-style: none; float: left; }
ul#nav li { margin: 0; padding: 0; position: absolute; top: 0; }
ul#nav li, ul#nav li a { width:269px; display:block; text-indent: -3000px; }
ul#nav li.home, ul#nav li.home a { top: 0; height: 69px; width: 202px; }
ul#nav li.home a:hover, ul#nav li.home a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -273px 0 no-repeat; }
ul#nav li.about, ul#nav li.about a { top: 69px; height: 67px; width: 204px; }
ul#nav li.about a:hover, ul#nav li.about a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -273px -69px no-repeat; }
ul#nav li.work, ul#nav li.work a { top: 135px; height: 70px; width: 200px; }
ul#nav li.work a:hover, ul#nav li.work a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -272px -135px no-repeat; }
ul#nav li.blog, ul#nav li.blog a { top: 207px; height: 85px; width: 153px; }
ul#nav li.blog a:hover, ul#nav li.blog a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -272px -207px no-repeat; }
ul#nav li.resume, ul#nav li.resume a { top: 292px; height: 53px; width: 266px; }
ul#nav li.resume a:hover, ul#nav li.resume a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -273px -292px no-repeat; }
ul#nav li.contact, ul#nav li.contact a { top: 345px; height: 59px; width: 264px; }
ul#nav li.contact a:hover, ul#nav li.contact a.selected { background: transparent url('http://images.kylabutterfield.com/menu.gif') -272px -345px no-repeat; }



/*------------------------------------------------
Homepage styles
------------------------------------------------*/
div#home { width: 900px; float: left; }
div#home div#content { width: 400px; float: left; padding: 0 50px 0 15px; }
div#home div#content p { margin: 0; color: #D2D3D5; font-size: 45px; letter-spacing: -3px; text-align:justify; }
div#home div#sidebar { width: 240px; float: left; }
div#home div#tweets { font-size: 14px; border: solid 1px #D2D3D5; }
div#home div#tweets div.header { background: #A0A0A0; color: #FFFFFF; font-size: 20px; font-weight: bold; padding: 2px; text-align: center; }
div#home div#tweets div.from { background-color: #FFFFFF; padding: 8px 8px 0 8px; }
div#home div#tweets div.from img { float: left; margin: 0 6px 0 0; }
div#home div#tweets div.from span.username a
	{ color: #ED008C; text-decoration: none; font-size: 20px; font-weight: bold; display: block; text-transform: lowercase; }
div#home div#tweets div.from span.followers { color: #D8D8D8; font-size: 14px; font-weight: bold; display: block; }
div#home div#tweets div.tweet { padding: 7px; clear: both; }
div#home div#tweets div.tweet span.when { display: block; font-style: italic; }
div#home div#tweets div.tweet p { margin: 0; }
div#home div#tweets div.tweet p a { color: #ED008C; text-decoration: none; }
div#home div#latest { font-size: 14px; margin: 20px 0 0 0; border: solid 1px #D2D3D5; }
div#home div#latest div.content { padding: 8px; }
div#home div#latest a { color: #ED008C; text-decoration: none; font-size: 20px; font-weight: bold; display: block; }
div#home div#latest p.date { font-size: 16px; font-weight: bold; color: #D8D8D8; margin: 0; }
div#home div#latest div.header { background: #A0A0A0; color: #FFFFFF; font-size: 20px; font-weight: bold; padding: 2px; text-align: center; }


/*------------------------------------------------
About styles
------------------------------------------------*/
div#about { width: 740px; float: left; }
div#about p { margin: 0 0 12px 0; text-align: justify; }
div#about img { border: 1px solid #D2D3D5; margin: 35px 0 15px 25px; float: right; }
div#about b { text-transform: lowercase; color: #F89E1E; font-size: 24px; }


/*------------------------------------------------
Blog styles
------------------------------------------------*/
div#blog, div#blogpost { width: 740px; float: left; }
div#blog a { color: #41AD48; text-decoration: none; font-weight: bold; font-size: 24px; display: block; padding: 15px 0 0 0; clear: both; }
div#blog p.date, div#blogpost p.date { font-size: 16px; font-weight: bold; color: #D2D3D5; margin: 0; }
div#blog p.content { margin: 0; float: left; width: 520px; padding: 0 18px 0 0; }
div#blog p.contentAlt { margin: 0; float: left; width: 520px; padding: 0 0 0 18px; }
div#blog div.image { width: 200px; height: 145px; border: solid 1px #D2D3D5; }
div#blogpost h1 { text-indent: 0; margin: 0; padding: 0; font-size: 30px; color: #41AD48; }
div#blogpost span.date, div#blogpost img { display: block; margin: 0 0 20px 0; }
div#blogpost img { border: solid 1px #D2D3D5; }



/*------------------------------------------------
Portfolio styles
------------------------------------------------*/
div#work { width: 900px; float:left; }
div#work div#portfolio { width: 720px; float:left; }
div#work div#image { margin: 0 auto; width: 700px; background: #FFFFFF; overflow: visible; height: 500px;
                       padding-right: 5px; position: absolute; top: 0px; text-align:center; }
div#work div#image.loading { background: url('http://images.kylabutterfield.com/loading.gif') #FFFFFF no-repeat 50% 250px; }
div#work div#image img { display: block; background-color: #FFFFFF; margin: 0 auto; }
div#work div#thumbs { width: 700px; overflow: hidden; margin: 0 auto; }
div#work div#thumbs ul { list-style: none; width: 6000px; }
div#work div#thumbs ul li { float: left; margin: 0; width: 75px; height: 50px; background-color: #000000; text-align: center; }
div#work div#thumbs ul li img { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; cursor: pointer; }
div#work div#thumbs ul li img.selected { filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; }
div#work div#filter { width: 180px; float:left; }
div#work div#filter ul { list-style: none; margin: 0; padding: 0; }
div#work div#filter ul a { color: #C4C5C6; font-weight: bold; text-decoration: none; font-size: 24px; text-transform: lowercase; }
div#work div#filter ul a.selected, div#work div#filter ul a:hover { color: #F2E600; }



/*------------------------------------------------
Contact styles
------------------------------------------------*/
div#contact { width: 900px; float: left; }
div#contact div#content { width: 520px; float:left; }
div#contact label { display: block; }
div#contact input[type=text], div#contact input[type=password], div#contact textarea { display: block; width: 400px; margin: 0 0 5px 0; }
div#contact div.field { margin: 0 0 10px 0; }
div#contact p { margin: 0 0 20px 0; }
div#contact ul.contact { width: 220px; float: left; list-style: none; margin: 0; padding: 0; }
div#contact ul.contact li { line-height: 32px; height: 32px; margin: 0 0 10px 0; }
div#contact ul.contact li.linkedin { background: url('http://images.kylabutterfield.com/linkedin.png') no-repeat 0 0; height: 32px; }
div#contact ul.contact li.twitter { background: url('http://images.kylabutterfield.com/twitter.png') no-repeat 0 0; height: 32px; }
div#contact ul.contact li.facebook { background: url('http://images.kylabutterfield.com/facebook.png') no-repeat 0 0; height: 32px; }
div#contact ul.contact li.skype { background: url('http://images.kylabutterfield.com/skype.png') no-repeat 0 0; height: 32px; }
div#contact ul.contact li.aim { background: url('http://images.kylabutterfield.com/aim.png') no-repeat 0 0; height: 32px; }
div#contact ul.contact li a { color: #C4C5C6; font-weight: bold; text-decoration: none; padding: 0 0 0 40px;  }
div#contact ul.contact li a:hover { color: #8740C0; }
div#contact a.send { width: 70px; height: 25px; display: block; position: absolute; text-indent: -3000px;
                background: url('http://images.kylabutterfield.com/send.png') no-repeat 0 0; margin: 0 0 0 342px; }
div#contact a.send:hover { background-position: -70px 0; }



/*------------------------------------------------
Error styles
------------------------------------------------*/
div#error h1 { text-indent: 0; margin: 0; padding: 0; font-size: 30px; color: #000000; }