/*
............................................................................................................................

    :::::::::   :::::::::
    :::::::::   :::::::::
    :::::::::   :::::::::
    :::::::::   :::::::::

    :::::::::   :::::::::
    :::::::::   :::::::::
    :::::::::   :::::::::
    :::::::::   :::::::::

    squarehead design studio | 845.389.8953 :: www.squareheaddesignstudio.com :: sblissinc@me.com

............................................................................................................................
*/

/* 	slideshow
---------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------*/
#slideshow { 
	background: url('../img-core/bkgd_slideshow.png') no-repeat 0 0;
	position: relative; overflow: hidden; width: 407px; height: 307px; float: left; margin-bottom: 20px; }
#slideshow .slide { 
	width: 360px; text-align: center; position: absolute; top: 3px; left: 4px; z-index: 1;}
#slideshow .slide img { border: 15px solid #FFFFFF; }
#caption { 
	font-weight: bold; font-size: 1.6em; line-height: 1.5em; margin-top: 40px;
	color: #000000; float: left; width: 260px; }


/* 	PORTFOLIO
---------------------------------------------------------------------------------------------------------------------------*/
#portfolio_slideshow { 
	background: url('../img-core/bkgd_slideshow.png') no-repeat 0 0;
	position: relative; overflow: hidden; width: 640px; height: 355px; float: left; margin-bottom: 20px; }
#portfolio_wrapper .portfolio .slide { 
	width: 640px; text-align: center; float: left; top: 0; left: 0; z-index: 1; }
#portfolio_wrapper .portfolio .slide img { float: left; }



#thumb_wrapper { overflow: hidden; width: 600px; float: left; margin: 15px 0 20px;}
#thumbs { float: left;}
#thumbs a.thumb { float: left; margin-right: 4px; border: 3px solid #FFFFFF; display: block;}
#thumbs a.thumb img { float: left; }
#thumbs a.thumb:hover { border: 3px solid #3399FF;}
#thumbs a.thumb.toc-active { background: none; border: 3px solid #3399FF;}
#thumbs_left { 
	cursor: pointer; width: 14px; height: 66px; float: left; background: url('../img-core/arrow_left.png') no-repeat 0 50%;}
#thumbs_right { 
	cursor: pointer; width: 14px; height: 66px; float: right; background: url('../img-core/arrow_right.png') no-repeat 100% 50%;}


#toccontrols { position: absolute; left: 22px; bottom: 30px; z-index: 99999; }
a.toc {
	float: left; display: block; width: 16px; height: 16px; background: #C7CBD6; color: #C7CBD6;
	text-align: center; margin-right: 2px; text-decoration: none; }
a.toc:hover { border: 0; color: #C7CBD6; }
a.toc-active { background: #1F2F5C; color: #1F2F5C; }
a.toc.toc-active:hover { color: #1F2F5C; }

#controls { float: left; margin: 10px 0 30px; width: 100%;}
#controls .control { float: left;}
#controls .control a { 
	display: block; float: left; background: #DDDDDD; padding: 2px 5px; margin-right: 10px; 
	color: #333333; text-align: center;}
#controls .control a:hover { background: #333333; color: #FFFFFF; border: 0;}