/*

Name: BB Black
Date: May 29, 2010
Description: CSS Stylesheet for BernardBilledo.com
Author: Bernard Billedo
Author URI: Bernard Billedo

*/

/*******Global*********/

/* Body */

	body {
		font: 81% Geneva, ÒLucida SansÓ, ÒLucida GrandeÓ, ÒLucida Sans UnicodeÓ, Verdana, sans-serif; /* set font size to 90% of 90 */ 
		background: #FFFFFF;
		margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
		padding: 0;
		text-align: left;
		color: #000000;
		background-color: #333;
	}

/* Headings */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}	/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {text-decoration:none; color:#333333;}
a:hover, a:active {text-decoration:none; color:#666666; text-decoration: underline;}

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #333333; color: #fff;}
::selection {background: #333333; color: #fff;}

/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}

ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
/* table {margin: .5em auto 1.5em auto; width: 98%;} */

	/* Thead */
	thead th {padding: .5em .4em; text-align: left;}
	thead td {}

	/* Tbody */
	tbody td {padding: .5em .4em;}
	tbody th {}

	tbody .alt td {}
	tbody .alt th {}

	/* Tfoot */
	tfoot th {}
	tfoot td {}



/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 960px;} /* only working on top banner */
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

/*
	Header
*****************/
#banner {
	/*background: #3f3f3f;
	*/
    margin: 0 auto;
	padding: 0 0 0 0;
    background-image:url('images/bbplogo-med.gif');
    background-repeat:no-repeat;
    background-position:right top;
	
/************************* No Banner border for now 
	border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;

	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;        *****/
	}

/*#banner figure {
*	float: right;
*	margin: 0.786em 2em 0 5em;
*	}
*
*#banner figure img {display: block; float: right;}
*/
	
	/* Banner */
	#banner h1 {font-size: 3.571em; line-height: .6;}
	#banner h1 a:link, #banner h1 a:visited {
		color: #000305;
		display: block;
		font-weight: bold;
		margin: 0 0 .6em .2em;
		text-decoration: none;
		width: 300px;               /* You might have to change this one */
		
	}
	#banner h1 a:hover, #banner h1 a:active {
		background: none;
		color: #3f3f3f;
		text-shadow: none;
	}

	#banner h1 strong {font-size: 0.36em; font-weight: normal;}


	/* Main Nav */
	#banner nav {
		background: #3f3f3f;
		font-size: 1.143em;
		height: 40px;
		line-height: 50px;		/* Menu text distance from top. */
		margin: 0 0 0 0;		/* Menu margin - top right bottom left */
		padding: 25px;
		text-align: left;
		width: 653px;            /* Menu Width */
		letter-spacing: 3px;

	/*	border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	*/
	}

	#banner nav ul {list-style: none; margin: 0 auto; width: 960px;}
	#banner nav li {float: left; display: inline; margin: 0;}

	#banner nav a:link, #banner nav a:visited {
		color: #fff;
		display: inline-block;
		height: 55px;
		padding: 5px 1.5em;
		text-decoration: none;
	}
	#banner nav a:hover, #banner nav a:active,
	#banner nav .active a:link, #banner nav .active a:visited,
		body#home a#homenav,
		body#gallery a#gallerynav,
		body#about a#aboutnav,
		body#links a#linksnav,
		body#contact a#contactnav
	{
		background: #ffffff;
		color: #000000;
		text-shadow: none !important;
				
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#3f3f3f'); /* for IE */
		background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#3f3f3f)); /* for webkit browsers */
		background: -moz-linear-gradient(bottom,  #ffffff,  #3f3f3f); /* for firefox 3.6+ */
		
		-webkit-transition-property: color;
		-webkit-transition-duration:1s;
		-webkit-transition-timing:ease-out;
	}

	#banner nav li:first-child a {
		border-top-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-webkit-border-top-left-radius: 5px;

		border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}
	
	#banner nav li:last-child a {
		border-top-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;

		border-bottom-right-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-bottom-right-radius: 5px;
	}





/*
	Featured
*****************/
#featured {
	background: #fff;
	background-image: url("");
	margin-bottom: 2em;
	overflow: hidden;
	padding: 0px;
	width: 960px;

}

#featured figure {
	border: 2px solid #eee;
	float: right;
	margin: 0.786em 2em 0 5em;
	width: 248px;
}
#featured figure img {display: block; float: right;}

#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;} /** change this later **/
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}

#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;} /** change this later **/
#featured h3 a:hover, #featured h3 a:active {color: #fff;}


/*


/*
	Body
*****************/
#content {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 0px;
	width: 960px;
    text-align: left;
    }
#content p {
		font-size: 1.143em;
		line-height: 32px;		/* Menu text distance from top. */
		margin: 0 0 0 0;		/* Menu margin - top right bottom left */
		padding: 50px;
		width: 500px;            /* Width of the text box*/
		letter-spacing: 3px;
        
}




/*
* Copyright
*/

#copyright p {
    color:#666666;
    text-align:left;
    font-size: small;
    letter-spacing: 2px;
    margin-bottom: 2em;
    }
    


/* miscellaneous */

/* clearfix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */