/* 
    Document   : albums
    Created on : Apr 20, 2013, 4:48:31 PM
    Author     : kang20
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

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, strong, sub, sup, tt, var, b, u, i, center, 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-size: 100%; vertical-align: baseline; 
}

html {
    padding: 0;
    margin:0px;
}
body{background: url(../../img/furley_bg.png);}
ol, ul {  list-style: none; }

a{	text-decoration:none;}

/* wrapper for component */
#componentWrapper{
    position:absolute;
    width:100%;
    height:99%;
    left:0px;
    top:30px;
}

#componentWrapper .thumbContainer{
    position:absolute;
    overflow:hidden;
}

#componentWrapper .thumbInnerContainer{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

#componentWrapper .thumb_hidden{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

#componentWrapper .thumbHolder{
    position:absolute;
    width:240px;
    height:200px;
    background:#fff;

    -moz-box-shadow: 2px 2px 2px #ccc;
    -webkit-box-shadow: 2px 2px 2px #ccc;
    box-shadow: 2px 2px 2px #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc');

    border-left:1px solid #eee;
    overflow:hidden;
}

#componentWrapper .thumbHolder a img{
    display:block;
    width:240px;
    height:155px;
}

#componentWrapper .thumbBackward{
    position:absolute;
    width:112px;
    height:40px;
    left:50%;
    margin-left:-56px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    display:none;
}

#componentWrapper .thumbBackward img{
    position:absolute;
    display:block;
    width:31px;
    height:21px;
    top:50%;
    left:50%;
    margin-left:-15px;
    margin-top:-10px;
}

#componentWrapper .thumbForward{
    position:absolute;
    width:112px;
    height:40px;
    left:50%;
    margin-left:-56px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    display:none;
}

#componentWrapper .thumbForward img{
    position:absolute;
    display:block;
    width:31px;
    height:21px;
    top:50%;
    left:50%;
    margin-left:-15px;
    margin-top:-10px;
}

/* title */
#componentWrapper .title{
    position:absolute;
    left:9px;
    top:160px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#666;
    font-weight: bold;
}

#componentWrapper .info{
    position:absolute;
    left:10px;
    bottom:5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#999;
}		  			  

/* public functions */	
#publicFunctions{
    position: absolute;
    padding: 10px 25px 20px 20px;
    background:#444;
    left:200px;
    top:100px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color:#fff;
    list-style:circle;

    -moz-box-shadow: 2px 2px 5px #222;
    -webkit-box-shadow: 2px 2px 5px #222;
    box-shadow: 2px 2px 5px #222;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222');

    display:none;
}

#publicFunctions li a{
    font-family: Arial, sans-serif;
    font-size: 16px;
    color:#fff;
}

#publicFunctions li a:hover, #publicFunctions li .current{
    text-decoration: underline;
}
.thumbContainer{cursor:move;}
.taheader {
    font-family: Calibri, "Arial", "Trebuchet MS", Helvetica, sans-serif;
    text-decoration: none;
    font-size: 18px;
    color: #fff; 
    padding: 6px 6px 9px;
    opacity: 0.9; 
	background: #66ccff;
background: -moz-linear-gradient(top,#66ccff 1%,#4dc4ff 60%,#33bbff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#66ccff), color-stop(60%,#4dc4ff), color-stop(100%,#33bbff));
background: -webkit-linear-gradient(top, #66ccff 1%,#4dc4ff 60%,#33bbff 100%);
background: -o-linear-gradient(top, #66ccff 1%,#4dc4ff 60%,#33bbff 100%);
background: -ms-linear-gradient(top,#66ccff 1%,#4dc4ff 60%,#33bbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ccff', endColorstr='#33bbff',GradientType=0 );
background: linear-gradient(top, #66ccff 1%,#4dc4ff 60%,#33bbff 100%);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 
	position: relative;
	height: 50px;
}
.taheader:hover {
    opacity: 0.9;
}
.taheader a.back-link{text-decoration: none;                      
    line-height: 18px;
    padding: 0 4px;color: #fff;
    background: left url(../../img/return-back-link.png) no-repeat;padding-left: 22px;}
.taheader a.back-link:hover{text-decoration: underline;color:#fff;}

.taheader a {
    text-decoration: none;
    line-height: 18px;
    padding: 0 4px;
    color: #fff;
}
.taheader a:hover {
    text-decoration: underline;
}
.taheader a span {
    font-weight: bold;font-size: 12px;color: #fff;
}
.taheader span.right_ab {
    float: right;
	color:#fff;
}
.thumbHolder p.img .hover{background: transparent url('../../img/zoom.png') no-repeat center center;background: rgba(0,0,0,0.6) url('../../img/zoom.png') no-repeat center center;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;display: none;cursor: pointer;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.thumbHolder a.pp_content {
position: absolute;
margin-bottom: 15px;
height: 155px;
}