@charset "utf-8";

/*
Hunter Green: #355e3b
Green: #9dc8a2
Gold: #FFD700
Light Yellow: #f0eedb
*/

body{/*background: url("assets/body_background.png") repeat; background-size: 100% auto;*/ background-color: #f0eedb;}
#page{position: relative; /*background-image: url("assets/courtroom.jpg"); background-size: 100% auto; background-color: #e0ede4; box-shadow: 0px 0px 7px #333*;*/
    margin-left: auto; margin-right: auto; max-width: 100%; background-color: #f0eedb;}

.content {/*background-image: url("assets/div_mid_t.png"); background-size: 100% 100%;*/
    /*border: solid 1px #000;*/
    /*background-color: #fff;*/ background-color: #f0eedb; min-height: 50px; margin-top: 2%; overflow: auto; max-width: 100%; min-width: 50%; text-align: center;}
.content ul{color: #413e3e; text-align: left; font-size: 16px; font-family: Tahoma,Geneva,sans-serif; margin: 0 15%;}
.in_content{display: inline-block; min-width: 300px; max-width: 1300px;}

.hunder_green{background-color: #355e3b;}
.gold{background-color: #FFD700;}
.green{background-color: #ABCBAF;}

.scrolling_image {position: relative;/* background: url("assets/courthouse1_wide.png") no-repeat center top; background-size: auto auto; overflow-x: hidden;*/
    height: 300px;}
.scroller {position: relative; max-width: 100%; min-height: 300px; margin: 0 auto;}
.scroll_area{ overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.scroller ul {position: relative; padding: 0; margin: 0;}
.scroller li {position: absolute; padding: auto; margin: auto; /*width: 900px;*/ list-style-type: none; text-align: center; background-color: #cce6ff;}


#special1{position: absolute; bottom: 20%; width: 25%; min-width: 400px; height: 150px; background-color: #000; opacity: .5; right: 17%;}
#special1_inside{position: absolute; bottom: 20%; width: 25%; min-width: 400px; height: 150px; right: 17%; border-left: solid 6px #ffd700; padding: 10px 17px;
    color: #eee; text-align: right; font-size: 3em; font-family: Tahoma,Geneva,sans-serif; font-style: normal; font-weight: 500; line-height: 99%; z-index: 10;}
.black_div{background: url("assets/black_t.png") repeat; background-size: 100% 100%;
    position: absolute; bottom: 0; height: 75px; padding-top: 20px; width: 25%; border-left: solid 1px #777; border-right: solid 1px #777;}
.black_div:hover{background: url("assets/black_t_hover.png") repeat; cursor: pointer;}

#special2{position: absolute; bottom: 0px; width: 100%; height: 50px; background-color: #dfaf20; opacity: .6; }
#special2_inside{position: absolute; bottom: 10px; width: 100%; color: #eee; text-align: center; font-size: 1.6em; font-family: Tahoma,Geneva,sans-serif; font-style: normal; font-weight: 500; z-index: 10;}

.img1{max-height:100%; display: inline-block;}
.img2{float: left; margin: 1.5%; border-radius: 3px; box-shadow: 3px 7px 10px #333d29}

/* Person Info */
#person_image{margin-left:35%; position: relative; height: 300px; width: 180px; display: inline-block;}
#portrait{position: absolute; right: 0; top: 0; border-radius: 3px; box-shadow: 3px 7px 10px #333d29; image-orientation: from-image;}
.rotate90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#person_link{position: absolute; left: 0; bottom: 0;}
#person_description{position: absolute; display: inline-block; min-width: 450px;}
#paul_facebook{background-image: url("assets/facebook_idle.png"); background-size: 100% 100%;
    position: absolute; right: 84px; bottom: 0; width: 40px; height: 40px;; border: none; background-color: transparent; cursor: pointer;}
#paul_facebook:hover{background-image: url("assets/facebook_hover.png");}
#paul_google{background-image: url("assets/google_idle.png"); background-size: 100% 100%;
    position: absolute; right: 42px; bottom: 0; width: 40px; height: 40px;; border: none; background-color: transparent; cursor: pointer;}
#paul_google:hover{background-image: url("assets/google_hover.png");}
#paul_avvo{background-image: url("assets/avvo_idle.png"); background-size: 100% 100%;
    position: absolute; right: 42px; bottom: 0; width: 40px; height: 40px; border: none; background-color: transparent; cursor: pointer;}
#paul_avvo:hover{background-image: url("assets/avvo_hover.png");}
#paul_yelp{background-image: url("assets/yelp_idle.png"); background-size: 100% 100%;
    position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; border: none; background-color: transparent; cursor: pointer;}
#paul_yelp:hover{background-image: url("assets/yelp_hover.png");}


/* header */
#header {/*background: url("assets/court_top.png") no-repeat; background-size: 100% auto;*/ background-color: #f0eedb;
    position: relative; float: top; height: 185px; top: 0; width: 100%; box-shadow: 0px 4px 15px #555; z-index: 11;}
#header_left{position: absolute; left: 18%; top: 20px; text-align: center;}
#header_links{position: absolute; right: 17%; top: 0; width: auto;}
#header_phone{position: absolute; right: 20%; bottom: 50px; width: auto;}

/* navigation div */
.absolute_nav {background-color: #413e3e; position: absolute; bottom: 0; left: 0; width:100%; height: 48px;}
.fixed_nav {background-color: #413e3e; position: fixed; top: 0; left: 0; width:100%; height: 48px;}

.nav_button {float: left; border: none; height: 100%; padding: 12px 20px; margin-right: 30px; color: #bbb; text-decoration: none; font-size: 1.3em;}
.nav_button:hover{color: #4680b9; cursor: pointer; background-color: #282525;}


.headings4 {float: left; padding: 5px; color: #262626; text-align: left; font-size: 1.2em; font-family: Tahoma,Geneva,sans-serif; font-weight: 500;}
.yellow_phone{position: absolute; float: left; left: 20px; top: 8px; padding-left: 10px; padding-right: 10px; text-align: center; font-size: 1.1em; background-color: #dfaf20; border-radius: 15px; color: #111; font-family: Tahoma,Geneva,sans-serif; font-weight: 500;}
#black_phone{float: left; background-image: url("assets/black_phone.png"); background-size: 100% 100%; width: 13px; height: 13px; border: none; margin: 4px; background-color: transparent;}

.facebook{float: left; background-image: url("assets/facebook_idle.png"); background-size: 100% 100%; width: 40px; height: 40px; margin:1px; margin-left: 5px; border: none; background-color: transparent; cursor: pointer;}
.facebook:hover{background-image: url("assets/facebook_hover.png");}
.google{float: left; background-image: url("assets/google_idle.png"); background-size: 100% 100%; width: 40px; height: 40px; margin:1px; border: none; background-color: transparent; cursor: pointer;}
.google:hover{background-image: url("assets/google_hover.png");}
.avvo{float: left; background-image: url("assets/avvo_idle.png"); background-size: 100% 100%; width: 40px; height: 40px; margin:1px; border: none; background-color: transparent; cursor: pointer;}
.avvo:hover{background-image: url("assets/avvo_hover.png");}
.yelp{float: left; background-image: url("assets/yelp_idle.png"); background-size: 100% 100%; width: 40px; height: 40px; margin:1px; border: none; background-color: transparent; cursor: pointer;}
.yelp:hover{background-image: url("assets/yelp_hover.png");}

/* Dropdown */

.dropdown_button {position: relative; float: left; border: none; margin-right: 30px; height: 100%; padding: 12px 20px; color: #bbb; text-decoration: none; font-size: 1.3em;}
.dropdown_button:hover > .drop_ul{display: block;}
.dropdown_button:hover{color: #4680b9; cursor: pointer; background-color: #282525;}

.drop_ul{/*background-image: url("assets/black_g.png"); background-size: 100% 100%;*/background-color: #282525;
    position: absolute; padding: 12px 20px; list-style: none; width: 214px; top: 48px; left: 0px; display: none; z-index: 10;}

.drop_ul li{vertical-align: baseline; border: none; text-align: left; padding: 4px 0px; color: #bbb; text-decoration: none; font-size: 17px; }

.drop_ul li:hover{color: #4680b9;}

/* commonly used */
.hidden_hr{visibility: hidden;}
.banner_text{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; line-height: 99%; border-bottom: solid 3px #222;}
.banner_text2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif; line-height: 99%;}
#phone{color: #4680b9; font-size: 38px; font-family:Franklin Gothic}
.labels{color: #413e3e; text-align: left; font-size: 24px; font-weight: 500; font-family: Cinze, serif; line-height: 99%;}
.headings1 {color: #413e3e; text-align: center; font-size: 50px; font-family: Arapey,Georgia,serif; font-style: normal; font-weight: 500; margin: 0 25px; line-height: 1.1;}
.headings2 {color: #413e3e; text-align: center; font-size: 2em; font-family: Arapey,Georgia,serif; font-style: normal; font-weight: 500; margin: 0 25px; line-height: 1.1;}
.headings3 {color: #413e3e; text-align: center; font-size: 1.6em; font-family: Tahoma,Geneva,sans-serif; font-style: normal; font-weight: 500; margin: 0 25px;}
.blue_title_text{margin: 20px 0;}
.text {color: #413e3e; text-align: left; font-size: 16px; font-family: Tahoma,Geneva,sans-serif; margin: 0 15%;}
.menu_ul{vertical-align: baseline; list-style: none; padding: 0 25px;}
.menu_li{vertical-align: baseline; display: list-item; border-bottom: solid 1px #444; padding: 4px 0;}
.a1 {color: #413e3e; text-align: left; font-size: 16px; font-family: Tahoma,Geneva,sans-serif;}
.a1:hover {color: #413e3e; text-decoration: underline;}
#form {margin-top: 15px;}
input{background-color: #f6f2ee; border-radius: 5px;}
textarea{background-color: #f6f2ee; border-radius: 5px;}
#submit_button{border: none; color: #eee; font-size: 20px; border-radius: 15px; padding: 5px 50px; background-color: #808080;}
#submit_button:hover{background-color: #b3b3b3;}

.headings1 a {color: #29916f;}

/* define different styles for different monitors */
@media screen and (max-width: 1450px) {
    #header_links{right: 1%; }
    #header_phone{right: 1%; bottom: 43px;}
}
@media screen and (max-width: 1000px) {
    .banner_text{font-size: 30px;}
    .banner_text2{font-size: 25px;}
    #header_left{top: 45px;}
    #phone{font-size: 28px;}
}

.name{color:#00F; font-weight: bold; font-size: 14px; font-family: Arial, Geneva, sans-serif;}

.msg{color:#390; font-size: 14px; font-family: "Times New Roman", Times, serif;}
.error{position: absolute; top: 27%; left: 20%;}

#ratings_img{margin-left: 25px;}

/* elements on the right */
.heading_div{background-image: url("assets/black_g_right.png"); background-size: 100% 100%;
    position: absolute; float: left; left: -1px; top: -20px; height: 40px; width: 325px; padding-top: 3px; padding-left: 3px; color: #ddd; text-align: left; font-size: 1.6em; font-family: Tahoma,Geneva,sans-serif; font-style: normal; font-weight: 500;}
#white_phone{float: left; background-image: url("assets/white_phone.png"); background-size: 100% 100%; width: 21px; height: 21px; border: none; margin: 4px; background-color: transparent;}
#white_hammer{float: left; background-image: url("assets/white_hammer.png"); background-size: 100% 100%; width: 21px; height: 21px; border: none; margin: 4px; background-color: transparent;}

#side_div {width: 360px; float: right; margin-right: 1%; padding-left: 1%;}
.side_block {position: relative; background-image: url("assets/black_g.png"); background-size: 100% 100%;
    background-color: #e5e1cd; border: solid 1px #444; margin-bottom: 15px;}
#description {height: 20%; width: 90%;}/*form field*/

.button {background-image: url("assets/button_idle_lighter.png"); background-size: 100% 100%;
    border: none; padding: 5px 15px; margin: 5px; color: #dbd1bd; text-decoration: none; font-size: 1.3em;}
.button:hover{background-image: url("assets/button_hover_lighter.png"); color: #f6f3ef;}

#link{color: #282824; text-decoration: none;}
#link:hover{color: #6b6b61; text-decoration: underline;}

/* Practice Areas */
#practice_areas {position: relative; /*#edeade*/ max-width: 70%; min-width: 50%; margin-left: auto; margin-right: auto; border-top: solid 1px #b0db88; border-bottom: solid 1px #9ddb7c; box-shadow: 1px 2px 3px rgba(5, 143, 49, 0.47);}
.side_button{display:block; width: 80%; /*background-image: url("assets/button_idle_lighter.png"); background-size: 100% 100%;*/background-size: 100% 100%; background-color: rgba(48, 136, 69, 0.6);/*#c0b48c;*/
    text-align: left; border: none; padding: 5px 15px; margin: 5px; margin-left: 10%; color: #304533; text-decoration: none; font-size: 1.3em;}
.side_button:hover{background-color: #2a853c;/*#a4935b;*/ color: #272525;}

/* footer */
#footer {position: absolute; /*background-image: url("assets/div_mid_t.png"); background-size: 100% 100%;*/;
    background-color: #5b5757; border-top: solid 2px #a8a4a4;
    color: #eee; height: auto; width: 100%; padding: 1%; text-align: left;}

/* errors */
#validation {color: #ff9900; border: 2px solid #ff9900; text-align: left; padding-left: 40%; font-size: 16px; font-family: Tahoma,Geneva,sans-serif;}
#validation ul{color: #ff9900; text-align: left; margin: 0 0;}
/*.error {display: block; color: #ff9900; border: 2px solid #ff9900; margin: 2%; padding: 1%;}
.error ul { padding-left: 1%; }*/

/* profile view */


/* Assets Sources:
background: https://pixabay.com/en/courtroom-benches-seats-law-898931/
textures: http://bgfons.com/img/materials
content:
http://woodmerelaw.avvosites.com/
http://www.williamsburgcriminallaw.com/

SmithStrong site: http://www.smithstrong.com/