@font-face {
    font-family: 'umbrageregular';
    src: url('Graphics/Fonts/umbrage2.eot');
    src: url('Graphics/Fonts/umbrage2.eot?#iefix') format('embedded-opentype'),
         url('Graphics/Fonts/umbrage2.woff') format('woff'),
         url('Graphics/Fonts/umbrage2.ttf') format('truetype'),
         url('Graphics/Fonts/umbrage2.svg#umbrageregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'aileronregular';
    src: url('Graphics/Fonts/aileron-regular-webfont-webfont.eot');
    src: url('Graphics/Fonts/aileron-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('Graphics/Fonts/aileron-regular-webfont-webfont.woff2') format('woff2'),
         url('Graphics/Fonts/aileron-regular-webfont-webfont.woff') format('woff'),
         url('Graphics/Fonts/aileron-regular-webfont-webfont.ttf') format('truetype'),
         url('Graphics/Fonts/aileron-regular-webfont-webfont.svg#aileronregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pop_warnerregular';
    src: url('Graphics/Fonts/pop_warner-webfont.eot');
    src: url('Graphics/Fonts/pop_warner-webfont.eot?#iefix') format('embedded-opentype'),
         url('Graphics/Fonts/pop_warner-webfont.woff2') format('woff2'),
         url('Graphics/Fonts/pop_warner-webfont.woff') format('woff'),
         url('Graphics/Fonts/pop_warner-webfont.ttf') format('truetype'),
         url('Graphics/Fonts/pop_warner-webfont.svg#pop_warnerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Aileron-Heavy';
    src: url('Graphics/Fonts/Aileron-Heavy-webfont.eot');
    src: url('Graphics/Fonts/Aileron-Heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('Graphics/Fonts/Aileron-Heavy-webfont.woff') format('woff'),
         url('Graphics/Fonts/Aileron-Heavy-webfont.ttf') format('truetype'),
         url('Graphics/Fonts/Aileron-Heavy-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


html{
height: 100%;
}
body{
height: 100%;
}
#PageForm{
height: 100%;
border: 0px solid white;
}

body{
font-family: Aileron-Heavy;
background-color: rgb(52, 52, 52);
color: white;
font-size: 16pt;
max-width: 1000px;
margin: 0 auto;
border: 0px solid red;
}

#Page{
width: 100%;
min-width: 300px;
min-height: 100%;
margin: 0 auto;
color: white;
background-color: black;
border: 0px solid blue;
/*z-index: -1;*/
position: relative;
background-image: url('Graphics/black_pattern09a.jpg');
}
#Page a:link, #Page a:visited, #Page a:active{
color: grey;
}
#Page  a:hover{
color: white;
}

#Header{
min-width: 300px;
overflow: hidden;
position: relative;
z-index: 3;
padding: 4px;
background-image: url('Graphics/metal8.jpg');*/
border-width: 0px 2px 2px 2px;
box-shadow: inset 0 0 10px 5px black;
-moz-box-shadow: inset 0 0 10px 5px black;
-webkit-box-shadow: inset 0 0 10px 5px black;*/
}
#Footer{
min-width: 300px;
text-align: center;
/*height: 29px;*/
/*overflow: hidden;*/
padding: 4px;
border-width: 0px 2px 2px 2px;
box-shadow: inset 0 0 10px 5px black;
-moz-box-shadow: inset 0 0 10px 5px black;
-webkit-box-shadow: inset 0 0 10px 5px black;*/
}
#Footer, #Footer a:link, #Footer a:visited, #Footer a:active{
font-size: 14pt;
color: grey;
}
#Footer  a:hover{
color: white;
}
.Thanks{
color: lightgrey;
}

#LeftBlock{
left: 0px;
top: 0px;
width: 116px;
height: 100%;
background-color: white;
position: absolute;
font-size: 14pt;
background-image: url('Graphics/metal.jpg');
border: 0px solid red;
box-shadow: inset 0 0 10px 5px black;
-moz-box-shadow: inset 0 0 10px 5px black;
-webkit-box-shadow: inset 0 0 10px 5px black;
}
#MiddleBlock{
z-index: 1;
margin: 0 auto;
top: 0px;
max-width: 768px;
position: relative;
text-align: center;
z-index: 2;
border: 0px solid yellow;
background-image: url('Graphics/black_pattern09a.jpg');
/*border: 0px solid black;
border-width: 0px 2px 2px 2px;
box-shadow: 0 0 10px 5px black;
-moz-box-shadow: 0 0 10px 5px black;
-webkit-box-shadow: 0 0 10px 5px black;*/
}
#RightBlock{
right: 0px;
top: 0px;
width: 116px;
height: 100%;
background-color: white;
position: absolute;
z-index: 0;
font-size: 14pt;
background-image: url('Graphics/metal.jpg');
border: 0px solid red;
box-shadow: inset 0 0 10px 5px black;
-moz-box-shadow: inset 0 0 10px 5px black;
-webkit-box-shadow: inset 0 0 10px 5px black;
}

.PageHead1{
max-width: 768px;
margin: 0 auto;
height: auto;
border: 0px solid yellow;
/*box-shadow: 0 4px 4px -2px black;
-moz-box-shadow: 0 4px 4px -2px black;
-webkit-box-shadow: 0 4px 4px -2px black;*/
}
.PageHead1Left{
float: left;
border: 0px solid red;
/*background: URL( 'Graphics/return.gif' );*/
background-repeat: no-repeat;
}
.PageHead1Middle{
overflow: hidden;
padding-top: 6px;
text-align: center;
border: 0px solid red;
font-family: umbrageregular;
font-size: 40px;
line-height: 30px;
}
.PageHead1Middle a:link, .PageHead1Middle a:visited, .PageHead1Middle a:active{
color: grey;
}
.PageHead1Right{
float: right;
border: 0px solid blue;
/*background: URL( 'Graphics/search.gif' );*/
background-repeat: no-repeat;
}
.HeadLinkLeft, .HeadLinkRight{
width: 240px;
height: 49px;
display: inline-block;
border: 0px solid red;
}
.HeadLinkText, .Title{
display: inline-block;
}
.HeadLinkText, .HeadLinkTextInput input, .Title{
border: 2px solid grey;
text-align: center;
font-family: pop_warnerregular;
font-size: 40px;
color: white;
background-color: black;
border-radius: 8px;
padding: 2px 6px 0px 10px;
margin: 0;
}
.HeadLinkText, .HeadLinkTextInput input{
width: 160px;
cursor: pointer;
box-sizing: border-box;
}
.Title{

}

.Photo{
max-width: 800px;
margin: 0 auto;
}
.Photo img{
border: 0px solid white;
margin-bottom: 8px;
/*box-shadow: 0 0 2px 5px black;
-moz-box-shadow: 0 0 2px 5px black;
-webkit-box-shadow: 0 0 8px 6px rgb( 51,51,51 );*/
}
.ThumbBlock{
border: 0px solid green;
margin: 0 auto;
}
.Thumb{
display: inline-block;
}
.Thumb img{
border: 0px solid white;
/*width: 180px;*/
margin: 4px;
/*box-shadow: 0 0 2px 5px black;
-moz-box-shadow: 0 0 2px 5px black;
-webkit-box-shadow: 0 0 8px 6px rgb( 51,51,51 );*/
}

img{
max-width: 100%;
height: auto;
}

textarea{
width: 100%;
border: 0px solid red;
background: yellow;
font-family: Aileron-Heavy;
font-size: 24px;
color: red;
resize: none;
overflow: hidden;
box-sizing: border-box;
vertical-align: top;
margin: 0px;
line-height:24px;
}
.PhotoCommentEdit textarea{
min-height: 60px;
font-size: 18px;
padding: 0 8px 0 8px;
}
.CommentEdit textarea{
padding: 0 4px 0 4px;
}
table, tr, td{
margin: 0;
padding: 0;
border-collapse: collapse;
}

select{
width: 100%;
}
.UploadChoice{
width:300px;
font-size: 17pt;
font-family: Aileron-Heavy;
}
select, input, .UploadSubmit{
color: red;
background-color: yellow;
border: 0;
font-family: Aileron-Heavy;

}
select, .UploadSubmit{
cursor: pointer;
}
.SaveButton input, .UploadSubmit{
background-color: red;
color: yellow;
cursor: pointer;
font-family: Aileron-Heavy;
font-size: 24px;
line-height: 32px;
}

.Login input[type=submit]{
cursor: pointer;
}

.ResultsButton input, .SearchButton input{
background-repeat: no-repeat;
width: 240px;
height: 49px;
cursor: pointer;
}
.ResultsButton input{
background: URL( 'Graphics/results.gif' );
}
.SearchButton input{
background: URL( 'Graphics/search.gif' );
}

.Section, .ResultSection{
border: 0px solid green;
/*background-color: dimgrey;*/
text-align: left;
margin: 0 auto;
color: black;
}
.Section{
margin-bottom: 0px;
border: 0px solid green;
/*background-image: url('Graphics/black_pattern09a.jpg');*/
}

.FieldBlock{
border: 0px solid yellow;
border-bottom: 0px solid silver;
padding: 0 8px 0 8px;
}
.HeadingFieldBlock{
/*background-color: black;*/
border: 0px solid purple;
padding: 0 8px 0 8px;
}

.TextDark, .TextDark a:link, .TextDark a:visited, .TextDark a:active{
color: black;
}
.TextDark a:hover{
color: white;
}

.Field{
color: black;
margin-left: 0;
padding: 0px 4px 2px 4px;
border: 0px solid red;
display: inline-block;
font-family: umbrageregular;
font-size: 36px;
line-height: 26px;
width: 100%; /* expand field name across screen */
background-image: url('Graphics/metal2a.jpg');
box-sizing: border-box;
}
.FieldVal{
width: 100%; /* expand field name across screen */
color: white;
}
.FieldVal, .FieldEdit{
border: 0px solid red;
padding: 0 0px 0 0px;
/*white-space: pre-wrap;*/
display: inline-block;
/*border-bottom: 4px solid rgb(255, 245, 230);*/
}
.FieldVal, .FieldEdit input, .FieldVal select, .FieldVal input, .Login input{
font-size: 24px;
/*line-height: 32px;*/
}
.FieldEdit, .FieldEdit input{
width: 100%;
}
.FieldEdit input{
padding: 0 4px 0 4px;
box-sizing: border-box;
}
.FieldAdmin{
color: red;
/*font-size: 16px;*/
}
.SubField{
color: dimgrey;
margin-right: 4px;
padding-left: 4px;
}
.EditButtons{
float: right;
}

.HeadingField{
color: black;
margin: 0;
padding: 0px 4px 4px 4px;
font-family: umbrageregular;
font-size: 66px;
line-height: 50px;
display: inline-block;
width: 100%; /* expand field name across screen */
background-image: url('Graphics/metal2a.jpg');
box-sizing: border-box;
}
.HeadingFieldVal{
color: white;
font-family: umbrageregular;
padding: 0px 0px 0px 0px;
display: inline-block;
border: 0px solid white;
/*border-bottom: 4px solid rgb(255, 245, 230);*/
width: 100%; /* expand field name across screen */
}
.HeadingFieldVal, .HeadingFieldVal select{
font-size: 60px;
}

.Comment, .PhotoComment{
white-space: pre-wrap;
text-align: left;
border: 0px solid purple;
}
.Comment{
/*background-color: dimgrey;*/
color: white;
border: 0px solid white;
width: 100%;
padding: 0px 0px 2px 0px;
font-size: 24px;
/*background-image: url('Graphics/black_pattern09a.jpg');*/
}
.Owner{
font-size: 18px;
color: white;
}
.PhotoComment{
padding: 0 8px 0 8px;
font-size: 18px;
}

a:link, a:visited, a:hover, a:active{ 
text-decoration: none;
color: white;
}

.Editing, .Editing a:link, .Editing a:visited, .Editing a:hover, .Editing a:active{
color: yellow;
border: 0px solid purple;
font-size: 18pt;
}

.ResultBlock{
width: 100%;
border: 0px solid black;
padding: 4px;
box-sizing: border-box;
background: white;
background-image: url('Graphics/metal2b.jpg');
text-align: left;
box-shadow: 0 0 3px 3px dimgrey;
-moz-box-shadow: 0 0 3px 3px dimgrey;
-webkit-box-shadow: 0 0 3px 3px dimgrey;
z-index: 2;
}
a:hover .ResultBlock{

}
.ResultPhoto{
display: inline-block;
width: 164px;
max-height: 124px;
overflow: hidden;
vertical-align: top;
text-align: center;
color: white;
font-size: 12pt;
z-index: 1;
}
.ResultPhoto img{
border: 2px solid dimgrey;
max-width: 160px;
}
.ResultFields{
display: inline-block;
border: 0px solid purple;
max-width: 584px;
padding: 0 4px 0 4px;
}
.ResultFieldsLink{
display: inline-block;
white-space: nowrap;

border: 1px solid purple;
width: auto;
}
.Result{
font-size: 12pt;
color: white;
}
.ResultVal{
font-size: 12pt;
color: black;
}

hr { 
display: block;
margin-top: 8px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
color: black;
}

@media screen and ( max-width: 599px ) {
.Thumb img{
width: 144px;
}}

@media screen and ( max-width: 479px ) {
.PageHead1Left{
/*background: URL( 'Graphics/return2.gif' );
background-repeat: no-repeat;*/
}
.HeadLinkLeft{
width: 70px;
}
.HeadLinkText, .HeadLinkTextInput input, .Title{
font-size: 28px;
padding: 2px 2px 0px 3px;
}
.HeadLinkText, .HeadLinkTextInput input{
width: 106px;
}
.PageHead1Middle{
font-size: 20pt;
padding-top: 2px;
}
.HeadingField{
font-size: 40px;
line-height: 28px;
}
.HeadingFieldVal, .HeadingFieldVal select{
font-size: 30px;
}
.Field{
font-size: 28px;
line-height: 24px;
}
.FieldVal, .FieldVal select, .Comment{
font-size: 20px;
}
.Editing, .Editing a:link, .Editing a:visited, .Editing a:hover, .Editing a:active{
font-size: 24pt;
}
.Thumb img{
width: 144px;
}}