body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #2c2c2c;
    color: #ffffff;
}
/* Global */

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}


ul.download li{
	
		margin-bottom: 10px;
}

.button_1 {
    height: 38px;
    background: #464545;
    border: 0;
    padding-left: 20px;
    padding-right: 20px;
}

a {
    color: #ffffff;
}

/* Header */

header {
    background: #2c2c2c;
    padding-top: 30px;
    min-height: 70px;
    background: url('../img/tile_top.png') repeat-x;
}

header img {
    margin-top: 10px;
}

header a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

header li {
    display: inline;
    padding: 0 20px 0 20px;
}

header #logo {
    float: right;
    margin-top: 40px;
}

header nav {
    float: left;
    margin-top: 25px;
    
}

header .current a {
    color: #464545;
    font-weight: bold;
}

header a:hover {
    color: #464545;
}

pre code {
  background-color: rgb(43, 41, 41);
  border: 1px solid rgb(92, 92, 92);
  width: 230px;
  display: block;
  padding: 20px;
}

pre code.exception {

  width: 50%;
	
}

pre.exception {
	white-space: pre-wrap; /* Makes the code wrap */
	word-wrap: break-word; /* Ensures long words break */
}

/* showcase */

#showcase {
    margin-top: -100px;
    min-height: 300px;
}

#showcase h1 {
    padding-top: 20px;
    margin-top: 80px;
    margin-bottom: 10px;
    font-size: 20px;
}

#showcase p {
    font-size: 15px;
}

#showcase p.tour_links {
	font-size: 90%;
} 

#showcase p.tour_link {
	font-size: 120%;
	color: #AAD5FF;
} 

#showcase p.tour_link a {
	color: #99de9e;
}

#showcase .date {
    color: #b5e7dc;
}

#showcase .title {
    font-size: large;
    margin-bottom: -1em;
}

#showcase .ocpItalic {

    font-style: italic;
}

#showcase .win11 {

	background-color: #425a87;
}

hr {
  
  background-color: #4a4949;
  height: 1px;
  border: 0px solid
}


.grid-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 1fr)); 
	column-gap: 10px; 
	row-gap: 10px; 
	max-width: 600px; 
}
.grid-item {
	display: flex;
    flex-direction: column;		
	align-items: flex-start; 
	padding: 10px;
	border: 0;
	background-color: #2c2c2c;
}
.grid-item img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	margin-bottom: 10px;
}
/*.download-link {
	display: inline-block;
	text-decoration: none;
	color: white;
	background-color: #2c2c2c;
	padding: 8px 15px;
	border-radius: 5px;
}*/

/*
.download-link:hover {
	background-color: #0056b3;
}
*/		
/* themes 
div.scrollmenu {
    background-color: rgb(41, 40, 40);
    overflow: auto;
    white-space: nowrap;
 }
  
div.scrollmenu a  {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
  
div.scrollmenu a:hover {
    background-color: #777;
}

.carousel {
  overflow: hidden;
  white-space: nowrap;
   display: flex;
  overflow-x: scroll;
}

.carousel-image {
  display: inline-block;
  height: auto;
  padding: 5px;
}
*/



/*
.carousel-image {
  animation: slide 10s infinite;
}


@keyframes slide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}*/

table {
	font-size: 12px;
    width: 50%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 8px;
	border: 0;
}

th {
    background-color: #242323;
}

td {
    border-bottom: 1px solid #0f0c0c;
}


/* features / tour / change log */

#features, #tour {
    padding: 35px;
    background: #2c2c2c;
}

#features ul {
    list-style-image: url('../img/dot.png');
}

#features li {
	padding-bottom: 5px;
	
}

#tour {
    max-width: 80%;
}


/* screenshot */

#screenshot {
    padding-right: 70px;
    float: left;
}

#screenshot .free {
    margin-left: 149px;
}

.centered {
	text-align: center;
}

/* awards, donate */

#donate, #donate {
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    width: 450px;
    text-align: center;
    font-size: 12px;
}

/* awards */

#awards img {
    vertical-align: middle;
    padding-left: 2px;
}

footer {
    padding: 0;
    margin-top: 20px;
    background-color: #464545;
    color: #b6b3b3;
    background: url('../img/tile_bottom.png') repeat-x;
    text-align: center;
}

footer a {
	text-decoration: none;
	color: #b6b3b3;
}

footer img {
		padding-right: 3px;
		padding-left: 3px;
		vertical-align: middle;
}

.homepage {
    bottom: 0;
    width: 100%;
    position: fixed;
}

/* tour extra */
img.vertical {
    vertical-align: sub;
    margin-right: 2px;
}

/* theme gallery */
.gallery-container {
    display: flex;
    overflow-x: auto;
    width: 100%;
    height: 100%; 
    white-space: nowrap;
    cursor: grab;
    padding-bottom: 20px;
}

.gallery-item {
    
    display: inline-block;
    margin-right: 40px;
    text-align: center;
}

.gallery-item img {
    user-select: none;
    cursor: pointer;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}

.caption {
    user-select: none;
    font-size: 14px;
    margin-top: 10px;
}

.gallery-item img:hover {
  
    transform: scale(0.9);
}

/* Media Queries */

@media(max-width: 1200px) {
    header #logo, header nav, header nav li {
        float: none;
        text-align: center;
        width: 100%;
    }
    header nav {
        min-width: 300px;
        margin-left: -25px;
    }
    header {
        padding-bottom: 20px;
    }
    #showcase h1 {
        margin-top: 40px;
    }

}

@media(max-width: 700px) {

	#logo img {
		max-width: 100%
	}

	#longd  {
		
		float: left;
	}
	
	figure {
		margin-left: 0;
	}
	
	#screenshot .free {
		margin-left: 0;
	}
    #donate {
        width: 250px;
    }
    header nav {

        margin-left: -35px;
    }
	#mediaq img {
		width: 100%;
		height: 100%;
	}

    #screenshot img {
        
        margin-left: 20%;
        width: 100%;
    
    }

    #longd img {

        width: 18px;
        height: 16px;

    }

	#tour {
		padding-left: 0;
		max-width: 100%;
	}
}

@media(max-height: 1000px) {
    #showcase {
        margin-top: 10px;
    }
}


/* download/sideslide.html */

	#showcase {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 10px; 
		flex-wrap: wrap; 
	}

	figure {
		margin: 0;
		flex: 1 1 50%; 
	}

	#longd {
		flex: 1 1 45%; 
		list-style-type: disc;
		padding-left: 20px;
	}

	#screenshot {
		display: flex;
		flex-direction: column;  /* Stacks the image and <p> vertically */
		justify-content: center; /* Centers the content vertically */
		align-items: center;     /* Centers the content horizontally */
		width: 100%;             /* Ensures the div takes full width */
	}

	#screenshot img {
		max-width: 100%;         
		height: auto;
	}

	#screenshot p {
		text-align: center; 
		margin-top: 10px; 
	}

	.free img {
		width: 100px; 
	}

   
	@media (max-width: 768px) {
		#showcase {
			flex-direction: column; /* Stack the figure and list vertically on smaller screens */
			align-items: center;
		}

		figure, #longd {
			width: 90%; /* Make them take up most of the screen */
			margin-bottom: 20px;
		}

		#longd {
			padding-left: 10px; /* Reduce padding on smaller screens */
		}
	}