body {
    padding: 0;
    margin:0 0 auto 0;
    padding-bottom: 20px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}
div { padding:0; margin:0; }
.title-color {  }

.no-decorate { text-decoration:none; }

.dark-bg { background-color:#444; }

.dark-text, .dark-text a {
    color: #444;
}
.accent-text, .accent-text a {
    color: #888;
}
.light-text, .light-text a {
    color: #ddd;
}


.padded-div {
    margin: 13px;
    padding: 13px;
}

.fa-input {
    width: 180px;
    height: 40px;
    font-size: 17px;
}

.fa-textarea {
    width: 180px;
    height: 140px;
    font-size: 17px;
}

.fa-button {
    text-transform: uppercase;
    font-weight: bold;
}

.fa-button-bigger {
    width: 210px;
}


.v-error {
    color: red;
    padding: 20px;
    border: 1px solid red;
}







/* Set padding to keep content from hitting the edges */
.body-content {
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}



.bottom-space { width:70%; height:140px; margin:0; padding:0; position:relative; clear:both; }




.hp-dis-image {
    max-height: 180px;
    display: block;
    margin: 18px;
}
.hp-dis-image-full {
    height: unset !important;
    max-height: unset !important;
    width: 65%;
    display: block;
    margin: 18px;
}

.post-image-display {
    width: 280px;
}

.image-upload-display {
    width: 200px;
}

.hp-f ul {
    list-style-type: none;
}

    .hp-f ul li {
        list-style: none;
        padding: 0;
    }

.homepage-topics {
    width: 220px;
    position: relative;
    float: left;
    top: 100px;
    left: 0;
    height: 100%;
    border-right: 1px solid #000;
    padding: 20px;
}

.hp-parent {
    display: flex;
}

.homepage-discussions {
    
    flex-grow: 1;
}

.clear-both {
    clear: both;
    margin:0;
    padding:0;
    height:0;
}

.homepage-discussions ul{
    padding:0;
}

.homepage-discussions ul li.hp-d-item {
    padding: 0;
    border-bottom: 1px solid #999;
}

.hp-d-item .d-date {
    
    font-weight: bold;
    font-size: 0.8em;
}

.hp-d-item h5 {
    font-size: 0.7em;
    margin: 0;
    font-weight: bold;
    position:absolute; 
    top:10px; 
    text-align:right;
    right:10px;
}

.hp-d-item .headline {
    font-size: 1.8em;
    text-decoration: none;
}

.hp-start {
    font-size: 0.95em;
    font-weight: bold;
    position:absolute;
    top: 0px; 
    right: 20px;
    text-align:right;
    display:block;
    width:220px; 
    line-height:55px;
}


.hp-d-item { background-color:#eee; padding:0; position:relative;  margin:20px 20px 50px 20px; filter: drop-shadow(4px 4px 3px #999); }
.author { height:40px; position:relative; line-height:40px; padding:0 !important; margin-left:20px; }
.author img {  height:40px; margin:0; border-radius: 50%; border:2px solid #fff; position:absolute; top:0; left:0; }

.author span {  margin-left:55px; height:40px; margin-top:0 !important; padding-top:0 !important;  display:inline-block; }

.author span.d-date { margin-left:10px !important;}



div.author img {
    width: 38px;
    height: 38px;
}

div.author span {
    font-size: 1.1em;
    font-weight: bold;
}


.myown-post-buttons {
    display: inline-block;
    border-radius: 6px;
}
.myown-post-buttons a {
    font-size:1.2em;
    padding:0 20px;
    font-weight:bold;
    text-decoration:none;
}

.reply-button{
    margin:0 50px; display:inline; text-decoration:none !important; font-weight:bold;
}
.reply-button a {
    text-decoration:none;
}
div.reactions {
        margin: 20px;
        padding: 0;
        position: relative;
    }
div.reaction { float:left; min-width:45px; height:25px; margin:0; padding:0; position:relative; }
div.reaction span { padding:0; margin:0; position:absolute; top:0; width:40px; }
div.reaction span.count { left:20px;  font-weight:bold;}
div.reaction span.note { display:none; }
.emoji-option { opacity:.7;}
.my-own-like {font-size:1.5em; opacity:1;}

.react-form { width:210px;  float:right; text-align:right; position:relative;  }
.react-form h3 { font-size:0.7em;  display:inline-block; }



#crop-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 300px;
}

#image-to-crop {
    max-width: 100%;
    display: block;
}

#crop-area {
    position: absolute;
    border-top: 4px dashed #fff;
    border-bottom: 4px dashed #fff;
    top: 0;
    left: 0;
    cursor: move;
    resize: both;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
    width: 300px; /* Default width */
    height: 300px; /* Default height */
    z-index: 5;
}

.shade {
    position: absolute;
    background-color: #000;
    opacity: .6;
    width: 100%;
    margin: 0;
    padding: 0;
}

.btm-shade {
    bottom: 0;
    height: 10px;
}

.top-shade {
    top: 0;
    height: 10px;
}



.profile-picture-edit input {
    margin: 10px;
    display:block;
}

.big-margin {
    margin: 50px;
}
.invite-table {
    margin:10px 0;

}
.invite-table tr td {
    padding: 10px;
}

.invite-table tr {
    border-bottom: 1px solid #444;
}
.profile-logout h3 a {  text-decoration:none; }
/*

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


    NAV BAR 
*/
.navbar {
    position: relative;
    margin: 0;
    padding: 10px 10px 20px 10px;
    background-color: #666;
}
    .navbar .navbar-header {
        float:left; margin:0;
    }
    .navbar .navbar-collapse {
        float:right;
        text-align:right;
    }
    .navbar-toggle {
        display: none;
    }
.navbar-header {}
.navbar-brand { font-size:2em; text-decoration:none; }
.top-nav-user a img { width:40px; border-radius:50%; margin:auto; }
.top-nav-user a {
    vertical-align: middle;
    line-height: 40px;
    display: inline-block;
    height: 40px;
    padding: 0;
    text-decoration:none;
    font-size:1.1em;
    
}
ul.navbar-nav {
    list-style: none;
    padding:0; 
    margin:0;
}
ul.navbar-nav li {
    display:inline-block;
    padding:0 !important;
    margin:0 40px;
    list-style-type:none;
    list-style: none;
}



/*
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        TOPIC HEADER AREA
*/

.topic-header { padding:16px; height:50px; padding-bottom:0; margin:0; font-size:1em;  position:relative;  }

.topic-header a { text-decoration:none;}
.topic-header p {
    margin: 10px;
    font-size: 0.7em;
}
    .topic-header h2 {
        margin: 0 0 0 20px;
        padding:0;
        font-size: 1.6em;
    }
/*
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
       HOMEPAGE TOPIC LIST
*/

.topic-container {
    border-radius: 0;
    border: 1px solid #000;
    background-color: #aaa;
    margin: 20px auto;
    padding: 0;
    position: relative;
    width: 80%;
}

.topic-title-link {
    margin: 0;
    padding: 13px;
    background-color: #222;
    display: block;
    text-decoration: none;
}

.topic-container p {
    margin: 22px;
}




.login-container label {
    padding-right: 10px;
    font-size: 14px;
    line-height: 40px;
    text-transform: uppercase;
    width:140px; 
    display:inline-block;
    text-align:right;
}
.login-container {
    text-align: center;
    width: 90%;
    margin: 40px auto;
}




/*
    homepage discussion lists
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


*/

.hp-d-item .headline a {
    text-decoration: none;
}
.hp-d-item .headline {
    display: block;
    padding: 15px;
    font-size: 1.4em;
    position:relative;
}

.post-count { font-size:0.5em; text-decoration:none; font-weight:bold; display:inline-block; margin-left:30px; background-color:#eee; padding:0 10px; border-radius:5px; }




.dicussion-main { margin:0 !important; padding-left:0; }

.dicussion-main .headline { padding-left:60px; }




label.control-label {
    width: 152px;
}

.centered-right-half {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 53px;
}


.edit-image img {
    width: 120px;
}
.edit-image p {
    font-size:0.85em;
    font-style:italic;
}





.media-share-form {
    width: 240px;
    border: 1px solid #444;
    margin: 0 auto 35px auto;
    padding: 20px;
    background-color:#fff;
}

.media-share {
    width: 40%;
    float: left;
}

    .media-share img {
        width: 90%;
    }

.media-form-image, .media-form-link {
    display: none;
}

.media-share-link {
    float: right;
}

.responding-to-content { font-style:italic; }
.responding-to-content img { width:120px; }

.external-link { font-size:0.65em; display:block; font-weight:bold; margin:15px; height:20px; }

.post-item .external-link { padding-top:30px; }