/* 

Aubrey Design
Author: Phoenix Design (http://www.tacomaphoenix.com)

 */
 
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}

/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1.5em;color: black;background: white; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;}
ol, ul {list-style: none;}
a{text-decoration:none; border-bottom:1px dashed #000; color:#000;}


/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}


/* MAIN */
#wrap{width:960px; margin:0 auto;}
#header{padding-top:10px;}
#logo{text-indent:-5000px; width:271px; height:78px; background:url(images/logo.jpg) no-repeat; float:left;}
#navigation{display:block; float:right; padding-top:45px;}
#navigation li{display:block; float:left; padding-left:40px; font-family:Arial, Helvetica, sans-serif; font-size:17px;}
#navigation a{text-decoration:none; color:#000; border:none;}
#fashion-navigation{display:block; float:right; padding-bottom:45px;}
#fashion-navigation li{display:block; float:left;font-family:Arial, Helvetica, sans-serif; font-size:17px;}
#fashion-navigation a{text-decoration:none; color:#000; border:none;}
#content{width:837px; background:url(images/bio-box-bg.jpg) repeat-y; margin:0 20px auto; clear:both;}
#fashion-content{width:837px; background:url(images/fashion-box-bg.jpg) repeat-y; margin:0 20px auto; clear:both;}
#bio-box{padding:10px 25px; margin-right:15px; height:450px; overflow:auto;}
#fashion-box{padding:10px 30px; margin-right:23px; height:450px; overflow:auto;}
#gallery{width:960px; overflow:hidden;}

/* FASHION PHILANTHROPY */
#fashion-logo{text-indent:-5000px; width:464px; height:67px; background:url(images/fashion-header.jpg) no-repeat; float:left;}

/* TOOLS */
.clear{clear:both;}
.right{float:right;}
.left{float:left;}
.photo{padding-left:15px; padding-right:15px;}

/* SLIDER */
#slider{}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:940px;
	height:600px;
	overflow:hidden; 
	}	
#slider li a{ 
	border:none;
	}
#prevBtn, #nextBtn{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:100px;
	top:200px;
	}	
#nextBtn{ 
	left:1125px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:30px;
	height:77px;
	text-indent:-5000px;
	border:none;
	background:url(images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a{ 
	background:url(images/btn_next.gif) no-repeat 0 0;	
	}	
	
	
/* SCROLLABLE */
/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 880px;	
	height:125px;
	margin:0 auto;	
	
	
	/* custom decorations */
	padding:10px 0;					
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:relative;
	clear:both;		
	
	/* decoration */
	margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:110px;
	height:100px;
	padding:10px 0px;
	margin-right: 20px;	
	-moz-border-radius:5px;
}

/* active item */
div.scrollable div.items div.active {

}

.scroll-images{
	border:none;
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(images/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
	border:none;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(images/right.png);
	float:right;	
	border:none;
}

.highlight{background:#FFFF33;}