/* Style sheet for SimRick Channel pages */



/* FONTS */
@font-face {
    font-family: ComicHelvetic Heavy;
    src: url("assets/comichelvetic_heavy.otf");
}
@font-face {
    font-family: ComicHelvetic Light;
    src: url("assets/comichelvetic_light.otf");
}
@font-face {
    font-family: ComicHelvetic Medium;
    src: url("assets/comichelvetic_medium.otf");
}




/* CSS Body */
body{
	background-image: url("assets/simrickpagebackground.jpg");
	background-color: #0b4700;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat, repeat;
	background-attachment: fixed;	
	margin:0;
}



/* GLOBAL NAVIGATION BAR */
.globaltitlebar{
	padding: 0px 0; 
	display:block; 
	background-color:#000000; 
	height: 50px; 
	width:100%;
}		
.globalnav{
	margin:auto; 
	font-family: roboto italic; 
	width:950px; 
	font-size:20px; 
	list-style-type:none; 
	overflow:hidden; 
	color:white; 
	list-style-type:none; 
	overflow:hidden;
	padding-top: 2px;
}
.irclogo {
	float: left;
	margin: auto;
	color: white;
	padding-top: 7px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 9px;	
}
.globalmenuitem {
	float: left;
	font-family: roboto italic; 
}
.globalmenuitem a {
	font-family: roboto italic; 
	font-size: 22px; 
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 11px;
	padding-right: 11px;
}
.globalmenuitem a:hover:not(.active) {
	background-color: #840000;
}


/* Page Content Body */
.contentbody{
	font-family: roboto;
	margin: auto;
	height: auto;
	width: 950px;
}

.titlenamespace{
	font-family: roboto;
	margin: auto;
	height: 130px;
	width: 100%;
}



.herocontainer{
	display: flex;
	gap: 2px;
	overflow: hidden;
	flex-wrap: wrap;
}

.herovideopreviewspace{
	background-color: black;
	height: 300px;
	width: 472px;
	margin-top: 2px;
	margin-left: 0px;
	margin-right: 2px;
	margin-bottom: 6px;
	
}

.herotextspace{
	background-color: #006600;
	height: 300px;
	width: 472px;
	margin-top: 2px;
	margin-left: 2px;
	margin-right: 0px;
	margin-bottom: 6px;	
}

.herotextspacetitle{
	font-family: ComicHelvetic Heavy;
	font-size: 30px;
	line-height: 24px;
	float: left;
	font-weight: normal;
	color: white;
	margin-top: 25px;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: 0px;	
}
.herotextspaceparagraph{
	font-family: ComicHelvetic Light;
	font-size:17px;
	line-height: 20px;
	float: left;
	color: white;
	margin-top: 0px;
	margin-left: 9px;
	margin-right: 8px;
	margin-bottom: 0px;	
}


.herolinkButton a {
	font-family: ComicHelvetic Medium;
	text-align: center;
	color: white;
	background-color: #3cb74a;	
	width: auto;
	height: auto;
	float: left;
	margin-top: 0px;
	margin-left: 2px;
	margin-right: 3px;
	margin-bottom: 2px;
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 6px;
	text-decoration: none;
}
.herolinkButton a:hover {
	transition-duration: 0.3s;	
	background-color: white;	
	color: #006600;
	text-decoration: none;
}














.whitepage{
	display: block;
	background-color: #fff;
	margin-top: 6px;
	width: 100%; 
	height: 100%;	
	flex-direction: column;
}

.pagetitle1{
	font-family: ComicHelvetic heavy;
	font-size: 42px;
	color: #006600; 
	text-align: center;
	margin-top: 12px; 
	margin-left: px; 
	margin-bottom: 4px;	
}



/* playlist thing */
.playlists{
	display: flex;
	gap: 4px;
	overflow: hidden;
	margin-top: 6px;
	margin-bottom: 0px;
	margin-left: 15px;
	margin-right: 1px;
	height: auto;
	width: 100%;
	justify-content: left;
}
.playitem{
	float: left;
	height: 200px;
	width: 225px;
	background-color: #006600;
	background-size: cover;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 1px;
	margin-right: 1px;	
	text-decoration: none;
}
.playitem:hover{
	color: white;
	text-decoration: underline;
}
.playthumb{
	height: 134px;
	width: 216px;
	background-image: url("images/simrickbanner.jpg"); 
	background-color: black;
	margin-top: 4px;
	margin-left: 4px;
	margin-right: 4px;	
	margin-bottom: 4px;
}
.playtitle{
	font-family: ComicHelvetic Medium;
	/* text-shadow: 2px 0px 6px #000673; */
	color: white;
	line-height: 23px;
	font-size: 22px;
	text-align: center;
	margin-top: 6px;
	margin-left: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;
}
.playsubtitle{
	font-family: ComicHelvetic Light;
	/* text-shadow: 2px 0px 6px #000673; */
	color: white;
	font-size: 14px;
	text-align: center;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;
}




/* Related Channels */
.relatedbox{
	height: 50px;
	width: 950px;
	background-color:#000000; 
	margin-top: 7px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 7px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-weight: normal;
}
.relatedtitle{
	float: left;
	font-family: roboto;
	font-size: 17px;
	color: white;
	padding-top: 14px;
	padding-left: 6px;
	margin: 1px;
}
.channelbuttonbox{
	float: left;
	font-family: roboto medium;
	font-weight: normal;
	font-size: 15px;
	color: white;
	margin-top: 3px;
	margin-left: 7px;
	background-color: #454545;
	padding-top: 12px;
	padding-bottom: 12px;	
}
.channelbuttonbox a{
	color: white;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;	
}

.channelbuttonbox:hover {
    background-color: transparent; 
    color: #454545; 
}
.channel-main:hover {
    background-color: #AB0000; /* Example: OrangeRed */
}
.channel-two:hover {
    background-color: #C91414; /* Example: Firebrick */
}
.channel-extra:hover {
    background-color: #780000; /* Example: Salmon */
}
.channel-zone:hover {
    background-color: #3F0078; /* Example: Blue Violet */
}
.channelbuttonbox:hover a { 
    color: white;
    text-decoration: underline;
}





.titlename {
	list-style-type: none;
	float: left;
	font-family: roboto bold italic;
	font-size: 36px;
	text-shadow: 1px 2px 5px #000000;
	color: white;
	line-height: 40px;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 8px;
	padding-right: 9px;		
}
.custompagebackground{
	display: block;
	background-color: #fff;
	margin-top: 6px;
	width: 100%; 
	height: 100%;	
	padding-bottom: 6px;
	flex-direction: column;
}








.dividingline{
	padding-bottom: 1px; 
	background-color: #bababa; 
	margin-left: 9px;
	margin-right: 9px;
}





/* FOOTER DESIGN */
.footer {
	height: 100px;
	width: 100%;
	padding: 0px 0; 
	background-color: #840000;
	background-image: url("../assets/footerbg.jpg");
	color: white;
	text-align: center;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 14px 0;
}
.footertext{
	margin-top: 17px;
	margin-bottom: 2px;
	font-family: roboto italic;	
}