@import url(http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext);
@import url(/App_Themes/clear/links.css);
@import url(/App_Themes/clear/input.css);
body {
	background-color: white;
	color: black;
	font-family: 'Josefin Sans', sans-serif;
	background: url("/App_Themes/images/splash-image-2.jpg") 0 0 repeat fixed ;
}
.tagname {   }

.tagname:hover { background-color: red; }

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    background: rgba( 255, 255, 255, .8 ) 
                url('/App_Themes/images/FhHRx.gif') 
                50% 50% 
                no-repeat;
}



header { float: left; }

h1 { display: inline-block; }

nav {

}
nav li { display: inline-block; }



main {
clear:both;
background-color: rgba(256,256,256,.5);
	}

footer {
	background: url("/App_Themes/images/splash-image-2.jpg") 0 0 repeat fixed ;
}

legend, .skillname {
	background-color: rgba(240,240,240,.8);
  }
#copyr { }

#gspacer { 
	background-color: rgba(209,209,209,.8);  }

fieldset, .performer {
	background-color: rgba(216,216,216,0.8);
} 

 h1 {
    background-color: rgba(0,0,0,.2); 
    padding: 1em;
    color:white;
    transition: color 1s;
    } 
  main h1 {
    background-color: rgba(256,256,256,.3); 
    padding: 1em;
    color:black;
    transition: color 1s;
    }
.postpreview {
	background-color: rgba(233,233,233,0.8);
	animation-name: slideInDown;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.postpreview > div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 2s;
    }

.postpreview:hover > div {
    overflow: auto;
	max-height: 15em;
	background-color: rgba(233,233,233,0.8);
}
.post { 
	background-color: rgba(256,256,256,0.8);
	}
.hiddenpost { background-color: rgba(160,160,160,0.5); }


.panel,.bigpanel, aside {
	background-color: rgba(200,200,200,.8); 
}

.usertitleref {
   background-color:rgba(256,256,212,0.6);
}
.editable {
	border: dashed rgb(200,200,256) 2px; 
	background-color: rgba(256,256,256,.8);
}

.notification {
	background-color: rgba(264,264,128,0.5);
	border: solid green 1px;
	}
.dirty { 
	background-color: rgba(256,228,128,0.5);
}
.error, #error {
	color: #f88;
	background-color: rgba(256,0,0,.5);
}
.validation-summary-errors{
	color: #f88;
	background-color: rgba(256,256,139,0.5);
}


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

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

a:active { 
	background-color:rgba(184,180,132,0.9);
}

.code {
	background-color: rgba(230,230,230,0.5);
}



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



	#logo { 
	}

	header {
	}
	nav {
	}
	main { 
		
	} 
	footer { 
		
	} 
}

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

	#logo { 
	}
	header {
	}

	nav {
	}
	main { 
		
	} 
	footer { 
		
	} 
}


.input-validation-error { border: solid 1px red; background-color: rgba(128,0,0,0.5);
    animation-name: hotzone;
    animation-duration: 4s;
    animation-iteration-count: infinite;
 }

.field-validation-error { color: rgb(256,200,200); background-color: rgba(128,0,0,0.5);
    animation-name: hotzone;
    animation-duration: 4s;
    animation-iteration-count: infinite;
 }

input[type='submit'].clickme { 
    animation-name: hotzone;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    }


@keyframes hotzone {
    from {
    background-color: rgba(230,230,230,.8);
    color: black;
	}
    50%  {background-color: rgba(256,150,150,.5);}
    to {
    background-color: rgba(230,230,230,.8);
    color: black;
    }
}