img {
    border : 0px;
}

.displayNone {
    display : none;
}

.popup {
    display  : none;
    position : absolute;
}


.floatLeft {
    float : left;
}

.floatRight {
    float : right;
}

.clearBoth {
    clear : both;
}


h1 {
    text-align  : left;
    font-size   : 18px;
    font-weight : bold;
    color       : #335;
    padding     : 10px 0px 0px 0px;
}

h2 {
    text-align  : left;
    font-size   : 16px;
    font-weight : bold;
    color       : #339;
    padding     : 0px;
    margin      : 0px;
}


.main {
    width       : 760px;
    margin      : 5px auto 40px auto;
    font-family : sans-serif;
}

.content {
    width       : 720px;
    margin-left : 20px;
}

.header {
    position          : relative;
    top               : 15px;
    height            : 80px;
    background-image  : url("../images/website/bgHeader.jpg");
    background-repeat : repeat-x;
    clear : both;
}

.headerTitle {
    position         : relative;
    top              : -15px;
    height           : 80px;
    float            : left;
    padding-left     : 15px;
    filter           : alpha(opacity=100);
    background-image : none;
    background-color : transparent;
}

.headerTitle img {
    border  : 0px none;
    padding : 0px 15px 0px 0px;
}

.headerNavigation {
    font-size       : 12px;
    text-decoration : none;
    color           : #fff;
    margin          : 25px 15px 0px 0px;
}

.headerNavigation a:link {
    font-size       : 12px;
    text-decoration : none;
    color           : #fff;
}

.headerNavigation a:visited {
    font-size       : 12px;
    text-decoration : none;
    color           : #fff;
}

.headerNavigation a:hover {
    text-decoration : underline;
    color           : #ff9;
}

.headerFollow {
    text-align  : right;
    font-size   : 12px;
    color       : #777;
    position    : relative;
    margin      : 12px 15px 0px 0px;
}

.latestNews {
    position            : relative;
    width               : 14px;
    height              : 14px;
    color               : #fff;
    font-size           : 8px;
    background-image    : url('../images/website/badge.png');
    background-position : center;
    background-repeat   : no-repeat;
    text-align          : center;
    padding-top         : 4px;
}

a:link.joinTwop {
    font-size       : 12px;
    color           : #777;
    margin-right    : 15px;    
    text-decoration : none;
}

a:hover.joinTwop {
    font-size       : 12px;
    color           : #333;
    margin-right    : 15px;
    text-decoration : underline;
}

.headerFollow a:link {
    font-size       : 12px;
    text-decoration : none;
    color           : #777;
}

.headerFollow a:visited {
    font-size       : 12px;
    text-decoration : none;
    color           : #777;
}

.headerFollow a:hover {
    font-size       : 12px;
    text-decoration : underline;
    color           : #333;
}

.formRegister {
    margin-top    : 15px;
    padding-right : 20px;
    border-right  : solid 1px #ccc;
    font-weight   : bold;
}

.formLogin {
    margin : 15px 0px 0px 30px;
    font-weight   : bold;
}

.popupJoinTwopContent {
    padding : 5px 0px 5px 10px;
}

.popupJoinTwopText {
    margin-left : 125px;
    height      : 80px;
    line-height : 1.6em;
}

#register, #login {
    margin-right : 13px;
}

.footer {
    border-style  : double none none none;
    border-width  : 3px 0px 0px 0px;
    border-color  : #666;
    margin-bottom : 20px;
}

.quoteText {
    text-align  : left;
    font-size   : 11px;
    font-style  : italic;
    color       : #111;
    padding     : 10px 0px 3px 5px;
}

.quoteAuthor {
    float       : left;
    text-align  : left;
    font-size   : 11px;
    color       : #333;
    padding     : 3px 0px 3px 5px;
}

.quoteFrom {
    float       : left;
    text-align  : left;
    font-size   : 11px;
    color       : #333;
    padding     : 3px 0px 3px 0px;
}

.comicNavigationWrapper {
    margin : 10px 5px 5px 0px;
}

.comicNavigation {
    margin-top : 5px;    
}

.theVaultNavigation {
    font-size       : 16px;
}

.comicNewsDate {
    font-size  : 11px;
    font-style : italic;
    text-align : right;    
}

.comicNewsItem {
    font-size  : 13px;
    color : #444;
    text-align : right;
}

.comicNavigation a:link, .theVaultNavigation .clickAction {
    color           : #229;
    font-size       : 16px;
    text-decoration : none;
}

.comicNavigation a:visited {
    color           : #229;
    font-size       : 16px;
    text-decoration : none;
}

.comicNavigation a:hover, .theVaultNavigation .clickAction:hover {
    color           : #aa0;
    font-size       : 16px;
    text-decoration : underline;
}

.comicPanels {
    margin     : 0px 0px 20px 15px;
    text-align : center;
    display    : none;
}

.comicMultiPanel {
    width             : 328px;
    height            : 246px;
    background-image  : url("../images/website/bgComicMultiPanel.gif");
    background-repeat : no-repeat;
    float             : left;
    margin            : 8px 8px 8px 8px;
}

.comicMultiPanel img {
    width  : 320px;
    height : 240px;
    margin : 3px 0px 0px 3px;
}

.comicNote {
    float       : left;
    text-align  : left;
    font-size   : 12px;
    color       : #000;
    padding     : 3px 0px 15px 5px;
}

.notice {
    float         : left;
    font-size     : 11px;
    font-weight   : normal;
    color         : #000;
    margin-bottom : 10px;
}

.talkToPei {
    margin-left         : 25px;
    background-image    : url("../images/website/gotMail.jpg");
    background-position : center right;
    background-repeat   : no-repeat;
    font-size           : 13px;
    color               : #000;
    min-height          : 380px;
 
}

.popupJoinTwop {
    font-size : 13px;
}

.talkToPei dt, .popupJoinTwop dt {
    float       : left;
    text-align  : right;
    width       : 75px;
    padding     : 3px 10px 5px 0px;
    text-align  : left;
    font-size   : 12px;
    font-weight : bold;
    color       : #226;
    clear       : both;
}

.talkToPei dd, .popupJoinTwop dd {
    float   : left;
    margin  : 0px 10px 5px 0px;
    padding : 3px;
}

input {
    border  : solid 1px #999;    
}

input.error {
    border : solid 2px #b00;
}

.errorMessage {
    font-size : 10px;
    color     : #b00;
}

.talkToPei textarea {
    float   : left;
    border  : solid 1px #999;
    margin  : 0px 10px 0px 0px;
    padding : 5px;
    width   : 300px;
    height  : 250px;
}

.talkToPei .talkSubmit {
    clear   : both;
    float   : right;
    border  : solid 1px #666;
    margin  : 10px 350px 0px 0px;
    padding : 3px;
}

.meetPei {
    width               : 720px;
    height              : 536px;
    background-repeat   : no-repeat;
    background-position : center;
    background-image    : url('../images/website/meetPei.jpg');
}

.filler {
    width               : 328px;
    height              : 246px;
    float               : left;
    background-repeat   : no-repeat;
    background-position : bottom right;
}

.meetPei .filler {
    position : relative;
    left     : 325px;
    top      : 275px;
}

.popupTheVault {
    width    : 675px;
    height   : 375px;
}

#openTheVault {
    margin-right      : 13px;
    width             : 84px;
    height            : 21px;
    background-image  : url("../images/website/theVault.png");
    background-repeat : no-repeat;
}

#openTheVault:hover {
    width               : 84px;
    height              : 21px;
    background-image    : url("../images/website/theVault.png");
    background-repeat   : no-repeat;
    background-position : bottom;
}

.theVaultNavigation {
    margin-bottom : 10px;
}

.theVaultPreview {
    width   : 328px;
    height  : 276px;
    margin  : 0px;
    padding : 0px;
}

.theVaultPreviewFrame {
    width             : 328px;
    height            : 246px;
    background-image  : url("../images/website/bgComicMultiPanel.gif");
    background-repeat : no-repeat;
    overflow          : hidden;
}

.theVaultPreviewImage {
    width               : 323px;
    height              : 240px;
    margin              : 3px 0px 0px 3px;
    background-repeat   : no-repeat;
    background-position : center;
    vertical-align      : bottom;
}

.theVaultPreviewTitle {
    height           : 30px;
    color            : #000;
    font-size        : 13px;
    padding          : 8px 0px 0px 10px;
}

.theVaultList {
    width    : 280px;
    padding  : 0px 0px 0px 20px;
    margin   : 0px;
    overflow : hidden;
}

.theVaultList .buffer div {
    font-size     : 13px;
    margin-bottom : 5px;
    color         : #000;    
}

.buffer {
    display : none;
}

.clickAction {
    cursor : pointer;
}

.disabled, .disabled:hover, a:link.disabled, a:visited.disabled, a:hover.disabled {
    color           : #aaa;
    cursor          : default;
    text-decoration : none;
}

.newsList {
    width  : 184px;
    margin-bottom : 20px;
    padding-left : 15px;
    border-left : solid 1px #ccc;
}

.newsListItem {
    font-size  : 12px;
    margin-bottom : 10px;
}

.newsItem {
    width : 500px;
    margin : 0px 15px 20px 0px;
}

.newsTitle {
    width : auto;
    text-decoration : underline;
}

.newsDate {
    font-size  : 11px;
    font-style : italic;
}

.newsText {
    margin : 20px 0px 20px 0px;
    line-height : 1.5em;
}

.socialMedia .facebook {
    margin : 0px 0px 0px 5px;
}

#slides {
    z-index:100;
}

/* Next/prev buttons */

#slides .next,#slides .prev {
    position:absolute;
    top:292px;
    left:-3px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:500px;
}

/* Pagination */

.pagination {
    margin:10px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../images/website/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

.quotesColumn {
    width : 220px;
    margin : 0px 10px 20px 10px;
}

.quotesAuthor {
    font-weight : bold;
    margin-top: 20px;
}

.quotesText {
    font-style : italic;
    margin-top : 8px;
}

.quotesFrom {
    font-size : 10px;
    text-align : right;
}