yavsc/web/App_Themes/style.css

body {
	background: black;
	background-image: url('/images/Banner.png');
	background-repeat: no-repeat;
	color: #D0FFD0;
	font-family: 'Arial', cursive;
	padding: 0em;
	margin-bottom:3em;
}

textarea { 
        width:25em;
        height:5em;
        }

input, textarea, checkbox { 
    color: #FFFFA0;
	background: black;
   }

main {
	margin:1em;
	}
fieldset {
	background-color: rgba(32,16,16,0.8);
	border-radius:5px; border: solid 1px #000060;
	float:left; 
} 

video,img {
	max-width:100%;
	max-height:75%;
    position:relative;
	}

footer {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(16,0,0,0.8);
	display: flex;
	z-index:-1;
	font-size: smaller;
}
.thanks  { 
	max-width: 10%;
	text-align: center;
	vertical-align: text-bottom;
	font-size:smaller;
	display:block;
	bottom:0;
}


#logo {
	float: left;
	max-height: 25%;
	max-width: 25%;
	}

.panel,.bshpanel,aside {
	background-color: rgba(32,16,16,0.8);
		border-radius:5px; border: solid 1px #000060;
		float: left;
		margin:.5em;
		padding: .5em;
}

.bsh { float: right; }

#login {
	position: fixed;
	margin:0em; 
	padding:0em;
	top:0;
	right:0;
	justify-content: space-around;
	text-align: center;
	max-width:40%;
	font-size:75%;
	}

	#login img { max-height:5em; max-width:5em; }

header {
	background-color:rgba(16,16,0,0.8);
	top:0;
	left:0;
	margin:0em;
	padding:0em;
	text-align: center;
	max-width:55%;
	}
h1 img { vertical-align: text-top; }

a {
	text-decoration: none;
	color: #B0B080;
   background-color:rgba(20,0,20,0.5);
}

a:hover  {
	text-decoration: underline;
}
a:visited {
	color: #90B090;
}
label {
	font-size: medium;
}

.message {
	font-size: large;
	background-color: rgba(0,64,0,0.1);
	}
.error {
	color: #f88;
	font-size: large;
	background-color: rgba(128,0,0,0.3);
}
.validation-summary-errors{
	color: #f88;
	background-color: rgba(64,0,0,0.3);
}

.editblog {
	width: 95%;
	height: 95%;
}

.metablog {
	font-style: italic;
	font-size: small;
	text-align: right;
	display: inline;
}

.blogtitle {
	display:inline;
}
.blogpost {
	display:block;
	margin:1em;
	padding:1em;
	border: solid 2px blue;
	background-color: #090609;
	color: #aaa;
	border-radius:5px;
}
.contenu {
padding-left: 20px;
}


ul.preview li:nth-child(-n+10) {
   display:inline;
	font-size:xx-small;
}

ul.preview li:nth-child(n) {
	display:none;
}

.validation-summary-errors{
	color: #f88;
}


.actionlink {
	color: #B0B080;
	border: solid 1px rgb(128,128,128);
	border-radius: 5px;
   background-color:rgba(0,0,32,0.8);
   cursor: pointer;
   font-family: 'Arial', cursive;
}

input, select { 
	color: #B0B080;
	border: solid 1px rgb(128,128,128);
	border-radius:5px;
   background-color:rgba(0,0,32,0.8);
   font-family: 'Arial', cursive;
}

a.actionlink img { top:4px; }

.actionlink:hover {
	background-color:rgba(30,0,124,0.9);
    border : solid 1px white;
    text-decoration: underline;
}

.code {
	font-family: "monospace";
	background-color: rgba(0,0,256,0.1);
	border-radius:25px;
	white-space: pre-wrap;
}

.avatar {
	max-width: 64px;
	max-height: 64px;
}

.comment {
	border-radius:25px;
	border-width:1px;
    border-style: solid;
	border-color:rgb(0,64,0);
	font-size: smaller;
	}

.onhover {
	display:none; 
	position: absolute;
}

.ohafter:hover + .onhover, .ohinside:hover > .onhover {
   display:block; 
   z-index:2; 
	 padding:5px; margin:5px;
   background-color: rgba(0,0,40,.8); 
}

.input-validation-error { border: solid 1px red; }
.field-validation-error { color: red; }
.c2 { font-size: small; font-style: italic; }
.c3 { font-size: x-small; font-style: italic; }
@media print {
		body {background-color:white;color:black;}
		header,footer,.postcomment,.actionlink,.metablog,#login{ display:none;} 
	}
@media all and (min-width: 641px) {
	.bshpanel { display:block; }
  .bsh { display: none; }
  .c3 { display:initial; }
  .c3-alt { display:none; }
	}
@media all and (max-width: 640px) {
  
	.bshpanel { cursor:zoom-in; }

  footer {
    font-size: x-small;
  }

  body { font-size: smaller; }
	.c2 { display:initial; }
	.c2-alt { display:none; }
	.c3 { display:none; }
	.c3-alt { display:initial; }
	}

	@media all and (max-width: 350px) {
	  footer { font-size: xx-small;  }
	  .c2 { display:none; }
	  .c2-alt { display:initial; }
	}

}