yavsc/web/App_Themes/style.css

@import url(/App_Themes/animate.css);
body {
	padding: 0;
	margin: 0;
}
body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}
.rate {
	border-style: solid;
	border-width: 1px;
	margin:.1em;
	padding:.1em;
	display: inline-block;
	width:5em;
	text-align:center; 
}

header {
	transition: margin 2s, padding 2s;
	padding: 2em;
	margin: 0;
	}

header h1 {
	transition: padding 2s;
}

nav {
   transition: margin 2s, size 2s;
	padding: 2em;
	justify-content: space-around;
}
div { 
	vertical-align: text-top;
	transition: margin 2s, padding 2s, height 2s; }
main {
	transition: margin 2s, padding 2s;
	margin: 2em;
	padding: 2em;
	display: block;
}
main video, main img {
	max-width:100%;
	max-height:75%;
	padding: 1em;
	}

footer {
	transition: margin 2s, padding 2s;
	padding: 2em;
	display: block;
	clear: both;
	font-size: smaller;
	justify-content: space-around;
}

footer p { display:inline-block; } 

footer img { max-height: 3em; vertical-align: middle; }

a img, h1 img, .menuitem img  { vertical-align: middle; }

fieldset {
	border-style: solid; 
	border-width: 1px;
} 
aside { 
	display: inline-block;
}

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

ul.preview li:nth-child(n) {
	display:none;
}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/App_Themes/images/FhHRx.gif') 
                50% 50% 
                no-repeat;
    overflow:   auto; 
}

.switch { cursor: pointer; }

.dispmodal {
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    right: 0;
    width:      100%;
    max-height: 100%;
    overflow-y:   auto; 
    overflow-x:   hidden; 
}

.postpreview video, .postpreview img {
	max-height: 3em;
	padding: .3em;
	}
.post { 
	display:block;
	padding: 1em;
	}

.fullwidth { width: 100%;  }
textarea.fullwidth { min-height:10em; }

.thanks  { 
	max-width: 10%;
	text-align: center;
	font-size:smaller;
	display:inline;
	bottom:0;
}

.spanel {
  max-width: 18em;
    display: inline-block;
  }
 fieldset {
    display: inline-block;
  padding: .3em;
}
.xspanel {
  max-width:13em;
  display: inline-block;
}
.xxspanel {
  max-width:7em;
  display: inline-block;
}

.hint {
	display: inline;
	font-style: italic;
	font-size: smaller;
}

.hint::before { 
content: "(";
}

.hint::after { 
content: ")";
}

.usertitleref {
	padding: 1em;
}

.editable {
	margin: .5em; 
	min-height:1em; 
	border-style: dashed;
	border-width: 2px; 
}

.notification {
	font-size: large;
	border-style: solid;
	border-width: 1px;
	padding: 1em;
	margin:1em;
	padding:1em;
	}

.error, #error {
	font-size: large;
}

.hidden { display:none; }

.iconsmall { max-height: 1.3em; max-width: 1.3em; } 

.photo { width: 100%; }
.blogbanner { float: left; top:0; }
.subtitle { font-size:small; font-style: italic; }

nav li { display: inline-block; }

footer a {
	padding:1em;
  }

footer p { display:inline-block; } 

footer img { max-height: 3em; vertical-align: middle; }
a img, h1 img, .menuitem img  { vertical-align: middle; }


legend {
	padding:.5em;
  }

#copyr { text-align: center; display: block;  }

#gspacer { 
	margin:1em; padding:1em; 
	display: inline-block }

input, select, textarea { 
	border-style: solid;
	border-width:1px;
}


.code {
	font-family: "monospace";
	white-space: pre-wrap;
}
.bigavatar{ 
 vertical-align: middle;
 max-height: 5em; max-width: 5em; 
 }
.avatar { 
 vertical-align: middle;
 max-height: 1.3em; max-width: 1.3em; 
 }

.comment {
	font-size: smaller;
	}

.username {
	border-style: solid;
	border-width: 1px;
	font-size: large;
	font-weight: bold;
	display: inline-block; 
	animation-name: wobble;
    animation-duration: 4s;
    animation-iteration-count: 1;
    padding:1em;
}

.skillname,  .pagelink { 
	padding:.5em;
	margin:.25em;
	max-width: 24em; 
	text-align: center;
	display: inline-block; 
	border-style: solid;
	border-width: 1px;
	font-size: large;
} 
.performer , .availability { text-align: center; padding: 1em; }

.c2 { font-size: small; font-style: italic; }

.c3 { font-size: x-small; font-style: italic; }


h2 select { font-size: large; }

ul.editablelist { 
	display: inline;
	}
ul.editablelist>li { 
	display: inline;
	margin:.5em;
	padding:.2em;
	border: solid grey 1px;
	cursor:pointer;
}

ul.editablelist>li:after { 
  font-family: 'FontAwesome';
  content: " ";
}

ul.editablelist>li:hover { 
	background-color: rgba(128,0,0,0.5);
}

ul.editablelist>li:hover:after { 
  font-family: 'FontAwesome';
  content: "\f00d";
}
  .bsh { display: none; }
  .c3 { display:initial; }
  .c3-alt { display:none; }

  @media all and (min-width: 640px) {

div.panel { 
	display:inline-block;
	} 

}
.high-z-index { z-index: 99; }

@media print {
		body {background-color:white;color:black;}
		.control, nav { display:none;} 
	}

@media all and (max-width: 640px) {

		
#avatar { 
 	margin:.5em;
 }


	nav {
	margin: 1em;
		padding: 1em;
	}
	main { 
	margin: 1em;
	padding: 1em;
	} 
	footer { 
	margin: 1em;
	padding: 1em;
	} 
	footer a {
	margin:.5em;
	padding:.5em;
  }

  .notification { 
	padding: .5em;
	margin:.5em;
	padding:.5em;
	max-height: 100%;
	overflow-y: auto;
 }
	.menuitem { display: block; }

	.post { 
	margin:.3em;
	padding:.3em;
	}
	.usertitleref{ 
	padding:.3em;
	}
  .bshpanel { cursor:zoom-in; }

	.c2 { display:initial; }
	.c2-alt { display:none; }
	.c3 { display:none; }
	.c3-alt { display:initial; }
}

@media all and (max-width: 380px) {


header h1, header a { padding:.2em;}

	nav {
	margin: .5em;
		padding: .5em;
	}

	main { 
	margin: .5em;
	    padding: .5em;
	} 
	footer { 
	margin: .5em;
	    padding: .5em;
	} 
	footer a {
	margin:.2em;
	padding:.2em;
  }
  .c2 { display:none; }
  .c2-alt { display:initial; }

}