@charset "utf-8";
/************************************************** 
* Client: Tides Art Gallery
* URL: www.tidesartgallery.com
* Code by Marcus Thompson of Brightsquare Inc.
* Last updated: 26 May 2008
*************************************************
 COLORS

TIDES BLUE: #005aab;
TEXT COLOR: #FBFBFB;*/

@media screen and -webkit-min-device-pixel-ratio0  {
/*SAFARI TINKERING*/
ul#menuparent li a:hover {
color:#999
}
}


html {
font-size:100.1%
}

body {
background-color:#aaa;
color:#fbfbfb;
font-family:verdana,sans-serif;
font-size:12px;
line-height:1.4
}

#wrap {
background:#005aab url(../images/bg-wrap.gif) repeat-y;
margin:0 auto;
width:980px
}

/**GENERAL STYLES**/
a:link {
color:#fbfbfb;
text-decoration:none
}

a:hover {
color:#CCC
}

a:visited {
color:#eee
}

p,h1,h2,h3 {
margin-bottom:15px
}

h1 {
font-size:18px
}

h2 {
font-size:16px
}

h3 {
font-size:14px
}

img[align=left],img.alignleft {
float:left;
padding:0 10px 5px 0
}

img[align=right],img.alignright {
float:right;
padding:0 0 5px 10px
}

blockquote {
border-left:2px solid #fbfbfb;
margin-left:15px;
padding-left:10px
}

blockquote p {
color:#CCC
}

/**LANDING PAGE**/
#landing #wrap {
background:#005aab url(../images/bg-landing-page.gif) top right no-repeat
}

#landingimage {
background:url(../images/bg-landing-shadow.png) 0 bottom no-repeat !important;
background:url(../images/bg-landing-shadow.gif) 0 bottom no-repeat;
height:650px;
margin:0 auto;
padding-top:55px;
position:relative;
width:350px
}

#landingimage img {
bottom:27px;
left:27px;
position:absolute;
}

#landingimage #landingtext {
text-indent:-9999px
}

#landinglogo {
text-align:center;
width:980px
}

#landing #footer {
background:none
}

#landing a#viewgallery {
position:absolute;
width:200px;
top: 55px;
left: 110px;
font-weight:bold;
}




/**MASTHEAD**/
#masthead {
background:#005aab url(../images/bg-masthead.gif) top right no-repeat
}

/**MAIN**/
#main {
background:url(../images/bg-main.gif) top left no-repeat
}

/**MAIN -> MENU **/
#main #menu {
float:left;
width:178px;
position:relative;
overflow:hidden;
}

#menu a {
text-decoration:none;
text-transform:capitalize;
}


#menu ul#menuparent {
font-size:15px;
margin-top:15px;
padding:10px 10px;
width:148px;
position:relative
}

#menu ul#menuparent a:hover {
color:#999999;
}

ul#menuparent li {
line-height:30px
}


#menu ul#menuchild {
font-size:13px;
margin-left:3px
}

ul#menuparent li a span {
margin-left:12px
}

#menu ul#menuparent li.active {
background:#005AAB url(../images/bg-menu-item.gif) left 7px no-repeat;
padding-left:10px;
}

ul#menuparent li.active a,ul#menuparent li a:hover {
/*background:url(../images/bg-menu-link.gif) right 1px no-repeat;*/
color:#fbfbfb;
/*display:block;*/
z-index:10px;
}


ul#menuparent li.active a {
font-weight:700
}

ul#menuparent li.active a span,ul#menuparent li a:hover span {
cursor:pointer;
/*display:block;*/
}

ul#menuchild li {
background:none;
font-size:11px;
height:1%;
line-height:1.6;
margin-bottom:3px;
padding-left:18px
}

ul#menuchild li:last-child {
margin-bottom:0
}

ul#menuchild li.subactive {
background:url(../images/bg-submenu-item.gif) left 3px no-repeat
}

ul#menuparent li.active ul#menuchild li a {
background:none
}

ul#menuchild li.subactive a,ul#menuchild li a:hover {
color:#999
}

/**MAIN -> CONTENT **/
#main #content {
float:left;
width:624px;
overflow:hidden
}

/**MAIN -> CONTENT  -> LARGE IMAGE**/
#content #large-image {
background-color:#2D6AB4;
height:100%;
margin-bottom:15px;
margin-left:-1px;
position:relative;
text-align:center;
width:100%;
z-index:1
}

#content #text h1 {
margin-top:10px
}

#content #text #large-image {
background-color:#2D6AB4;
height:100%;
margin-bottom:15px;
margin-left:-20px;
margin-top:-49px;
position:relative;
text-align:center;
width:625px
}

#content div.no-instructions #large-caption {
display:none
}

#content #large-image:hover a {
color:#005aab
}

#content #large-image a {
color:#fff;
text-decoration:none
}

#content #large-image a:hover {
color:#005AAB
}

#content #large-caption {
background:transparent url(../images/bg-caption.png) repeat;
bottom:0 !important;
height:30px;
left:0;
line-height:30px;
overflow:hidden;
padding:0 18px;
position:absolute;
text-align:left;
width:589px;
z-index:100
}

#content #large-caption a {
position:relative;
z-index:200
}

/*#content #instructions {
bottom:0;
color:#fff !important;
line-height:30px;
position:absolute;
right:12px
}*/
#worktitle {
float:left
}

#instructions {
float:right
}

a#linkmaincaption,a#linkmaininstructions {
font-weight:700
}

#content #large-image a#linkmaincaption,#content #large-image a#linkmaininstructions,#content #large-image a#linkmaincaption:hover,#content #large-image a#linkmaininstructions:hover {
color:#fff
}

#content #large-image a#closecaption,#content #large-image a#closecaption:hover {
color:#fff;
display:none;
font-weight:700;
position:absolute;
right:18px;
top:0
}

dl#artworkdetails {
margin:0 auto;
width:440px
}

dl#artworkdetails dt {
border-bottom:1px solid #fbfbfb;
clear:both;
padding-right:10px;
width:60px
}

dl#artworkdetails dd {
border-bottom:1px solid #fbfbfb;
/*width:259px*/
}

dl#artworkdetails dd.col60 {
width:60px
}

dl#artworkdetails dd.col100 {
overflow:hidden;
width:100px
}

dl#artworkdetails dd.col150 {
overflow:hidden;
width:150px;
padding:inherit 0;
}

dl#artworkdetails dd.smaller {
font-size:11px
}

dl#artworkdetails dt,dl#artworkdetails dd {
float:left
}


dl#artworkrequest {
clear:left;
margin:0 auto;
width:430px
}

dl#artworkrequest dt {
float:left;
width:100px
}

dl#artworkrequest dd {
float:left
}

dl#artworkrequest .col150 {
width:150px
}

dl#artworkrequest .colfull {
width:430px
}

/**MAIN -> CONTENT  -> TEXT **/
#text {
padding:0 18px
}

#text a {
color:#CCC
}

#text a:hover {
color:#ddd
}

#text #searchresults a:link,#text #searchresults a:hover,#text #searchresults a:visited,#text #searchresults a:hover {
border-bottom:0
}

#text ul,#text ol {
list-style:square;
margin-bottom:15px;
margin-left:15px
}

#text dl,#text table {
margin-bottom:15px
}

/**MAIN -> SIDEBAR **/
#main #sidebar {
float:left;
width:178px;
}


#main #sidebar ul#artist-showcase.no-captions div.artist-caption {
display:none
}

#sidebar ul#artist-showcase li {
overflow:hidden;
position:relative;
width:134px;
}

ul#artist-showcase li:hover a {
color:#005aab
}

ul#artist-showcase div.artist-image {
position:relative;
width:134px;
z-index:1;
}

ul#artist-showcase div.artist-caption {
background:url(../images/bg-caption.png) top left repeat;
top:0;
font-weight:700;
left:0;
padding:4px 2px;
position:absolute;
width:130px;
z-index:10;
}

ul#artist-showcase div.artist-image:hover div.artist-caption,ul#artist-showcase div.artist-caption:hover {
background-color:#2D6AB4;
cursor:pointer;
opacity: 0.1;
filter: alpha(opacity=10);
}

ul#artist-showcase div.artist-caption a {
color:#fff;
display:block;
font-size:11px;
text-align:center;
text-decoration:none;
width:130px;
position:relative;
z-index:100;
}

ul#artist-showcase div.artist-caption.short a {
height:25px
}

ul#artist-showcase div.artist-caption.long a {
height:35px
}

ul#artist-showcase div.artist-caption a:hover,ul#artist-showcase div.artist-caption:hover a {
color:#fbfbfb
}

/**GALLERY**/
#gallery {
margin:25px auto 15px auto;
width:471px
}

div.artist {
float:left;
/*margin-bottom:15px;*/
margin-right:23px;
position:relative;
text-align:center;
width:134px;
height:185px;
}

div.caption {
/*background:url(../images/bg-caption.png) top left repeat;*/
/*bottom:0;*/
font-weight:700;
/*left:0;*/
padding:4px 2px;
/*position:absolute;*/
margin-top:-3px;
width:130px;
z-index:10
}

div.caption:hover {
background-color:#2D6AB4;
cursor:pointer
}

#text div.caption {
display:block;
width:130px
}

#text div.caption a {
display:block;
width:130px;
position:relative;
color:#fff;
font-size:11px;
text-decoration:none;
z-index:100
}

#text div.caption.short a {
height:25px
}

#text div.caption.long a {
height:35px
}

#text div.caption a:hover,#text div.caption:hover a {
color:#fbfbfb
}

/**FOOTER**/
#footer {
background:#005aab url(../images/bg-footer.gif) top left no-repeat;
line-height:60px
}

#footer ul {
text-align:center
}

#footer ul li {
display:inline;
padding:0 1px
}

#footer ul li.seperator {
font-size:11px
}

#footer ul li.active a {
color:#aaa;
font-weight:700
}