/*  
Theme Name: Saphyre
Theme URI: http://www.paulchater.co.uk
Description: Sleek blues, crazy blacks, that's what makes Saphyre.
Version: 1.0
Author: Paul Chater
Author URI: http://www.paulchater.co.uk/

*/
* { padding: 0; margin: 0; }
body, html { background-color: #191919; font: 12pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; color: #fff; }


/* Main Wrapping Styling
 * ------------------------------------------------
 * Main widths to use were 960px, although this
 * layout is NOT designed / based upon the 960
 * grid system.
 * ------------------------------------------------
 */
#wrapper-main { width: 100%; }
#wrapper-header { width: 960px; margin: 10px auto; }
#wrapper-header .logo { float: left; width: 300px; }
#wrapper-header .logo h1 
{ 
	font: bold italic 38pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; 
	letter-spacing: -6px; 
	margin: 0;
	text-shadow: 2px 2px 2px #000;
}
#wrapper-header .logo h2 
{ 
	font: italic 17pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; 
	letter-spacing: -3px; 
	margin-top: -16px;
	text-shadow: 2px 2px 2px #000;
}
#wrapper-header .logo a:link, 
#wrapper-header .logo a:visited,
#wrapper-header .logo a:active { text-decoration: none;	color: #fff; }
#wrapper-header .logo a:hover { color: #01c6ff; }
#wrapper-header .blue { color: #01c6ff; }
#wrapper-header .nav { float: right; margin-top: 35px; }
#wrapper-header .nav ul { list-style: none; }
#wrapper-header .nav ul li { display: inline; }
#wrapper-header .nav ul li a:link, 
#wrapper-header .nav ul li a:active,
#wrapper-header .nav ul li a:visited 
{ 
	background: #01c6ff url('images/nav-active.png') repeat-x;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 7px 15px 7px 15px;
	margin-left: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-shadow: 1px 1px 0px #000;
}
#wrapper-header .nav ul li a:hover { background: #fff url('images/nav_hover.png') repeat-x;	color: #000; text-shadow: 1px 1px 0px #fff; }
#wrapper-intro 
{
	background-color: #0d0d0d;
	width: 100%;
	border-top: 1px solid #232323;
	border-bottom: 1px solid #232323;
	margin-top: 20px;
	text-shadow: 3px 3px 2px #000;
}
#intro { width: 960px; padding: 10px; margin: 0 auto; font: bold italic 30pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; letter-spacing: -3px; }
#intro .blue { color: #01c6ff; }


/* Main Portfolio Styling
 * ------------------------------------------------
 * Set some options for the portfolio container.
 * It makes sense.
 * ------------------------------------------------
 */
#wrapper-pfolio { background: #161616 url('images/pfolio-back.png') repeat-x; width: 100%; padding: 15px 0px 10px 0px; }
#portfolio { width: 960px; margin: 0 auto; }
#portfolio h3 { color: #01c6ff; font: bold italic 30pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; text-shadow: 2px 2px 3px #000; }
#portfolio .shot { padding: 8px; background-color: #0d0d0d; border: 1px solid #222222; }
#portfolio .arrow { position: absolute; top: 370px; bottom: 0; }
#portfolio p { margin-bottom: 20px; }
#portfolio .pl { float: left; width: 440px; }
#portfolio .pr { float: right; width: 500px; }


/* Portfolio Slider Styling
 * ------------------------------------------------
 * Style the sexy jQuery portfolio slider on the
 * home page, make it look clean and funky.
 * ------------------------------------------------
 */
#slider ul, #slider li { margin:0; padding:0; list-style:none; }
#slider, #slider li { width:960px; height:250px; overflow:hidden;  }
#slider { z-index:1; }
#slider li { z-index:100; }
#slider a:link, 
#slider a:active, 
#slider a:visited
{
	background: #01c6ff url('images/nav-active.png') repeat-x;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 7px 15px 7px 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 10px;
	outline: none;
	text-shadow: 1px 1px 0px #000;
}
#slider a:hover { background: #fff url('images/nav_hover.png') repeat-x; color: #000; outline: none; text-shadow: 1px 1px 0px #fff; }


/* MAIN BLOG Styling
 * ------------------------------------------------
 * Set different options for the main blog layout,
 * this will display items differently on the page.
 * Really it's just generic blog styling.
 * ------------------------------------------------
 */
#wrapper-blog {	background: #161616 url('images/pfolio-back.png') repeat-x;	width: 100%; padding-top: 15px;	padding-bottom: 10px; }
#blog { 
	background: #0d0d0d url('images/blog-back.png') repeat-x; 
	width: 960px;
	margin: 0px auto 15px auto; 
	padding: 15px 15px 5px 15px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #222222;
}
#blog-left { float: left; width: 669px; font: normal 12pt 'Arial', Helvetica, sans-serif; }
#blog-left ol li { text-indent: 15px; margin-left: 20px; } 
#blog-left p { line-height: 1.5em; margin-bottom: 20px; }
.blog-content { padding: 10px 15px 10px 15px; }
#blog-left .wp-smiley { border: 0px solid #000; padding: 0; margin: 0; }
#blog-left h3 { font: bold 28pt 'Trebuchet MS', Helvetica, sans-serif; margin-bottom: 5px; color: #01c6ff; text-shadow: 2px 2px 3px #000; }
#blog-left h3 a:link, #blog-left h3 a:active, #blog-left h3 a:visited { color: #01c6ff; text-decoration: none; text-shadow: 2px 2px 3px #000; }
#blog-left h3 a:hover { color: #fff; }
#blog-left h4 { font: bold italic 20pt 'Trebuchet MS', Helvetica, sans-serif; color: #01c6ff; margin-top: 15px; margin-bottom: 0px; text-shadow: 2px 2px 3px #000; }
#blog-left a:link, #blog-left a:active, #blog-left a:visited { color: #01c6ff; text-decoration: none; text-shadow: 1px 1px 0px #000; }
#blog-left a:hover { color: #fff; text-decoration: underline; }
#blog-left ul { margin-left: 15px; }
#blog-left img 
{
	text-decoration: none; 
	border: 1px solid #222222;
	padding: 5px;
	background-color: #121212;
	text-align: center;
	margin: 10px auto 10px auto;
}
#blog-left .more-link { text-shadow: 2px 2px 3px #000; display: block; text-align: right; }
#blog-left code { font-size: 10pt; font-family: Consolas, Monaco, "Lucida Console", small-fonts; text-shadow: 2px 2px 3px #000; }
#blog-left input { background-color: #1a1a1a; color: #fff; border: 1px solid #222; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 10px; }
#blog-left input:hover { border-color: #444; }
#blog-left input:focus { border-color: #01c6ff; color: #01c6ff; }
#blog-left textarea { background-color: #1a1a1a; color: #fff; border: 1px solid #222; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#blog-left textarea:hover { border-color: #444; }
#blog-left textarea:focus { border-color: #01c6ff; color: #01c6ff; }
#blog-left label { width: 190px; float: left; font-weight: bold; margin-bottom: 10px; }
#blog-left .meta-bottom { padding: 10px; border: 1px solid #222; background-color: #121212; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 30px; }
#blog-left .meta-right { float: right; text-align: right; }
#blog-left .meta-left { float: left; text-align: left; width: 400px; } 
#blog-left .comments { font-size: 24pt; color: #fff; }
#blog-left .tags { font-size: 14pt; color: #444; }
#blog-left .filed { font-size: 14pt; color: #333; }
#blog-left .date { font-size: 20pt; color: #333; }
#blog-left .navigation { width: 100%; }
#blog-left .align-left { float:left; }
#blog-left .align-right { float: right; }


/* Main Comments Styling
 * ------------------------------------------------
 * .fn				= 	WP Class - Full Name
 * .says			=	WP Class - Says
 * .comment-meta	=	Add a bit of margin and
 *	set the font size to 10 points.
 * .avatar-*		=	WP Class - Avatar Image
 * ------------------------------------------------
 */
#comments .fn { font-size: 20px; font-weight: bold; text-shadow: 2px 2px 3px #000; font-style: normal; }
#comments .says { color: #888; }
#comments .comment-meta { margin-bottom: 10px; font-style: italic; font-size: 10pt;}
#comments p { font-size: 10pt; margin: 0;}
#comments ul { list-style: none; margin: 0; padding: 0; }
#comments li {
	padding: 10px;
	background-color: #121212;
	border: 1px solid #222;
	margin-bottom: 10px;
	margin-left: 0;
	text-indent: 0;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
}
#comments li:hover { border: 1px solid #333; }
#comments li:focus { border: 1px solid #333; }
#comments .avatar { margin-right: 10px;	padding-right: 10px; }
#comments img { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#comments .avatar,
#comments .avatar-75,
#comments .photo,
#comments .avatar-default { float: right; border: 0; padding: 0; margin: 0; margin-left: 15px; width: 75px; }


/* Sidebar Styling
 * ------------------------------------------------
 * Make sure everything is rounded, there are boxes
 * for the layout, so it looks kind of "modular".
 * ------------------------------------------------
 */
#sidebar { float: right; width: 259px; }
.sidebar-item { 	
	background: #0a0a0a url('images/sbar-back.png') repeat-x; 
	border: 1px solid #111111;
	padding: 5px 10px 5px 10px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	margin-bottom: 10px;
	font-size: 10pt; 
}
#sidebar h3 { 
	color: #01c6ff; 
	font: bold italic 16pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif;
	border-bottom: 1px dashed #121212;
	text-align: center;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
#sidebar ul { list-style: none; }
#sidebar ul li { color: #fff; }
#sidebar ul li a:link,
#sidebar ul li a:active, 
#sidebar ul li a:visited { color: #fff;	text-decoration: none; }
#sidebar ul li a:hover { color: #01c6ff; text-decoration: underline; }
.sidebar-content { 	padding: 10px 15px 10px 15px; }


/* Footer
 * ------------------------------------------------
 * Have boxes which are mainly links, these will
 * be automatically updated by the wordpress blog
 * roll engine. 
 * ------------------------------------------------
 * Give a bottom footer displaying copyright info
 * too.
 * ------------------------------------------------
 */
#wrapper-footer
{
	background-color: #0d0d0d;
	width: 100%;
	border-top: 1px solid #1f1f1f;
	border-bottom: 1px solid #1f1f1f;
	padding: 15px 0px 10px 0px;
}
#footer { width: 960px; margin: 0 auto; }
#footer h4 { color: #01c6ff; font: bold italic 24pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; text-shadow: 2px 2px 3px #000; }
#footer ul { display: block; list-style: none; }
#footer ul li { padding: 3px 0px 3px 0px; font: italic 14pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif; }
#footer ul li a:link,
#footer ul li a:active,
#footer ul li a:visited
{
	padding: 3px 0px 3px 0px;
	font: italic 14pt 'Trebuchet MS', Helvetica, "Lucida Grande", sans-serif;
	text-decoration: none;
	color: #fff;
	text-shadow: 2px 2px 3px #000;
}
#footer ul li a:hover
{
	border-bottom: 1px solid #fff;
} 
#footer .box { float: left; width: 320px; }
#footer small { font-style: italic; color: #333333; }
.copy { text-align: center; font-size: 10pt; margin-top: 10px; margin-bottom: 10px; }
span#prevBtn{ float: left; width: 48px; }
span#nextBtn{ float: right; width: 48px;}
.clear { clear: both; }
.cl { clear: left; }
.cr { clear: right; }