body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .9em; color: #fff; background-color: #000; margin: .5em 9em .5em 9em; } a:link { color: orange; } a:visited { color: orange; } a:hover { color: #000; background-color: orange; border-radius: 2px 10px 10px 10px; } a:active { color: #ff0000; } a img { border: none; } #alpha { font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 1.1em; font-weight: bold; } #alpha li { display: inline; border-right: thin solid white; padding: 0 .7em 0 .7em; line-height: 1.4; } #alpha li:last-child { border-right: none; } .birth { font-size: .85em; margin-bottom: .5em; } .blue { color: blue; } #cem-barbers { font-size: .9em; } #cem-bolivar { font-size: .9em; } #cem-dickinson { font-size: .8em; } #cem-dickinson-2 { font-size: .8em; } #cem-fairview { font-size: .8em; } #cem-johnston-1 { font-size: .7em; text-transform: uppercase; } #cem-magcreek { font-size: .8em; } #cem-magnolia { font-size: .8em; } #cem-perthuis { font-size: .8em; } #cem-trinity { font-size: .9em; } #content { } .dickinson-cell { width: 50%; vertical-align: top; font-size: .9em; } .double-list { float: left; padding-right: 2em; } #footer { clear: both; text-align: center; font-size: .8em; font-style: italic; margin-top: 1em; z-index: 5; } h2 { color: orange; font-family: 'Creepster', cursive; letter-spacing: 3px; font-style: italic; font-size: 2em; } h3 { color: orange; } #header { font-family: 'Creepster', cursive; color: orange; font-size: 3em; font-weight: bold; font-style: italic; text-align: center; padding-bottom: 3px; letter-spacing: 3px; } hr { border: 3px; border-style: solid; margin-right: 150px; margin-left: 150px; margin-top: 15px; margin-bottom: 15px; color: orange; background-color: orange; border-radius: 5px; } #inner-wrapper { border: 2px solid orange; outline: 1px solid #ffffdd; padding: 3px; border-radius: 3px; background-color: fff4ea; } .list { padding-left: 10px; line-height: 1.8; } #menu { margin: 0 auto; width: 80%; } .menu-bottom { width: 100%; padding: .2em; line-height: 1.6em; text-align: center; margin: 0 auto; } #menu-right { float: right; width: 18%; padding: .2em; line-height: 1.4em; } .notice { width: 60%; float: right; font-size: .9em; border: thin solid orange; border-radius: 10px; padding: 5px; margin-left: 1em; } .obit-date { text-align: center; } #outer-wrapper { border: 3px solid orange; width: 98%; margin: 0 auto; border-radius: 3px; } .search { font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; margin-top: .5em; width: 21em; } .search input[type=text] { margin-right: .5em; } .search input[type=button], input[type=submit], input[type=reset] { background-color: orange; border: 1px solid black; color: black; padding: 2px 15px; text-decoration: none; cursor: pointer; border-radius: 5px; border: thin solid black; outline: 2px solid orange; text-shadow: -1px -1px 2px #000; } .small { clear: left; border: 1px solid #004480; border-radius: 10px; font-size: .7em; padding: 5px; } .smaller { font-size: .7em; } .special { font-size: .9em; border: thin solid orange; border-radius: 10px; padding: 5px; margin: 0 auto; margin-top: 1em; } .surname { text-transform: uppercase; } table { border: 2px solid orange; border-collapse: collapse; margin-left: 2px; } td { padding: .2em 1em .2em .5em; } th { text-align: left; } tr { border: 1px solid #ccc; padding: .2em .4em; } .update { font-size: .8em; font-style: italic; } .wide { margin: .5em 0 .5em 0; } /* image special fx */ .frame { float: right; margin: 0 6em; } .polaroid a { background: white; display: inline; float: left; margin: 0 15px 30px; padding: 10px 10px 25px; text-align: center; text-decoration: none; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3); box-shadow: 0 4px 6px rgba(0,0,0,.3); -webkit-transition: all .15s linear; -moz-transition: all .15s linear; transition: all .15s linear; z-index: 0; position: relative; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); } .polaroid a:after { color: #333; font-size: .9em; content: attr(title); position: relative; top: 15px; } .polaroid a:nth-child(2n) { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); transform: rotate(4deg); } .polaroid a:nth-child(3n) { -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); transform: rotate(-24deg); } .polaroid a:nth-child(4n) { -webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); transform: rotate(14deg); } .polaroid a:nth-child(5n) { -webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); transform: rotate(-18deg); } .polaroid a:hover{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); z-index:10; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7); box-shadow: 0 10px 20px rgba(0,0,0,.7); } .polaroid img { display: block; height: 180px; width: auto; } /* Nav bar stuff */ .navbar { overflow: hidden; font-family: Arial; padding-left: .5em; margin-right: .5em; margin-left: .5em; } .navbar a { float: left; font-weight: bold; text-align: center; padding: 14px .7em; text-decoration: none; } .dropdown { float: left; overflow: hidden; padding-right: .5em; padding-left: .5em; } .dropdown .dropbtn { font-size: 1em; border: none; outline: none; color: orange; padding: 14px .5em; background-color: transparent; font-family: inherit; font-weight: bold; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { border-radius: 5px 25px 25px 25px; } .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 1; background-color:rgba(0, 0, 0, 0.8); } .dropdown-content a { float: none; padding: 12px 1em; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { } .dropdown:hover .dropdown-content { display: block; } @media only screen and (max-width : 1000px) { body { margin: 0;} } @media only screen and (min-width : 280px) and (max-width : 800px) { .frame { float: none; margin: 0;} .navbar { background-color: black; .navbar a { font-size: 1.5em;} .dropdown .dropbtn { font-size: 1.5em;} } @media only screen and (min-width : 280px) and (max-width : 500px) { hr { margin: 1em;} } .navbar a { float: none; width: 100%; font-size: 1.5em;} .dropdown { float: none;} .button { white-space: wrap; margin: 2em 0;} .dropdown .dropbtn { white-space: wrap; font-size: 1.5em;} h3 { clear: both; #header { font-size: 2.4em;} .polaroid img { height: auto; width: 50%;} }