/****************/
/* imported CSS */
/****************/
@import 'colours.css';




/****************/
/* body segment */
/****************/

body{background-color:var(--MiseryBlue); 
    color : white; 
    background-image: url('../images/background/Background.png');
    background-size: cover;
    }


.main_splash{width:100%; display:flex;justify-content: center;}



.main_menu{display:flex;width:100%;height:50px;justify-content:center;} /* {height:30px;position:absolute;right:0px;top:10px;}*/
.menu_item{display:flex;justify-content:center;align-items: center; background-color:var(--SpacemanOrange);color:white;font-family:sans-serif;width:120px;margin:5px;border-radius:3px;}
.menu_item a{text-decoration:none;color:white;}


/**********************/
/*  login  segment   */
/**********************/
.login__form{width:600px; height:297px; margin:auto;top:5px; font-family:Calibri, Verdana;position:relative; background-color:var(--MiseryBlue);border-style:none;border-color:white;}
.login__form_box{width:88%; height: 88%; background-color:white; position:relative; top:6%; left:6%; border-radius:10px; }
.login__form_username{ margin:auto; margin-bottom:10px;text-align: center;color:var(--MiseryBlue); }
.login__form_password{ margin:auto; margin-bottom:10px; text-align: center; color:var(--MiseryBlue);}


.login__form_submit{width:100%;margin:auto; padding-top:40px; display:flex; justify-content: center;}
.login__form_submit button{margin:10px;background-color:var(--MiseryBlue);}

#login{padding:10px;background-color:var(--SpacemanOrange);color:white;border-style:none;border-width:1px;border-radius:5px;font-size:16px;}

.login__form_input{padding-top:50px;}
.login__form_extras{padding-left:30px;padding-right:30px;}
.login__form_extras a{color:var(--SpacemanOrange);text-decoration:none;}



.login___submit{color:white; background-color: var(--MiseryBlue); border-color:white; border-style:solid; border-width: 1px;  padding-left : 22px; padding-right:22px; padding-top:7px; padding-bottom:7px; font-size:16px; font-family:Calibri,Verdana; }
.login___user_title{color:var(--MiseryBlue);margin-left:2.5%;}
.login___password_title{color:var(--MiseryBlue);margin-left:2.5%;}


.login___extra{position:relative;width:100%;height:50px;}

.login___forgotten{position:absolute;left:10px;bottom:10px;width:200px;height:30px}
.login___forgotten a{color:var(--SpacemanOrange); text-decoration:none;}

.login___create{position:absolute;right:10px;bottom:10px;width:100px;height:30px}
.login___create a{color:var(--SpacemanOrange); text-decoration:none;}


.login___error_msg{margin-left:30px;color:var(--SpacemanOrange);}

.loginout{display:block;}

/************************************/
/*  staticPage templates  segment   */
/************************************/

.staticPage__title{margin:auto;margin-top:50px;width:860px; height:40px;background-color:white;color:black;font-size:20px;border-radius:5px;font-family:Verdana; display: flex; justify-content: center; align-items: center;}
.staticPage__title a{text-decoration:none;color:var(--SpacemanOrange);}

.staticPage__body{margin:auto;margin-top:20px;width:800px;background-color:white;opacity:90%;color:black;border-radius:5px;padding:30px;font-family:sans-serif;position:relative;}
.staticPage__body table{color:black;}
.staticPage__body a{text-decoration:none;color:var(--SpacemanOrange);}

.staticPage__comment{margin:auto;margin-top:20px;width:800px;background-color:white;opacity:90%;color:black;border-radius:5px;padding:30px;font-family:sans-serif;font-size:small;position:relative;}


/************************************/
/* forumpost form segment   */
/************************************/
/*.forumpost__form_title{}*/
.forumpost__form_input{font-family:Verdana, Geneva, Tahoma, sans-serif; margin:auto; width:50%;padding-top:20px;}
.forumpost__form_submit{margin-left:45%;width:10%;margin-top:30px;padding:20px;}
#forumpost_form_submit{padding:10px;width:100px;}




/************************************/
/*  forumcomment form  segment   */
/************************************/
.forumcomment__form_input{font-family:Verdana, Geneva, Tahoma, sans-serif; margin:auto; width:50%;padding-top:20px;}
.forumcomment__form_submit{margin-left:45%;width:10%;margin-top:30px;padding:20px;}
#forumcomment_form_submit{padding:10px;width:100px;}



.delete__comment{position:absolute;right:20px; bottom:5px}
.edit__comment{position:absolute;right:40px; bottom:5px}






.module{margin:auto;width:90%;padding:10px;background-color:var(--MiseryBlue);color:white;text-align:center;}
.chapter{margin:auto;width:90%;padding:10px;background-color:var(--MiseryBlue);color:white;text-align:center;}
.article{margin:auto;width:90%;padding:10px;background-color:var(--MiseryBlue);color:white;text-align:center;}

.forumPost{margin:auto;width:90%;padding:10px;background-color:var(--MiseryBlue);color:white;text-align:center;position:relative;}

.forumPost_comment_icon{width:20px;text-align:left;position:absolute;left:60px;bottom:5px;font-size:x-small;}

.forumPost_vote_icon{width:20px;text-align:left;position:absolute;left:1px;bottom:5px;font-size:x-small;display:none;}

.forumPost_views_icon{width:20px;text-align:left;position:absolute;left:21px;bottom:5px;font-size:x-small;}



.forumPost_author{width:20%;position:absolute;right:1%;text-align:right;bottom:5px;font-size:x-small;}

.forumPost_avatar{display:flex;justify-content:right;}

.article_img_centre{width:100%;display:flex;justify-content:center}

.main_links{margin:auto;width:90%;padding:10px;background-color:var(--MiseryBlue);color:white;text-align:center;}



.main_message{
    width:250px;
    position:absolute;
    top:10px;
    right:10px;
    height:auto;
    background-color:red;
    border-color:lightpink;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius:10px;
    border-style:solid;
    border-width:1px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}
.secondary_message{
    width:250px;
    position:absolute;
    top:10px;
    left:10px;
    height:auto;
    background-color:red;
    border-color:lightpink;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius:10px;
    border-style:solid;
    border-width:1px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}


.exercises{text-align:center;}
.exercises button{background-color:var(--SpacemanOrange);color:white; border-style:solid;border-width:0px;border-color:var(--SpacemanOrage);border-radius:3px;padding:5px;}


.exercise{margin:auto;margin-top:20px;width:800px;background-color:white;opacity:90%;color:black;border-radius:5px;padding:30px;font-family:sans-serif;position:relative}
.exercise button{position:absolute;right:4px; bottom:4px;}
.solution{margin:auto;margin-top:20px;width:800px;background-color:white;opacity:90%;color:black;border-radius:5px;padding:30px;font-family:sans-serif;}

.social_entity_container{display:block;background-color:white;margin:auto;width:90%;padding:10px;color:white;text-align:center;}
.social_entity{display:inline;padding-left:30px;padding-right:30px;}


.return_button{display:flex;justify-content:center;align-items: center; background-color:var(--SpacemanOrange);color:white;font-family:sans-serif;width:120px;margin:5px;border-radius:3px;}
.return_button>a{text-decoration:none;color:white;}

.author_box{    
        display:inline-block;
        position:absolute;
        right:20px;
        top:5px;
        width:120px;
        padding:5px;
        text-align:center;
        font-size:x-small;
        background-color:var(--MiseryBlue);
        color:white;
        border-radius:3px;
    }

/************************************/
/*        TEMP GRID VARIATION       */
/************************************/
.grid_container{
    display:flex;
    justify-content: center;
}
.grid_container button{ 
    background-color:var(--SpacemanOrange);
    color:white;
    font-family:sans-serif;
    display:inline;
    margin-top:10px;
    padding:10px;
    width:80px;
    height:30px;
    border:none;
    border-radius:3px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(16, 24px);
    grid-template-rows: repeat(16, 24px);
    gap: 1px;
}

.cell {
    width: 24px;
    height: 24px;
    background-color:#ffffff;
    border: 1px solid #ccc;
    cursor: pointer;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
}

.color {
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    margin: 2px;
    cursor: pointer;
}

#saveButton {
    margin-top: 10px;
    cursor: pointer;
}

.mini_grid {
    display: grid;
    grid-template-columns: repeat(16, 2px);
    grid-template-rows: repeat(16, 2px);
    gap: 0px;
}

.mini_cell {
    width: 2px;
    height: 2px;
    background-color:#ffffff;
    border: none;
    cursor: pointer;
}
.mini_grid_container{
    width:100%;
    margin-bottom:10px;
    display:flex;
    justify-content:center;
}