/* Reset */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

/* Global */

body {
	background-color:black;
	color:#D0D0D0;
	font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
	font-size:16px;
	background-image:url('../images/PencilOnDictionary.jpg');
	background-repeat:no-repeat;
	background-position:right top;
}

/* @font-face {

 font-family: aFont;

 src: url("../Eliensee.ttf");

} */


footer {
	clear:both;
	background-color:black;
	color:white;
	text-align:center;
	padding:50px 0 20px 0;
	font-size:13px;
}

footer a {
	color:#339966;
}

footer a:hover {
	color:#FF9933;
}

/* * {
   border: 1px solid red !important;
} */

a {
	text-decoration:none;
	color:#D0D0D0;
}

a:hover {
	color:#339966;
	color:white;
}

nav ul {
	list-style-type:none;
	background-color:rgba(16,16,16,0.2);
	width:100%;
	text-align:right;
	overflow:hidden;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}

nav ul li {
	display:inline-block;
	margin-right:80px;
	padding:20px;
}

nav ul li:hover {
	font-weight:bold;
}

.handle {
	width:100%;
	background-color:rgba(16,16,16,0.8);
	text-align:left;
	box-sizing:border-box;
	padding:15px 15px;
	cursor:pointer;
	display:none;
}

.posMenuIcon {
	float:right;
}

.MenuIcon {
	width:20px;
	height:2px;
	background-color:#D0D0D0;
	margin-bottom:5px;
}

h1 {
	font-family: 'Allura', "Brush Script MT", cursive;
	font-size:100px;
}


#wrapper {
	margin: 0px auto 0px auto;
	padding:0 0 0 40px;
	box-sizing: border-box;
}

#simple_wrap {
	width:1024px;
	margin: 0px auto 0px auto;
}

#simpler_wrap {
	width:1024px;
	margin: 0px auto 0px auto;	
}
.centre {
	text-align:center;
}

#leftbucket {
	float:left;
/*	width:50%;  */
	height:550px;
	font-size:20px;
	box-sizing: border-box;

}


#logo h1 {
	display:inline;
	vertical-align:bottom;
}

#logo img {
	vertical-align:top;
	padding:20px 20px 20px 0 ;
}

#byline {
	padding-left:10%;
}
#byline2 {
	font-size:20px;
	text-align:center
}

#buttonWrapper {
	clear:both;
	font-size:20px;
	opacity:0.6;
	box-sizing: border-box;
}

.button {
	display:inline;
	border-color:#F38414;
	border-style:solid;
	border-width:medium;
	padding:7px;
	clear:both;
	color:white;
/*	margin:0px 50px 0px 50px; */
	margin-right:10%;
}

.button:hover {
	border-color:white;
}

#bycomment {
	position:relative;
	margin:0px 0px 0px 5%;
	font-size:16px;
	width:45%;
	padding:20px;
	background-color:rgba(35,109,164,0.4);
}

/* ********************************* Form ********************************** */

#formControl {
	color:#336699;
	font-weight:bold;
	margin: 0px auto 0px auto;
	border:1px #F38414 solid;
	padding:20px;
	width:65%;
    border-radius: 10px; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color:white;
    font-size:18px;
    background-image:url('../images/WhitePencilOnDictionary.jpg');
    background-repeat:no-repeat;
    background-position:center;
}

#wrapright {
	color:white;
	font-weight:normal;
	font-size:16px;
	position:relative;
	float:right;
	margin-top:100px;
	width:200px;
	padding:20px;
	background-color:rgba(51,102,153,0.7);
	box-shadow: 10px 10px 15px #666666;
}

#wrapright2 {
	color:white;
	font-weight:normal;
	font-size:16px;
	position:relative;
	float:right;
	margin-top:100px;
	width:200px;
	padding:20px;
	background-color:rgba(51,102,153,0.7);
	box-shadow: 10px 10px 15px #666666;
}

.AlignImgRight {
	background-image:url('../images/WhitePencilOnDictionary.jpg');
	background-repeat:no-repeat;
	background-position:right;
}
fieldset {
	width:550px;
	margin: 0px auto 0px auto;
}


label {
	float:left;
	width:140px;
	text-align:right;
	padding-right:12px;
}

.formAlign {
	clear:both;
	padding-bottom:20px;
}

.formInput {
	border:1px #cccccc solid;
    border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	box-shadow: 1px 1px 5px #F38414 inset;
    padding:5px;
    background-color:white;
}

#UpldButtn {
	padding:10px;
	border-bottom-color:black;
	border:medium #336699 solid;
	border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 0px auto 0px auto;
}

.bttnAlign {
	margin:20px auto 0px auto;
	width:130px;
}

.disc {
	font-size:12px;
	color:#336699;
	font-weight:bold;
	padding:2px;
	background-color:#FFFFFF;
}


.button2 {
	display:inline;
	border-color:#003366;
	border-color:white;
	border-style:solid;
	border-width:medium;
	padding:10px;
	color:white;
	font-size:20px;
	background-color:black;
	opacity:0.7;
	font-size:14px;
	margin:1px;
	display:inline-block;
}

.button2:hover {
	color:white;
	opacity:1;
}

/*******************************  Proofreading marks page *********************/
#BasicWrap {
	background-color:white;
	width:100%;
	box-sizing: border-box;
}

#ListWrap {
	box-sizing: border-box;
	width:100%;
	margin: 0 auto;
	height:auto;
	color:white;
	background-image:url('../images/WhitePencilOnDictionary_1000.jpg');
	background-position:center;
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:center;
	padding-bottom:20px;
}

.StepRow {
	box-sizing: border-box;
	display:inline-block;
	margin:0 auto;
	text-align:center;
	width:1040px;
}

.StepBlock {
	float:left;
	text-align:left;
	box-sizing: border-box;
	font-size:18px;
	width:280px;
	height:280px;
	padding:20px;
	border:thin #FF6600 solid;
	margin-top:50px;
}

.marginRight {
	margin-right:100px;
}
.bgColor1 {
	background-color:rgba(51,102,153,0.7);
}
.bgColor2 {
	background-color:rgba(0,0,0,0.7);
}
.bgColor3 {
	background-color:rgba(255,102,0,0.7);
	border-color:#336699;
}
.listNo {
	font-weight:bold;
}

.listItem a {
	font-weight:bold;
	text-decoration:underline;
}

.listItem a:hover {
	color:#FF6600;
}

/*********************************** Proofreading marks page ************************/

#infowrap {
	float:right;
	width:40%;
}

.infoBox {
	color:white;
	padding:20px;
	background-color:rgba(51,153,102,0.8);
}

#SymbolWrap {
	color:white;
	margin-left:20px;
}
.SymBox {
	width:100px;
	height:100px;
    border-radius: 54px; 
    -webkit-border-radius: 54px;
    -moz-border-radius: 54px;
    -o-border-radius: 54px;
    background-color:#D0D0D0;
    background-color:rgba(51,102,153,0.3);
    border:20px #336699 solid;
    border:4px rgba(250,250,250,0.7) solid;
}

.DiscBox {
	font-size:15px;
	width:108px;
	height:108px;
    border-radius: 54px; 
    -webkit-border-radius: 54px;
    -moz-border-radius: 54px;
    -o-border-radius: 54px;
    background-color:#336699;
    background-color:rgba(51,153,102,0.5);
}
.imgAlign {
	height:100px;
	width:100px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.SymbolRow {
	clear:both;
	display:block;
}


.flip3d {
	display:inline-block;
	clear:both;
	width:108px;
	height:108px;
	padding:0px 30px 30px 0px;
}

.flip3d > .flipFront {
	position:absolute;
	
	-webkit-transform:perspective(600px) rotateY(0deg);
	-moz-transform:perspective(600px) rotateY(0deg);
	-ms-transform:perspective(600px) rotateY(0deg);
	-o-transform:perspective(600px) rotateY(0deg);
	transform:perspective(600px) rotateY(0deg);
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	transition: -webkit-transform 1s linear 0s;
	-webkit-transition: -webkit-transform 1s linear 0s;
	transition: -moz-transform 1s linear 0s;
	transition: transform 1s linear 0s;
}

.flip3d > .flipBack {
	position:absolute;
	
	-webkit-transform:perspective(600px) rotateY(180deg);
	-moz-transform:perspective(600px) rotateY(180deg);
	transform:perspective(600px) rotateY(180deg);
	
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	
	transition: -webkit-transform 1s linear 0s;
	-webkit-transition: -webkit-transform 1s linear 0s;
	transition: -moz-transform 1s linear 0s;
	transition: transform 1s linear 0s;
}

.flip3d:hover > .flipFront {
	-webkit-transform:perspective(600px) rotateY(-180deg);
	-moz-transform:perspective(600px) rotateY(-180deg);
	transform:perspective(600px) rotateY(-180deg);
}
.flip3d:hover > .flipBack {
	-webkit-transform:perspective(600px) rotateY(0deg);
	-moz-transform:perspective(600px) rotateY(0deg);
	transform:perspective(600px) rotateY(0deg);
}

.buffer {
	display:table-cell;
	height:108px;
	width:108px;
	text-align:center;
	vertical-align:middle;
	margin:0 auto;
	padding:0px 2px;
}


.alignCenter {
	margin:0 auto;
}

.TxtCntr {
	text-align:center;
}
.stndrdWidth {
	width:1024px;
}




.popUpPos {
	display:none;
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(35,109,164,0.5);
	width:100%;
	height:100%;
	z-index:100;
}
.popUpPos h3 {
	font-weight:bold;
}

#popUpWrap {
	width:500px;
	margin:250px auto;
	text-align:left;
	color:#003366;
}

#popUpContainer {
	background-color:white;
	padding: 20px;
    border-radius: 10px; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
}

#popUpContainer img {
	float:right;
}

#popUpContainer a {
	color:#003366;
	font-weight:bold;
	text-decoration:underline;
}

#popUpContainer a:hover {
	color:#339966;
}
.txtBold {
	font-weight:bold;
}

.br {
	display:none;
}