@charset "utf-8";
body {font-family: Arial, Helvetica, sans-serif; margin:0 auto; background-color:#333333; }
#contain {max-width:1100px; margin:0 auto; background-color: #333333;}

/* For devices smaller than 885px: */
#xpageright { visibility:hidden;}

/* For devices 885px and larger: */
@media only screen and (min-width: 885px) {
#xpageright { visibility:visible;}
} 

/* MENU */
#menu { background-color: #666; display:block; margin-bottom:5px; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; padding: 0; z-index:999}
nav { font-size:20px; }
nav a {background-color:#CC9900; color: #eFeFeF; float:left; padding: 6px 8px; text-decoration:none; text-transform:uppercase; }
nav a.blogm { background-color: #63C;}
nav a.twitchm { background-color: #6441a5;}
nav a:hover { background-color: #000;}
nav a.active { background-color: #eFeFeF; color:#CC9900;}
nav a.activeblogm { background-color: #63C;}
nav a.activetwitchm { background-color: #6441a5;}


/* BANNER */
#bannercontain {max-width:1100px; min-height:180px; display:block;}
#banner { height:180px; background:url(../img/karlocweb.jpg) top left no-repeat;}

/* XMAS */
#banner-home { min-height:180px; background:url(../img/banner/banner-home-xmas.jpg) top left no-repeat;}
#banner-minecraft {min-height:180px; background:url(../img/banner/banner-minecraft-xmas.jpg) top left no-repeat;}
#banner-overwatch {min-height:180px; background:url(../img/banner/banner-overwatch-xmas.jpg) top left no-repeat;}
#banner-about {min-height:180px; background:url(../img/banner/banner-about-xmas.jpg) top left no-repeat;}
#banner-download {min-height:180px; background:url(../img/banner/banner-download-xmas.jpg) top left no-repeat;}
#banner-error {min-height:180px; background:url(../img/banner/banner-error-xmas.jpg) top left no-repeat;}
#banner-test {min-height:180px; background:url(../img/banner/banner-test.jpg) top left no-repeat;}
#banner-vid {min-height:180px; background:url(../img/banner/banner-vid-xmas.jpg) top left no-repeat;}
#banner-blog {min-height:180px; background:url(../img/banner/banner-blog-xmas.jpg) top left no-repeat;}
#banner-twitch {min-height:180px; background:url(../img/banner/banner-overwatch-xmas.jpg) top left no-repeat;}

.test {background:url(../img/page/page-test.jpg) no-repeat top center;}
.minecraft {background:url(../img/page/page-minecraft-xmas.jpg) no-repeat top center;}
.home {background:url(../img/page/page-home-xmas.jpg) no-repeat top center;}
.about {background:url(../img/page/page-about-xmas.jpg) no-repeat top center;}
.overwatch {background:url(../img/page/page-overwatch-xmas.jpg) no-repeat top center;}
.download {background:url(../img/page/page-download-xmas.jpg) no-repeat top center;}
.error {background:url(../img/page/page-error-xmas.jpg) no-repeat top center;}
.blog {background:url(../img/page/page-blog-xmas.jpg) no-repeat top center;}
.twitch {background:url(../img/page/page-twitch-xmas.jpg) no-repeat top center;}

/* NOT XMAS 
#banner-home { min-height:180px; background:url(../img/banner/banner-home.jpg) top left no-repeat;}
#banner-minecraft {min-height:180px; background:url(../img/banner/banner-minecraft.jpg) top left no-repeat;}
#banner-overwatch {min-height:180px; background:url(../img/banner/banner-overwatch.jpg) top left no-repeat;}
#banner-about {min-height:180px; background:url(../img/banner/banner-about.jpg) top left no-repeat;}
#banner-download {min-height:180px; background:url(../img/banner/banner-download.jpg) top left no-repeat;}
#banner-error {min-height:180px; background:url(../img/banner/banner-error.jpg) top left no-repeat;}
#banner-test {min-height:180px; background:url(../img/banner/banner-test.jpg) top left no-repeat;}
#banner-vid {min-height:180px; background:url(../img/banner/banner-vid.jpg) top left no-repeat;}
#banner-blog {min-height:180px; background:url(../img/banner/banner-blog.jpg) top left no-repeat;}
#banner-twitch {min-height:180px; background:url(../img/banner/banner-overwatch.jpg) top left no-repeat;}


.test {background:url(../img/page/page-test.jpg) no-repeat top center;}
.minecraft {background:url(../img/page/page-minecraft.jpg) no-repeat top center;}
.home {background:url(../img/page/page-home.jpg) no-repeat top center;}
.about {background:url(../img/page/page-about.jpg) no-repeat top center;}
.overwatch {background:url(../img/page/page-overwatch.jpg) no-repeat top center;}
.download {background:url(../img/page/page-download.jpg) no-repeat top center;}
.error {background:url(../img/page/page-error.jpg) no-repeat top center;}
.blog {background:url(../img/page/page-blog.jpg) no-repeat top center;}
.twitch {background:url(../img/page/page-twitch.jpg) no-repeat top center;}
*/

#karloc {margin-right: 55px; color:#CC9900; font-size:56px; font-weight:bold; font-style:italic; text-align:right;}
#karloc span{text-shadow:5px 5px 8px #000000;}
#karloc2 {margin-right: 10px; color:#000000; font-size:30px; font-weight:bold; font-style:italic; text-align:right;}
#karloc2 span{text-shadow:3px 3px 4px #FFFFFF;}
#karloc-youtube { margin-right: 30px; padding-top:10px; text-align:right; height: 60px;}

/* SOCIAL MEDIA */
#socialmedia { background-color:#445d7b; padding-top : 10px; margin-top: 5px; max-width:1200px;}
#karloc-links a {float:left; background-position: top; margin-left: 10px; margin-bottom:10px;}
#links a {float:right; background-position: top; margin-right: 10px;margin-bottom:10px;}
#twitter {background:url(../img/icon/twitter.png) top;width:40px; height:40px;}
#twitter:hover { background-position: bottom;}
#twitch {background:url(../img/icon/twitch.png) top;width:40px; height:40px;}
#twitch:hover { background-position: bottom;}
#youtube {background:url(../img/icon/youtube.png) top;width:40px; height:40px;}
#youtube:hover { background-position: bottom;}
#discord {background:url(../img/icon/discord.png) top;width:40px; height:40px;}
#discord:hover { background-position: bottom;}
#ripple {background:url(../img/icon/ripple.png) top;width:40px; height:40px;}
#ripple:hover { background-position: bottom;}

/* MAIN */
main {max-width:1100px; min-height:443px;}
#main1 {width: 100%; float:left; max-width: 750px; min-height:443px; padding:0; margin-top: 5px; margin-right:0;  line-height:22px;}
#main1v {width: 100%; float:left; max-width: 750px; min-height:100px; padding:0; margin-top: 5px; margin-right:0;  line-height:22px;}
#main1b {width: 100%; float:left; max-width: 750px; min-height:100px; padding:0; margin-top: 5px; margin-right:0;  xline-height:22px;}



#main1textcontain {height:443px;}
#main1text {margin:0px; padding: 5px 15px 5px 15px; background: rgba(255, 255, 255, 0.7);}
#main1text:hover { background: rgba(255, 255, 255, 0.9);}
.errortext { color:#CC0000;}

#main1linkscontain {margin-top: 10px;}
#main1linkscontain-v {margin-top: 0px;}
#main1links a { float:left; margin: 4px 4px 4px 4px; padding:0;}
#main1links a article{max-width:400px;}
#main1links a img { opacity:0.9; border:#333333 solid 2px; max-width: 350px;}
#main1links a img:hover {opacity:1;border:#CC9900 solid 2px;}
#main1links-v a { float: none; margin: 4px 4px 4px 4px; padding:0;}

#mainpage {margin-top: 5px; line-height: normal;}
#mainpage h1 {color:#445d7b;}
#mainpage h2 {color:#CC9900; text-decoration:underline;}

.cat-header {max-width: 750px; min-height:70px; background-color: #C60 ; padding: 5px 5px 10px 5px; color:#efefef; margin: 5px 0;}
.cat-header hr { margin: 0; color:#efefef;}
.v-cat-header {max-width: 750px; min-height:40px; background-color: #C60 ; padding: 5px 5px 10px 5px; color:#efefef; margin: 0 0 5px 0;}
.v-cat-header hr { margin: 0; color:#efefef;}
.b-cat-header {max-width: 750px; min-height:40px; background-color: #63C ; padding: 5px 5px 10px 5px; color:#efefef; margin: 0 0 5px 0;}
.b-cat-header hr { margin: 0; color:#efefef;}


.dl-card {float:left; width:50% ; min-width: 350px; margin:0 0 0 0; xbackground-color:#0F0;}
.dl-card a { color: #efefef;}
.dl-card a:hover { color: #333;}
.dl-box {margin: 0 5px 0 0; background-color: #777; width:100%-5px; min-height:180px; border:#000000 thin solid; padding:5px;}

.v-card {float:left; width:100% ; height: 100%; min-width: 350px; margin:0 0 0 0; xbackground-color:#0F0;}
.v-box {margin: 0; background-color: #777; width:100%-5px; min-height:100px; border:#000000 thin solid; padding:5px; height:100%;}
.v-box2 {margin: 0 0 5px 0; background-color: #777; width:100%-5px; min-height:120px; border:#000000 thin solid; padding:5px; border-top: none;}
.v-box2xx a { display:inline-block; margin: 4px 4px 4px 4px; padding:0; float:none; background:#0F0;}
.v-wrapper {position: relative;	padding-top: 56.25%; /* 16:9 */	height: 0;}
.v-wrapper iframe {	position: absolute;	top: 0;	left: 0; width: 100%; height: 100%;}

.bi-card {max-width: 750px; min-height:40px; background-color: #efefef ; padding: 10px 20px 20px 20px;  margin: 0 0 5px 0;}
.bi-card h1 {color:#63C; text-align:center; font-size:48px;}
.bi-box {margin: 0; width:100%-5px; min-height:100px; padding:5px 5px 25px 5px; height:100%; xbackground-color:#00FF00; font-size:22px; line-height:1.5em;}
.bi-box2 {margin: 0 0 5px 0; background-color: #efefef; width:100%-5px; padding:5px; border-top:#666 solid thin; }
.bi-wrapper {position: relative;	padding-top: 56.25%; /* 16:9 */	height: 0;}
.bi-wrapper img {	position: absolute;	top: 0;	left: 0; width: 100%; height: 100%; max-width:650px; max-height: 350px;}

.kc-box {margin: 0; width:100%-5px; min-height:100px; padding:5px 5px 25px 5px; height:100%; font-size:18px; line-height:1.5em;}

.m-card {float:left; width:100% ; height: 100%; min-width: 350px; margin:0 0 0 0; xbackground-color:#0F0;}
.m-card a { color: #efefef;}
.m-card a:hover { color: #333;}
.m-box {margin: 0; background-color: #777; width:100%-5px; min-height:60px; border:#C60 thin solid; padding:4px; height:100%;}
.m-box img { float:left; margin: 0 5px 5px 0; border:#000 thin solid; }
.m-box img:hover { border:#efefef thin solid;}
.m-box2 {margin: 0 0 5px 0; background-color: #777; width:100%-5px; min-height:20px; border:#C60 thin solid; padding:4px; border-top: none;}
.m-box2 a { background-color:#CC6600; padding: 2px 10px; text-decoration: none; display:inline-block;}
.note { display:inline-block; border: #666 thin solid; float:right; padding: 0 6px 0 6px; color:#990000; font-weight: bold;}
.note span { color: #666; font-weight: normal;}

.b-card {float:left; width:100% ; height: 100%; min-width: 350px; margin:0 0 0 0; xbackground-color:#0F0;}
.b-card a { color: #efefef;}
.b-card a:hover { color: #333;}
.b-box {margin: 0; background-color: #777; width:100%-5px; min-height:111px; border:#63C thin solid; padding:4px; height:100%;}
.b-box img { float:left; margin: 0 5px 5px 0; border:#000 thin solid; }
.b-box img:hover { border:#efefef thin solid;}
.b-box2 {margin: 0 0 5px 0; background-color: #777; width:100%-5px; min-height:20px; border:#63C thin solid; padding:4px; border-top: none;}
.b-box2 a { background-color:#63C; padding: 2px 10px; text-decoration: none; display:inline-block;}
.b-box2 a:hover { color: #000; background-color: #66C;}


.dl-box img { float:left; margin: 0 5px 5px 0; border:#000 thin solid; }
.dl-box img:hover { border:#efefef thin solid;}
.dl-box2 {margin: 0 5px 5px 0; background-color: #777; width:100%-5px; min-height:20px; border:#000000 thin solid; padding:5px; border-top: none;}
.dl-box2 a { background-color:#CC6600; padding: 3px 5px; text-decoration: none; display:inline-block;}
.count { display:inline-block; border: #666 thin solid; float:right; padding: 0 6px 0 6px; color:#990000; font-weight: bold;}
.count span { color:#933; font-weight: normal;}


#main2 {float:left; min-width:340px; max-width: 885px; margin-top: 5px; margin-left: 10px; height: 100%}

#twittertitle { height:32px; background-color:#000; color:#efefef; padding: 5px 0 0px 10px;}
#twitterfeed { height:400px; margin-bottom: 20px;}

#adspaceright { min-height: 500px; width:340px; overflow:hidden; margin-top: 0px; background-color:#222222; margin-bottom: 5px; height:100%;}

/* FOOTER */
#cright { background-color: #445d7b; padding: 6px 0 6px 10px; display:block; color: #efefef; margin-top: 5px; font-size:12px;}

.clear {clear:both;}
td {font-family: Arial, Helvetica, sans-serif;}
th {font-family: Arial, Helvetica, sans-serif;}
.sig {color:#000; font-style:italic; font-weight: 400; font-size:18px;}
h1 { margin-top:10px; margin-bottom:5px; font-size:22px;}
h2 { margin-top:0; margin-bottom:0px; font-size:20px;}
h3 { margin-top:0; margin-bottom:0px; font-size:18px;}
p {margin-top:10px; margin-bottom:5px;}

#popup1 { position: fixed ; bottom:0; left:50%; margin:0 auto; width:100px; height:100px; z-index:9999; background-color: #F90; visibility:hidden;}