/* TYPOGRAPHY
---------------------------------------- */

body
{
    font-size: .7em;
    font-family: Verdana, Helvetica, Sans-Serif;
}
h1,h2,h3,h4,h5,h6
{
    margin: 20px auto;
}
h1
{
    font-size: large;
}
h2
{
    font-size: medium;
}
h3
{
    font-size: small;
}
h4
{
    font-size: smaller;
}
h5
{
    font-size: x-small;
}
h6
{
    font-size: xx-small;
}

/* COLOR SCHEME AND OUTLOOK
---------------------------------------- */
body
{
    background-color: #000000;
    background-image: url(images/bkgnd.png);
    color: #59596c;
    text-align: center;
}
#page
{
    width: 920px;
    text-align: left;
    margin: 0 auto;
}
#header
{
    position: relative;
    margin-bottom: 5px;
    padding: 0;
    height: 180px;
}

#header h1, #header h1 a
{
    width: 385px;
    height: 200px;
}
#header h1
{
    background-image: url(images/logo.png);
    position: absolute;
    text-indent: -99999px;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}
#header h1 a
{
    display: block;
    cursor: pointer;
}

/* MAIN NAVIGATION
----------------------------------------------------------*/

#header .navigation
{
    position: absolute;
    top: 40px;
    right: 0px;
}
#header .navigation li
{
    display: block;
    text-align: center;
    float: left;
    cursor: pointer;
    width: 64px;
    height: auto;
    margin: 0 5px;
}

/* HIDE MENU TEXT */
#header .navigation li a span
{
    display: none;
}

#content
{
    overflow: auto;
}
#footer
{
    clear: both;
    text-align: center;
    border-top: solid 1px #222231;
    padding-top: 20px;
    margin: 20px 0;
}

.breadcrumb
{
    clear: both;
    font-size: small;
    display: block;
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.error
{
    color: Red;
}

/* CLOUD 
------------------------------- */
.cloud.w1
{
    font-size: large;
}
.cloud.w2
{
    font-size: medium;
}
.cloud.w3
{
    font-size: small;
}
.cloud.w4
{
    font-size: x-small;
}
.cloud.w5
{
    font-size: xx-small;
}





/* IMAGE IN GENERAL, OR IN A LINK */
img.thumbnail, a.thumbnail img
{
    background-color: Black;
    padding: 3px;
    width: 128px;
    height: auto;
    display: block;
}

em
{
    color: #eee;
}
ul
{
}
ol
{
}
li
{
    margin: 3px 0;
}
p
{
    margin: 15px 0;
}

a:link, a:visited
{
    color: White;
    text-decoration: none;
    outline: none;
}
a:hover
{
    color: #ff8000;
    text-decoration: underline;
}
a:active
{
    color: #59596c;
}

/* IMAGE IN A LINK */
a.thumbnail:link img, a.thumbnail:visited img
{
    background-color: White;
}
a.thumbnail:hover img
{
    background-color: #ff8000;
}

.pane
{
    margin-top: 20px;
    background-color: #222231;
    color: #666;
    overflow: auto;
}
.pane h2
{
    background-color: Black;
    padding: 10px 20px;
    margin: 2px;
    color: #ff8000;    
}
.pane h3
{
    margin: 0;
    padding: 0;
}
.pane .pane, .pane .pane .pane
{
    margin: 0;
}
.pane .item
{
    overflow: auto;
}
.pane .item, .pane .sort, .pane .pager, .pane .inner-pane
{
    margin: 20px;
    padding: 0;
}
.pane .pager
{
    clear: both;
}
.pane .pager span
{
    font-size: large;
}
.pane .item img.thumbnail, .pane .item a.thumbnail
{
    clear: left;
    float: left;
    margin: 0 20px 20px 0;
}
.pane .rssfeed, .pane .progress, .pane .facebook-like
{
    margin: 5px 20px;
}
.inner-pane fieldset
{
}

/* DATE 
----------------------------------------------------------*/
.date
{
    float: left;
    clear: left;
    width: 96px;
    text-align: center;
    background-color: Black;
    padding: 1px;
    margin-right: 20px;
}
.date .year, .date .month, .date .day
{
    display: block;    
    padding: 0;
}
.date .date-separator
{
    display: none;
}
.date .year
{
    background-color: #222231;
    padding: 5px 0;
}
.date .day
{
    color: White;
    font-size: xx-large;
}

/* LIVE SUPPORT
----------------------------------------------------------*/
#LiveSupport
{
    margin: 0 auto;
}


/* DEFAULT.ASPX SPECIFIC
------------------------------------------------- */
#introduction.pane, #random-showcase.pane, #newest-members.pane, #facebook-friends.pane, #facebook-albums.pane
{
    float: right;
    width: 300px;
    clear: right;
}
#latest-blogs.pane
{
    float: left;
    width: 600px;
    clear: left;
}

#newest-members.pane .member.item
{
    display: block;
    width: 28px;
    float: left;
    margin: 2px;
}
#newest-members.pane .inner-pane
{
    margin: 20px;
    overflow: auto;
}

/* ABOUT
---------------------------------------------------*/

#about.pane
{
    float: left;
    width: 400px;
    clear: left;
}
#contact-us.pane
{
    float: right;
    width: 500px;
    clear: right;
}

/* PORTFOLIO
---------------------------------------------------*/
#portfolio-list.pane .item
{
    width: 420px;
    float: left;
}

#portfolio-details .portfolio.item, #portfolio-details .photo-list
{
    text-align: center;
}
#portfolio-details .photo-list li
{
    display: none;
}
#portfolio-details.pane .item
{
    overflow: hidden;
}

/* PORTFOLIO NAVIGATION
----------------------------------------------------*/

.navigation.pane
{
    border-bottom: solid 1px Black;
    padding: 10px 0;
}
.navigation.pane li
{
    display: block;
    float: left;
    width: 280px;
    overflow: auto;
    margin: 0 0 5px 20px;
}
.navigation.pane a.thumbnail img
{
    width: 48px;
    height: auto;
    padding: 2px;
    float: left;
    margin-right: 20px;
}

/* GALLERY
----------------------------------------- */

/* only affect first child tab of gallery */
#gallery > .gallery_tab.ajax__tab_container
{
    margin: 0;
}
#gallery > .gallery_tab.ajax__tab_container > .ajax__tab_header
{
    background-color: #000;
}
#gallery > .gallery_tab.ajax__tab_container > .ajax__tab_body
{
    padding-top: 0;
}
#gallery > .gallery_tab.ajax__tab_container > .ajax__tab_active .ajax__tab_outer
{
    background-color: #222231;
}

#showcase-list.pane .item, #album-list.pane .item, #photo-list.pane .item
{
    width: 420px;
    float: left;
}
#photo-detail.pane .thumbnails
{
    margin: 20px;
    overflow: auto;
}
#photo-detail.pane .photo.item, #photo-detail.pane .rating-info .rating, #showcase.pane .rating-info .rating
{
    text-align: center;
}
#photo-detail.pane .rating-info .rating a, #showcase.pane .rating-info .rating a
{
    display: block;
    width: 128px;
    margin: 0 auto;
}
#photo-detail .thumbnails .thumbnail.item, .showcase.photos .photo.item 
{
    width: 56px;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#photo-detail .thumbnails .thumbnail.item a.thumbnail img, .showcase.photos .photo.item img.thumbnail
{
    width: 48px;
    height: auto;
    padding: 1px;
}
#photo-detail .photo.item img
{
    max-width: 840px;
    height: auto;
}
#photo-detail .collapsible-panel-control
{
    overflow: auto;
    margin-bottom: 20px;
}
#photo-detail .collapsible-panel-control img.image-button
{
    float: right;
    cursor: pointer;
}
#photo-detail .collapsible-panel
{
}
/* disable flicker */
#showcase.pane .photos, #album-slideshow.pane .photos
{
    display: none; 
}

.gallery-help ol
{
    list-style-type: decimal;
    list-style-position: inside;
}

/* BLOG
------------------------------------------ */

#blog-list.pane, #blog-details.pane
{
    width: 600px;
    float: left;
    overflow: auto;
}
#latest-blogs.pane .blog.item .blog-info, #blog-list.pane .blog.item .blog-info,
#latest-blogs.pane .blog.item .rating-info, #blog-list.pane .blog.item .rating-info,
#latest-blogs.pane .blog.item .info, #blog-list.pane .blog.item .info,
#blog-list.pane .blog.item .filter
{
    margin-left: 116px;
}
#blog-details.pane .author
{
    text-align: center;
    margin: 20px auto 0 auto;
    padding: 1px;
    float: left;
    clear: left;
    width: 96px;
    background-color: Black;
}
#blog-details.pane .author-name
{
    display: block;
    padding: 5px 0;
    background-color: #222231;
}
#blog-details.pane .author .avatar
{
    display: block;
    margin: 5px 0 0 0;
}
#blog-details.pane .blog-info
{
    margin-top: 20px;
    padding-top: 20px;
    margin-left: 116px;
    border-top: solid 1px black;
}
#blog-details.pane blockquote
{
    margin-left: 116px;
    min-height: 100px;
}
#blog-details.pane blockquote h3
{
    margin-bottom: 20px;
}
#blog-details.pane blockquote p.content
{
    margin: 0;
}
#blog-details.pane blockquote p
{
    margin: 20px 0;
    line-height: 1.2;
}
#blog-details.pane .rating-info, #blog-details.pane #facebook-plugin
{
    margin-left: 20px;
    margin-bottom: 20px;
    display: block;
}

#similar-by-tag .links, #similar-by-category .links
{
    padding: 10px;
}

#category-list.pane, #tag-list.pane, #similar-by-tag.pane, #similar-by-category.pane
{
    width: 300px;
    float: right;
    clear: right;
}
#category-list .categories, #tag-list .tags
{
    padding: 10px;
    overflow: hidden;
}


/* COMMENTS
-------------------------------------------- */

#comment-list.pane, #add-comment.pane
{
    padding: 20px;
}
.comment.item .body
{
    background-color: Black;
    margin-left: 116px;
    padding: 1px;
    overflow: auto;
    min-height: 108px;
}
.comment.item .body .person
{
    background-color: #222231;
    position: relative;
    padding: 5px 20px;
}
.comment.item .body .avatar
{
    float: left;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #222231;
    padding: 3px;
}
.comment.item .body .greeting .name
{
    margin-left: -85px;
}
.comment.item .body blockquote
{
    margin: 10px 10px 10px 100px;
    font-style: italic;
    color: #ccc;
}

.failureNotification
{
    color: Red;
}

/* LOGIN
---------------------------------------------- */
#login.pane
{
    width: 450px;
    float: left;    
}
#register.pane
{
    width: 450px;
    float: right;
}
#login.pane .accountInfo, #register.pane .accountInfo, #change-password.pane .accountInfo
{
}

/* AUTHORIZATION
---------------------------------------------- */
#authorization ol
{
    list-style-type: decimal;
    list-style-position: inside;
}

/* ACCOUNT 
----------------------------------------------- */
#account.pane
{
    margin-bottom: 20px;
    overflow: auto;
}
#account.pane .inner-pane
{
}
a.gravatar img
{
    width: 56px;
    height: auto;
}
#account .greeting .prefix, #account .greeting .suffix
{
    color: #ff8000;
}
#account .greeting .name
{
    font-style: italic;
    color: White;
}
#account .greeting
{
    display: block;
    overflow: auto;
}
#account .avatar
{
    float: left;
    margin-right: 20px;
    padding-bottom: 20px;
}

/* FACEBOOK
----------------------------------------------- */
a.FB_Link img.FB_profile_pic, #account a.gravatar img
{
    background-color: White;
    padding: 1px;
}
a.FB_Link:hover img.FB_profile_pic, #account a.gravatar:hover img
{
    background-color: #ff8000;
}