/* ADDITIONAL CSS FOR LAYOUT AND MENUS */

/*------------------------------ SIDEBAR ------------------------------*/
.sidebarmenu {
background-color: #C4C4C4;
padding: 5px 5px 5px 5px;
margin: 0px 5px 0px 0px;
font-family: Arial;
-khtml-border-radius-topleft:10px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.noncollapsible {
background-color: #C4C4C4;
color: black;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active, .noncollapsible:hover {
background-color: #A9A9A9;
}

.collapsible {
background-color: #C4C4C4;
color: black;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active, .collapsible:hover {
background-color: #A9A9A9;
}

.buttoncontent {
padding: 0 5px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #F1F1F1;
}

#buttonopen {
background-color: #F1F1F1;
padding: 5px 0px 5px 10px;
width: 100%;
border: none;
text-align: left;
color: black;
text-decoration: bold;
cursor: pointer;
outline: none;
font-size: 14px;
}

#buttonopen:hover {
background-color: #DDDDDD;
}

.w3-content,.w3-auto{
background: #DDDDDD;
}

.w3-container{
background: #DDDDDD;
}

.w3-sidebar a {
font-family: Arial;
}

body,h1,h2,h3,h4,h5,h6,.w3-wide {
font-family: Arial;
}

.w3-text-grey{
background: #DDDDDD;
}

.w3-bar-block{
background: #DDDDDD;
}

.w3-btn,.w3-button{
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: #DDDDDD;
text-align: center;
cursor: pointer;
white-space: nowrap
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.w3-parent,.w3-hover-parent:hover{
color: #000!important;
background-color: #DDDDDD!important
}

.w3-child,.w3-hover-child:hover{
color: #000!important;
background-color: #DDDDDD!important
}

.w3-btn:hover{
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}


/*------------------------------ PAGES ------------------------------*/
#cs_historytext_full {
display: inline-block;
width: 95%;
margin: 10px 0px 0px 0px;
padding: 0px 5px 0px 5px;
font-family: Arial;
text-align: justify;
}

#cs_history_centre {
display: inline-block;
width: 95%;
margin: 10px 0px 0px 0px;
padding: 0px 5px 0px 5px;
font-family: Arial;
text-align: center;
}

#cs_historytext_left {
display: inline-block;
width: 45%;
margin: 10px 0px 0px 0px;
padding: 0px 5px 0px 0px;
font-family: Arial;
text-align: justify;
}

#cs_historytext_right {
display: inline-block;
width: 45%;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 5px;
font-family: Arial;
text-align: justify;
}

#cs_historyimage_left {
display: inline-block;
width: 45%;
margin: 10px 0px 0px 0px;
padding: 0px 5px 0px 0px;
font-family: Arial;
text-align: center;
vertical-align: top;
}

#cs_historyimage_right {
display: inline-block;
width: 45%;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 5px;
font-family: Arial;
text-align: center;
vertical-align: top;
}


/*------------------------------ PAGE CONTENT ------------------------------*/
#pagecontent{
font-family: Arial;
padding: 0px 15px 0px 15px;
}


/*------------------------------ HEADINGS ------------------------------*/
#headingbg {
background:url(https://www.computerspacefan.com/_images/listbg_60.png);
margin: 10px 0px 0px 0px;
padding:3px 0px 0px 0px;
text-align:center;
color:black;
width:100%;
height:60px;
clear:left;
font-family: Arial;
font-size:14px;
-khtml-border-radius-topleft:10px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}


/*------------------------------ LISTS ------------------------------*/
#cs_roguelist {
background:url(https://www.computerspacefan.com/_images/listbg_400.png);
display: inline-block;
margin: 10px 5px 10px 5px;
padding: 10px 10px 10px 10px;
font-family: Arial;
font-size: 20px;
font-weight: bold;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#cs_roguelist_text {
font-family: Arial;
margin: 5px 0px 0px 0px;
}

#cs_simlist {
background:url(https://www.computerspacefan.com/_images/listbg_400.png);
display: inline-block;
margin: 10px 5px 10px 5px;
padding: 10px 10px 10px 10px;
text-align: center;
font-family: Arial;
font-size: 20px;
font-weight: bold;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#cs_simlist_text {
font-family: Arial;
margin: 5px 0px 0px 0px;
}

#white_talk {
background: #ffffff;
display: inline-block;
width: 90%;
margin: 5px 20px 0px 20px;
padding: 10px 10px 10px 10px;
font-family: Arial;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#news {
background: #F1F1F1;
display: inline-block;
border: 1px;
margin: 10px 0px 10px 0px;
width: 100%;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#news_banner {
padding: 10px 0px 0px 10px;
}

#news_name {
padding: 5px 0px 5px 20px;
text-align: left;
font-size: 16px;
font-weight: bold;
}

#news_text {
padding: 0px 30px 15px 30px;
text-align: justify;
}

#article {
background: #F1F1F1;
display: inline-block;
border: 1px;
margin: 10px 0px 10px 0px;
width: 100%;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#article_name {
padding: 5px 0px 0px 20px;
text-align: left;
font-size: 18px;
font-weight: bold;
}

#article_date {
padding: 0px 0px 5px 20px;
text-align: left;
font-size: 16px;
font-weight: bold;
}

#article_text {
padding: 0px 30px 15px 30px;
text-align: justify;
}


/*------------------------------ BUTTONS ------------------------------*/
#button_cs {
width: 150px;
height: 30px;
border-radius: 5px;
background-color: #C4C4C4;
margin: 5px 0px 0px 0px;
padding: 2px 0px 0px 0px;
border: none;
color: black;
text-align: center;
text-decoration: bold;
font-family: Arial;
font-size: 15px;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_cs:hover {
background-color: #A9A9A9;
color: white;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media100 {
width: 100px;
height: 30px;
border-radius: 5px;
background-color: #C4C4C4;
margin: 5px 0px 0px 0px;
padding: 2px 0px 0px 0px;
border: none;
color: black;
text-align: center;
text-decoration: bold;
font-family: Arial;
font-size: 15px;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media100:hover {
background-color: #A9A9A9;
color: white;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media90 {
width: 90px;
height: 30px;
border-radius: 5px;
background-color: #C4C4C4;
margin: 5px 0px 0px 0px;
padding: 2px 0px 0px 0px;
border: none;
color: black;
text-align: center;
text-decoration: bold;
font-family: Arial;
font-size: 15px;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media90:hover {
background-color: #A9A9A9;
color: white;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media70 {
width: 70px;
height: 30px;
border-radius: 5px;
background-color: #C4C4C4;
margin: 5px 0px 0px 0px;
padding: 2px 0px 0px 0px;
border: none;
color: black;
text-align: center;
text-decoration: bold;
font-family: Arial;
font-size: 15px;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_media70:hover {
background-color: #A9A9A9;
color: white;
-webkit-transition-duration: 0.1s; /* Safari */
transition-duration: 0.1s;
}

#button_return {
background-image: url(https://www.computerspacefan.com/_images/button_return.jpg);
background-size: cover;
background-position: center;
width: 100px;
height: 49px;
border: none;
cursor: pointer;
}

#button_return:hover {
background-color: #A9A9A9;
}

ul {
margin: 0px 0px 0px 10px;
padding: 0px 0px 0px 10px;
}


/*------------------------------ LINKS ------------------------------*/
a,a:visited {
color: black;
font-weight: bold;
text-decoration: underline;
}

a:hover {
color: red;
text-decoration: none;
}

.pointer {
cursor:pointer
}