/* ----------------------------------------------------------------------------------
    Theme Name: Timmy Cai's Design Pad
    Version: 2.1
    Author: Timmy Cai
    Author URI: http://www.mydesignpad.com/
    CSS: Work Page
---------------------------------------------------------------------------------- */


/* COLORS
---------------------------------------------------------------------------------

Pale Beige: #ecdece
DarK Brown: #3e2105
Pink: #ec1863
Light Pink: #ec7ca4
Very Light Pink: #ebcdd7
Blue: #1989ca
Dark Blue: #0269a5
Light Blue:#9ec5e3
75% Gray: #666666
60% Gray: #7d7d7d
50% Gray: #959595
40% Gray: #acacac
15% Gray #e1e1e1
Black: #000000
White: # ffffff
--------------------------------------------------------------------------------------------------------------------------------------------- */

/* PPORTFOLIO PAGE STARTS HERE
--------------------------------------------------------------------------------------------------------------------------------------------- */
/* HEADER
---------------------------------------------------------------------------------- */
#work-wrap{
	border: 0px red solid;
	width:900px;
	min-height: 400px;
	float: left;
	z-index: 150;
}
#hire-me{
	top:50px;
	position: relative;
	border: 0px red solid;
	width:850px;
	color:#3e2105;
	text-align: right;
	z-index: 151;
}
#hire-me a{
	font-weight: bold;
	color:#1989ca;
	text-decoration: none;
}
#hire-me a:hover{
	color: #0269a5;
	text-decoration: none;
}
h1#selected-work-title{
	position: relative;
	margin: 25px 0 0 50px;
	width:296px;
	height: 58px;
	text-indent: -3000em;
	overflow: hidden;
	background: url(../images/selected-work.png) left no-repeat;
	z-index: 100;	
}
#work-col{
	position: relative;
	width:900px;
	min-height:380px;
	margin: -20px 0 40px 0;
	background: url(../images/selected-bottombg.png) bottom no-repeat;
}
#work-col-top{
	width:900px;
	height:10px;
	background: url(../images/selected-topbg.png) top no-repeat;
}
#selected-work {
	width:900px;
	height:360px;
	background-color: #f5efec;
}
#selected-work ol{
	padding: 30px 0 0 80px;
	width:820px;
	height:240px;
}
#selected-work ol li{
	float: left;
	width: 250px;
	margin: 5px 10px 15px 0px;
}
#selected-work ol li a{
	line-height: 13px;
	font-size: 1em;
	height: 13px;
	float: left;
	color: #1989ca;
	padding-left: 20px;
	background:url(../images/bullet.png) no-repeat top left;
	text-decoration: none;
}
#selected-work ol li a:hover{
	color: #ec1863;
	text-decoration: underline;
	background:url(../images/bullet.png) no-repeat bottom left;
}

/* PORTFOLIO WORK AREA
---------------------------------------------------------------------------------- */
.single-box{
	padding: 25px 0 15px 0;
	border: solid 0px red;
	width:900px;
	min-height:380px;
	background: url(../images/work-divider.png) center bottom no-repeat;
	z-index: 149;

}
.singles{
	border: solid 0px red;
	margin: 30px 0 10px 50px;
	width:825px;
	height:327px;
	background: url(../images/work-bg.png) left no-repeat;
	z-index: 150;	
    position: relative;
	clear:both;
}

/* Single Slideshow
----------------------------------------------------------- */
#single-slideshow1, #single-slideshow2, #single-slideshow3, #single-slideshow4, #single-slideshow5, #single-slideshow6, #single-slideshow7, #single-slideshow8, #single-slideshow9, #single-slideshow10, #single-slideshow11, #single-slideshow12, #single-slideshow13, #single-slideshow14, #single-slideshow15, #single-slideshow16, #single-slideshow17, #single-slideshow18, #single-slideshow19, #single-slideshow20, #single-slideshow21, #single-slideshow22, #single-slideshow23, #single-slideshow24, #single-slideshow25, #single-slideshow26, #single-slideshow27, #single-slideshow28, #single-slideshow29, #single-slideshow30, #single-slideshow31, #single-slideshow32{
	top:33px;
	left:23px;
	float: left;
	position: relative;
	width:420px;
	height: 245px;
	margin: 0 70px 0  0;
	border: 1px solid #959595;
	overflow: hidden;

}
.single-control{
	position: absolute;
	border: solid blue 0px;
	display:inline-block;
	top:285px;
	left: 195px;
	width:250px;
	height:20px;
	z-index:400;
}
.single-control a#prev1,.single-control a#prev2, .single-control a#prev3,.single-control a#prev4, .single-control a#prev5,.single-control a#prev6, .single-control a#prev7, .single-control a#prev8, .single-control a#prev9, .single-control a#prev10, .single-control a#prev11,.single-control a#prev12, .single-control a#prev13, .single-control a#prev14, .single-control a#prev15, .single-control a#prev16, .single-control a#prev17, .single-control a#prev18, .single-control a#prev19, .single-control a#prev20, .single-control a#prev21,.single-control a#prev22, .single-control a#prev23, .single-control a#prev24, .single-control a#prev25, .single-control a#prev26, .single-control a#prev27,.single-control a#prev28, .single-control a#prev29, .single-control a#prev30, .single-control a#prev31, .single-control a#prev32{
	margin-top: 2px;
	margin-right: 6px;
	width: 13px;
	height: 19px;
	background:url(../images/prev.png) no-repeat;
	text-indent: -2000em;
	float: right;
}
.single-control a#prev1:hover, .single-control a#prev2:hover, .single-control a#prev3:hover, .single-control a#prev4:hover, .single-control a#prev5:hover, .single-control a#prev6:hover, .single-control a#prev7:hover, .single-control a#prev8:hover, .single-control a#prev9:hover, .single-control a#prev10:hover, .single-control a#prev11:hover, .single-control a#prev12:hover, .single-control a#prev13:hover, .single-control a#prev14:hover, .single-control a#prev15:hover, .single-control a#prev16:hover, .single-control a#prev17:hover, .single-control a#prev18:hover, .single-control a#prev19:hover, .single-control a#prev20:hover, .single-control a#prev21:hover, .single-control a#prev22:hover, .single-control a#prev23:hover, .single-control a#prev24:hover, .single-control a#prev25:hover, .single-control a#prev26:hover, .single-control a#prev27:hover, .single-control a#prev28:hover, .single-control a#prev29:hover, .single-control a#prev30:hover, .single-control a#prev31:hover, .single-control a#prev32:hover{
	background:url(../images/prev-hover.png) no-repeat;
}
.single-control a#next1, .single-control a#next2, .single-control a#next3, .single-control a#next4, .single-control a#next5, .single-control a#next6, .single-control a#next7, .single-control a#next8, .single-control a#next9, .single-control a#next10, .single-control a#next11, .single-control a#next12, .single-control a#next13, .single-control a#next14,.single-control a#next15, .single-control a#next16,.single-control a#next17, .single-control a#next18,.single-control a#next19, .single-control a#next20, .single-control a#next21, .single-control a#next22,.single-control a#next23, .single-control a#next24, .single-control a#next25, .single-control a#next26, .single-control a#next27, .single-control a#next28, .single-control a#next29, .single-control a#next30, .single-control a#next31, .single-control a#next32{
	margin-top: 2px;
	margin-left: 6px;
	width: 13px;
	height: 19px;
	background:url(../images/next.png) no-repeat;
	text-indent: -2000em;
	float: right;
}
.single-control a#next1:hover,.single-control a#next2:hover, .single-control a#next3:hover,.single-control a#next4:hover, .single-control a#next5:hover,.single-control a#next6:hover, .single-control a#next7:hover,.single-control a#next8:hover, .single-control a#next9:hover,.single-control a#next10:hover, .single-control a#next11:hover,.single-control a#next12:hover, .single-control a#next13:hover,.single-control a#next14:hover, .single-control a#next15:hover,.single-control a#next16:hover, .single-control a#next17:hover,.single-control a#next18:hover, .single-control a#next19:hover,.single-control a#next20:hover, .single-control a#next21:hover,.single-control a#next22:hover, .single-control a#next23:hover,.single-control a#next24:hover, .single-control a#next25:hover,.single-control a#next26:hover, .single-control a#next27:hover,.single-control a#next28:hover, .single-control a#next29:hover,.single-control a#next30:hover, .single-control a#next31:hover,.single-control a#next32:hover{
	background:url(../images/next-hover.png) no-repeat;
}

#work-nav1, #work-nav2, #work-nav3,#work-nav4, #work-nav5,#work-nav6, #work-nav7, #work-nav8,#work-nav9, #work-nav10, #work-nav11, #work-nav12,#work-nav13, #work-nav14,#work-nav15, #work-nav16,#work-nav17, #work-nav18,#work-nav19, #work-nav20,#work-nav21, #work-nav22,#work-nav23, #work-nav24,#work-nav25, #work-nav26,#work-nav27, #work-nav28,#work-nav29, #work-nav30,#work-nav31, #work-nav32{
	float: right;
}
#work-nav1 a, #work-nav2 a, #work-nav3 a, #work-nav4 a, #work-nav5 a, #work-nav6 a, #work-nav7 a, #work-nav8 a ,#work-nav9 a, #work-nav10 a, #work-nav11 a, #work-nav12 a, #work-nav13 a, #work-nav14 a,#work-nav15 a, #work-nav16 a, #work-nav17 a, #work-nav18 a, #work-nav19 a, #work-nav20 a, #work-nav21 a, #work-nav22 a, #work-nav23 a, #work-nav24 a ,#work-nav25 a, #work-nav26 a, #work-nav27 a, #work-nav28 a, #work-nav29 a, #work-nav30 a,#work-nav31 a, #work-nav32 a{
	height: 19px; 
	display: inline-block;
	text-decoration: none;
	margin: 0 5px; 
	float: left;
	padding: 3px 3px 0 3px;
	font:bold 12px Tahoma, Geneva, Verdana, sans-serif;
	color: #959595;
}
#work-nav1 a:hover,#work-nav2 a:hover, #work-nav3 a:hover,#work-nav4 a:hover, #work-nav5 a:hover,#work-nav6 a:hover,#work-nav7 a:hover,#work-nav8 a:hover, #work-nav9 a:hover,#work-nav10 a:hover, #work-nav11 a:hover,#work-nav12 a:hover, #work-nav13 a:hover,#work-nav14 a:hover, #work-nav15 a:hover,#work-nav16 a:hover, #work-nav17 a:hover,#work-nav18 a:hover, #work-nav19 a:hover,#work-nav20 a:hover, #work-nav21 a:hover,#work-nav22 a:hover,#work-nav23 a:hover,#work-nav24 a:hover, #work-nav25 a:hover,#work-nav26 a:hover, #work-nav27 a:hover,#work-nav28 a:hover, #work-nav29 a:hover,#work-nav30 a:hover, #work-nav31 a:hover,#work-nav32 a:hover {
	color: #666666;
}
#work-nav1 a.activeSlide, #work-nav2 a.activeSlide, #work-nav3 a.activeSlide,#work-nav4 a.activeSlide, #work-nav5 a.activeSlide,#work-nav6 a.activeSlide, #work-nav7 a.activeSlide,#work-nav8 a.activeSlide, #work-nav9 a.activeSlide,#work-nav10 a.activeSlide, #work-nav11 a.activeSlide, #work-nav12 a.activeSlide, #work-nav13 a.activeSlide,#work-nav14 a.activeSlide, #work-nav15 a.activeSlide,#work-nav16 a.activeSlide, #work-nav17 a.activeSlide,#work-nav18 a.activeSlide, #work-nav19 a.activeSlide,#work-nav20 a.activeSlide, #work-nav21 a.activeSlide,#work-nav22 a.activeSlide, #work-nav23 a.activeSlide,#work-nav24 a.activeSlide, #work-nav25 a.activeSlide,#work-nav26 a.activeSlide, #work-nav27 a.activeSlide,#work-nav28 a.activeSlide, #work-nav29 a.activeSlide,#work-nav30 a.activeSlide, #work-nav31 a.activeSlide,#work-nav32 a.activeSlide{
	color: #ec1863; 
}
#work-nav1 a:focus, #work-nav2 a:focus, #work-nav3 a:focus,#work-nav4 a:focus, #work-nav5 a:focus,#work-nav6 a:focus, #work-nav7 a:focus,#work-nav8 a:focus, #work-nav9 a:focus,#work-nav10 a:focus, #work-nav11 a:focus,#work-nav12 a:focus, #work-nav13 a:focus,#work-nav14 a:focus, #work-nav15 a:focus,#work-nav16 a:focus, #work-nav17 a:focus,#work-nav18 a:focus, #work-nav19 a:focus,#work-nav20 a:focus, #work-nav21 a:focus,#work-nav22 a:focus, #work-nav23 a:focus,#work-nav24 a:focus, #work-nav25 a:focus,#work-nav26 a:focus, #work-nav27 a:focus,#work-nav28 a:focus, #work-nav29 a:focus,#work-nav30 a:focus, #work-nav31 a:focus,#work-nav32 a:focus { 
	outline: none; 
}
.single-description{
	border: solid 0px blue;
	width:318px;
	float: right;
}


h2.work-title{
	text-indent: 15px; 
	color: #1989ca;
	font-size: 1.25em;
	font-weight: bold;
	font-family: 'Georgia', Times, Times New Roman, serif;
	display: inline-block;
	width:324px;
	height: 40px;
	padding: 8px 0 0 0;
	background: url(../images/work-title-bg.png) no-repeat;	
}
h4.work-scope{
	width:300px;
	display: inline-block; 
	color: #1989ca;
	font-size: .75em;
}
span.back-to-top a{
	padding:  0 15px 0 0;
	float: right;
	color: #959595;
	font-size: .6em;
	font-weight: bold;
	text-decoration: none;	
}
span.back-to-top a:hover{
	color: #3e2105;
	background: url(../images/up-arrow.png)  top right no-repeat;
}
p.work-summary{
	margin:10px 0 20px 0; 
	float: left;
	width: 305px;
	font-size: .825em;
}
p.work-summary strong a{
	font-size: .8em;
	color: #1989ca;
	padding-left: 20px;
	background:url(../images/bullet.png) no-repeat top left;
	text-decoration: none;
}
p.work-summary strong a:hover{
	color: #0269a5;
	background:url(../images/bullet.png) no-repeat bottom left;
}


/* PORTFOLIO PAGE ENDS HERE
--------------------------------------------------------------------------------------------------------------------------------------------- */