﻿/* ------------------------------------------------------------------------------- */
/* Template Specific Styles... Styles used in the template.htm file for this theme */
/* ------------------------------------------------------------------------------- */

#TemplateBody {
    margin:0px;
    text-align:center;
    background:url(wood_back.png);
    background-repeat:repeat;
}

#MainContainer{
    margin:0 auto;
    margin-top:-10px;
    height:100%;
    width:1060px;
    background:url(main_back.png);
    background-repeat:repeat-y;
}

#TopContainer{
    margin:0 auto;
    width:1060px;
    height:150px;
    padding-top:10px;
    background:url(top_back.png);
    background-repeat:no-repeat;
}

#SiteTitle {
    color:#eac68c;
    font-family:"Century Gothic", sans-serif;
    font-size:xx-large;
    font-weight:bold;
    margin:0 auto;
    width:1060px;
    text-align:left;
    padding-left:35px;
    margin-top:20px;
    padding-bottom:8px;
    margin-left:30px;
    text-shadow: 3px 3px 5px black; /* Shadow for Safari/FF/Chrome */
    filter: Shadow(Color=black,Direction=135,Strength=5); /* Shadow for all IE versions */
}

#SiteSubTitle {
    color:#eac68c;
    font-family:"Century Gothic", sans-serif;
    font-size:medium;
    margin:0 auto;
    width:1060px;
    text-align:left;
    padding-left:35px;
    margin-bottom:20px;
    margin-left:30px;
}

#FooterContainer{
    margin:0 auto;
    height:150px;
    width:1060px;
    background:url(bottom_back.png);
    background-repeat:no-repeat;
}

/* ------------------------------------------------------------------------------- */
/* Main Theme Layout...      Encomposes the entire output of the gallery           */
/* ------------------------------------------------------------------------------- */

#GalleryContainer {
    width:100%;
    text-align:center;
    margin-left:5px;
}

#MainDisplayLeft {
    display:table-cell;
    vertical-align:top;
    width:704px;
}

#MainDisplayRight {
    width:265px;
    display:table-cell;
    vertical-align:top;
    padding-left:5px;
    padding-right:20px;
}

#SideBarContainer {  
    height:100%;
    font-family:"Century Gothic", sans-serif;
    font-weight:normal;
    font-size:small;
    padding-left:0px;
    padding-top:0px;
    width:250px;
    margin-bottom:20px;
    margin-left:23px;
    color:#e9bf7c;
}

#SideBarHeader {
    width:280px;
    height:50px;
    text-align:center;
    margin-bottom:5px;
    margin-left:-10px;
    font-family:"Century Gothic", sans-serif;
    font-size:small;
    font-weight:bold;
    padding-top:16px;
    background:url(images/sibebar_title.png);
    background-repeat:no-repeat;
    color:#e9bf7c;
}

#CommentList {
    list-style:none;
    margin:0px;
    padding:0px;
}

#CommentList li {
    cursor:hand;
    background:url(images/comment.png);
    background-repeat:no-repeat;
    padding:2px 2px 2px 20px;
    font-size:smaller;
}

#CommentList li:hover {
    background-color:#e9bf7c;
    color:#672a15;
}

#AlbumInfoTitle {
    font-weight:bold;
    font-size:larger;
    
}

#AlbumInfoDescription {
    
}

#RandomImage{
    padding:5px;
    background-color:#f7f1cd;
    border:3px inset #450b02;
}

/* ------------------------------------------------------------------------------- */
/* Top Navigation Bar Styles... These styles relate to the top category nav bar    */
/*      TopNavContainer - Main container around the entire top nav bar             */
/*      TopNavItem - An item in the top nav bar (clickable)                        */
/*      TopNavItem:Hover - Hover state for above item                              */
/*      TopNavSep - Seperator between the nav items                                */
/* ------------------------------------------------------------------------------- */


#TopNavContainer {
    width:100%;
    height:55px;
    border:0px;
    padding:0px;
    padding-left:15px;
    background:url(images/header_back.png);
    background-repeat:no-repeat;
}

#TopNavItem {
    float:left;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    padding:16px;
    padding-left:2px;
    padding-right:2px;
    color:#91522e;
}

#TopNavItem:Hover {
    color:#831b0c;
}

#TopNavItemImageContainer {
    padding-right:10px;
}

#TopNavItemImage {
    float:left;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    padding-right:10px;
    color:#91522e;
}

#TopNavItemImage:Hover {
    color:yellow;
}

#TopNavItemCurrent {
    float:left;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    padding-top:16px;
    color:#91522e;
}

#TopNavSep {
    float:left;
    width:16px;
    height:55px;
    font-size:0;
    color:#565656;
    margin:0px 2px 0px 2px;
    background: url(images/topnav_sep.png) no-repeat;
}

/* ------------------------------------------------------------------------------- */
/* Category Styles... These styles relate to the categories or "albums"            */
/*      CategoryContainer - Container wrapped around entire catgory block          */
/*      CategoryContainer:Hover - Hover state of above item                        */
/*      CategoryThumb - Style of thumbnail preview for category                    */
/*      CategoryThumb img - Style of img element inside the thumb div              */
/*      CategoryTitle - Style for the category title below preview                 */
/*      CategoryCount - Style for text showing the counts of images and subs       */
/* ------------------------------------------------------------------------------- */

#CategoryMainContainer {
    width:103%;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    padding-top:20px;
    display:table;
}

#CategoryContainer {
    float:left;   
    margin:5px; 
    border:1px solid transparent;
    width:220px;
    height:170px;
    background:url(images/photostack.png);
    background-repeat:no-repeat;
    text-align:center;
}

#CategoryContainer:Hover {
    float:left;   
    cursor:hand;
    background-color:#be9760;
    border:1px solid #90512e;
}

#CategoryThumb {
    width:100%;
    text-align:center;
    margin-top:35px;
    margin-left:-1px;
}

#CategoryThumb img {
    width:149px;
    height:80px;    
}

#CategoryTitle {
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:9pt;
    color:#edcc96;
    width:100%;
    text-align:center;
    margin-top:8px;
    text-shadow: 2px 2px 2px black; /* Shadow for Safari/FF/Chrome */
    filter: Shadow(Color=black,Direction=135,Strength=2); /* Shadow for all IE versions */
}

#CategoryCount {
    font-family:"Century Gothic", sans-serif;
    font-weight:normal;
    font-size:8pt;
    color:#622610;
    width:100%;
    text-align:center;
    margin-top:11px;
}

/* ------------------------------------------------------------------------------- */
/* Image Styles... These styles relate to the thumbnails for the images            */
/*      ImageContainer - Container wrapped around entire thumbnail block           */
/*      ImageContainer:Hover - Hover state of above item                           */
/*      ImageThumb - Style of thumbnail preview for the image                      */
/*      ImageThumb img - Style of img element inside the thumbmnail div            */
/*      ImageTitle - Style for the image title below thumbnail                     */
/* ------------------------------------------------------------------------------- */

#ImageContainer {
    float:left;   
    margin:5px; 
    border:1px solid transparent;
    text-align:center;
    width:220px;
    height:155px;
    padding-top:20px;
    background:url(images/photo.png);
    background-repeat:no-repeat;
}

#ImageContainer:Hover {
    float:left;   
    cursor:hand;
    background-color:#be9760;
    border:1px solid #90512e;
}

#ImageThumb {
    float:left;
    margin: 4px 0 0 10px;
}

#ImageThumb img {
    display: block;
    position: relative;
}

#ImageTitle {
    padding-top:130px;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:8pt;
    color:black;
    width:100%;
    text-align:center;   
}

/* ------------------------------------------------------------------------------- */
/* Bottom Navigation Bar Styles... These styles relate to the bottom nav bar       */
/*      BottomNavContainer - Main container around the entire bottom nav bar       */
/*      BottomNavPagingContainer - Container wrapped around paging elements        */
/*      BottomNavItem - Clickable item in paging area                              */
/*      BottomNavItem:Hover - Hover state of above item                            */
/*      BottomNavText - Plain written text in bottom nav bar                       */
/* ------------------------------------------------------------------------------- */

#BottomNavContainer {
    float:left;
    width:100%;
    height:55px;
    border:0px;
    padding:0px;
    padding-left:15px;
    background:url(images/footer_back.png);
    background-repeat:no-repeat;
}

#BottomNavPagingContainer {
    float:right;
    padding-right:25px;
}

#BottomNavItem {
    float:left;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    padding:16px;
    padding-left:2px;
    padding-right:2px;
    color:#91522e;
}

#BottomNavItem a:visited, #BottomNavItem a:link {
    text-decoration:none;
    color:#91522e;
}

#BottomNavItem:Hover, #BottomNavItem a:hover {
    color:#831b0c;
    text-decoration:none;
}

#BottomNavText {
    float:left;
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    padding:16px;
    padding-left:2px;
    padding-right:2px;
    color:#91522e;
}

/* ------------------------------------------------------------------------------- */
/* Photo Styles... These styles relate to the main photo view of an image          */
/*      ImageContainer - Container wrapped around entire photo block               */
/*      ImageContainer:Hover - Hover state of above item                           */
/*      ImageThumb - Style of thumbnail preview for the image                      */
/*      ImageThumb img - Style of img element inside the thumbmnail div            */
/*      ImageTitle - Style for the image title below thumbnail                     */
/* ------------------------------------------------------------------------------- */

#PhotoContainer {
    width:100%;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    padding-top:20px;
    display:table;
}

#PrevButton {
    width:100px;
    border:1px solid #CCCCCC;
    background-color:#EEEEEE;
    padding:3px;
    font-weight:bold;
    font-family:"Century Gothic", sans-serif;
    font-size:medium;
    text-align:center;
    margin-right:10px;
}

#SlideShowButton {
    width:200px;
    border:1px solid #CCCCCC;
    background-color:#EEEEEE;
    padding:3px;
    font-weight:bold;
    font-family:"Century Gothic", sans-serif;
    font-size:medium;
    text-align:center;
    margin-right:10px;
}


#NextButton {
    width:100px;
    border:1px solid #CCCCCC;
    background-color:#EEEEEE;
    padding:3px;
    font-weight:bold;
    font-family:"Century Gothic", sans-serif;
    font-size:medium;
    text-align:center;
}

#PhotoPicture {
    display:inline;
}

#PhotoPicture img {
    border: 1px solid #9a5e3b;
    padding:5px;
    background-color:#faf0bf;
    margin-top:10px;
}

#PhotoTitle {
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:large;
    color:black;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
}

#PhotoDetailsLeft {
    float:left;
    width:80px;
    font-weight:bold;
    color:#e9bf7c;
    text-align:right;
    margin-bottom:10px;
}

#PhotoDetailsRight,#PhotoDetailsRightTitle,#PhotoDetailsRightDate,#PhotoDetailsRightDescription,#PhotoDetailsRightTags,#PhotoDetailsRightRating,#PhotoDetailsRightCopyright,#PhotoDetailsRightCredit,#PhotoDetailsRightViews {
    margin-left:95px;
    font-weight:normal;
    text-align:left;
    margin-bottom:10px;
}

#RatingEmpty {
    background:url(images/star_empty.png);
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    float:left;
}

#RatingFull {
    background:url(images/star_full.png);
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    float:left;
}

#RatingHalf {
    background:url(images/star_half.png);
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    float:left;
}

#ThumbPanel {
    white-space: nowrap;
    height:150px;
    width:640px;
    display:block;
    overflow-x:scroll;
}

#ThumbPanel img {
    padding:7px;
}

#CommentsContainer {
    float:left;
    width:98%;
    padding:5px;
    border:0px;
}

#CommentImageThumb {
    display:inline;
}

#CommentImageThumb img {
    width:100px;
    height:auto;
    border:1px solid gray;
}

#CommentsTitle {
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:14px;
    color:#672a15;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
    padding-bottom:5px;
    border-bottom:1px solid #672a15;
}

#CommentBlock1 {
    background-color:#f9f1c2;
    margin-bottom:5px;
    padding:10px;
    overflow:auto;
}

#CommentBlock2 {
    background-color:#f7edb6;
    margin-bottom:5px;
    padding:10px;
    overflow:auto;
}

#CommentBoxLeft {
    float:left;
}

#CommentBoxRight {
    margin-left:110px;
}


#CommentDetails {
    font-family:"Century Gothic", sans-serif;
    font-weight:bold;
    font-size:12px;
    margin-bottom:3px;
    color:#672a15;
}

#CommentBody {
    font-family:"Century Gothic", sans-serif;
    font-weight:normal;
    font-size:12px;
    color:#672a15;
}

#AddCommentsContainer{
    font-family:"Century Gothic", sans-serif;
    font-size:9pt;
    font-weight:normal;
    background-color:#f9f1c2;
    border:1px solid #d3c195;
    padding:10px;
    width:96%;
    color:#672a15;
}

#CommentStatusBox{
    font-family:"Century Gothic", sans-serif;
    font-size:9pt;
    font-weight:normal;
    color:#048904;
    background-color:#c0ffc0;
    border:1px solid #dedede;
    padding:10px;
    margin-bottom:10px;
    width:96%;
}

.TagCloudLink{
    text-decoration:none;
    color:#e9bf7c;

}

.TagCloudLink:hover{
    text-decoration:none;
    background-color:#e9bf7c;
    color:#672a15;
}

#LinkList {
    list-style:none;
    margin:0px;
    padding:0px;
}

#LinkList li{
    cursor:hand;
    padding:6px 2px 2px 33px;
    height:24px;
    font-weight:bold;
}

#LinkList li a:visited, #LinkList li a:link  {
    color:#e9bf7c;
    text-decoration:none;
}

#LinkList li:hover,#LinkList li a:hover {
    background-color:#e9bf7c;
    color:#642b16;
    text-decoration:none;
}

/* ------------------------------------------------------------------------------- */
/* Button Styles... These styles relate to the main photo view of an image         */
/*      ImageContainer - Container wrapped around entire photo block               */
/*      ImageContainer:Hover - Hover state of above item                           */
/*      ImageThumb - Style of thumbnail preview for the image                      */
/*      ImageThumb img - Style of img element inside the thumbmnail div            */
/*      ImageTitle - Style for the image title below thumbnail                     */
/* ------------------------------------------------------------------------------- */

#ButtonRow {
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display:table;
    padding-bottom:10px;
}

#ButtonLeft {
	float: left;
	text-align:left;
	width: 80px;
}

#ButtonRight {
	float: right;
	text-align:right;
	width: 80px;
}

#ButtonMid { 
	float: left;
	text-align:center;
    margin:0 auto;
	width: 77%;
}

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* REGULAR */

button.regular, .buttons a.regular{
    color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* ------------------------------------------------------------------------------- */
/* REQUIRED STYLES... DO NOT CHANGE OR DELETE THESE STYLES                         */
/* ------------------------------------------------------------------------------- */

.TextBox2 {
    display:none;
}

