/* ==================================================== */
/* CSS FOR ABOUT US PAGE: */
/* ==================================================== */

* {
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing: border-box;
}

/* DEFAULT PAGE LINK COLORS: */
a { text-decoration:none; }
a:link { color:#770000; }
a:visited { color:#90c; }
a:hover { color:#f90; }
a:active { color:#f00; }

body { 
min-width:350px;
margin:0px; 
background-color:#cce6ff;
background-image: url("Resources/watercolor-ivory.jpg"); 
height:100%;
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 18px;
}

/* ==================================================== */
/* TOP BANNER: */
/* ==================================================== */

#top_banner {
position: fixed; 
text-align:center;
left:0px;
top:0px;
width:100%;
min-width:350px;
height:80px;
background-color: #5b1a1e;
    background: -ms-linear-gradient(#4e0101, #5b1a1e, #4e0101); /* For IE (does it work?) */
    background: -webkit-linear-gradient(#4e0101, #5b1a1e, #4e0101); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#4e0101, #5b1a1e, #4e0101); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#4e0101, #5b1a1e, #4e0101); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#4e0101, #5b1a1e, #4e0101); /* Standard syntax (must be last) */
-ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: -0px 5px 5px rgba(0, 0, 0, 0.5);
z-index:100;
display:block;
}

#dg_logo {
width:80px;
padding-top:12.5px;
padding-bottom:5px;
margin-right:5px;
}

#dg_name {
width:375px;
padding-bottom:13px;
}

#up_down_arrow {
position:fixed;
left:25px;
top:28px;
width:80px;
cursor:pointer;
z-index:205;
}

/* ==================================================== */
/* TOP LINKS PANELS: */
/* ==================================================== */

#top_links_panel { 
position:fixed;
left:0px;
top:80px;
height:34px;
width:100%;
min-width:350px;
background-color:#af7804;
padding-top:4px;

text-align:center;
font-family: 'Open Sans', 'Verdana Bold', sans-serif;
font-weight: 600; 
font-size: 18px;
line-height: 26px;
color:#ffffff;

-ms-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: -0px 15px 15px rgba(0, 0, 0, 0.7);
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
display:block;
z-index:90;
}

a.top_links_colors:link { color:#ffff00; }
a.top_links_colors:visited { color:#ffcc00; }
a.top_links_colors:hover { color:#ffffff; }
a.top_links_colors:active { color:#ffff00; }


/* ==================================================== */
/* CONTAINER DIV: */
/* ==================================================== */

#container_div {
position:relative;
width:100%;
max-width:1300px;
top:160px;
height:760px;
background-color:#dddddd;
margin:auto;
text-align:center;
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
}


/* ==================================================== */
/* ABOUT BOX: */
/* ==================================================== */

#about_box_div {
/* position:relative; */
float:left;
width:28%;
height:100%;
/* background-color:yellow; */
background-image:url("Resources/watercolor-white-1.jpg");
padding-left:90px;
padding-right:90px;
}

#dg_photo {
width:100%;
max-width:180px;
}


/* ==================================================== */
/* HISTORY BOX: */
/* ==================================================== */

#history_box_div {
/* position:relative; */
width:72%;
height:100%;
float:left;
/* left:40px; */
/* background-color:#ccffff; */
background-image:url("Resources/watercolor-powder-blue-1.jpg");
padding-left:30px;
padding-right:30px;
}

#copyright_div {
width:100%;
height:80px;
float:left;
padding-top:10px;
/* background-color:orange; */
}

#pali_photo {
width:100%
}

/* ==================================================== */

.headline_text {
font-family: 'Bilbo Swash Caps', 'Handwriting', cursive; 
font-weight: 400;
font-size: 60px;
line-height:30px;
color:#595959;
text-align:left;
}

.subhead_text {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 28px;
line-height: 38px;
color:#595959;
text-align:left;
}

.body_text {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 18px;
line-height:28px;
color:#595959;
text-align: left;
}

.copyright_text {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 16px;
line-height:26px;
color:#595959;
text-align: center;
}

/* ==================================================== */
/* FEEDBACK WINDOW: */
/* ==================================================== */

#feedback_window {
position: fixed;
display: none; /* Hidden by default */
width: 100%;
height: 450px;
top: 35%;
text-align: center;
padding-top: 20px;
background-color: rgba(255,255,0,0.8);
z-index: 50;
cursor: pointer;
}


/* ==================================================== */
/* MEDIA QUERIES: */
/* ==================================================== */

@media screen and (max-width:1160px)
{
	#about_box_div { padding-left:70px; padding-right:70px; }
}
@media screen and (max-width:1100px)
{
	#top_banner { height:80px; }
	#dg_name { width:375px; }
	#dg_logo { width:80px; }
	#up_down_arrow { top:28px; }
}

@media screen and (max-width:1050px)
{
	#about_box_div { padding-left:60px; padding-right:60px; }
}

@media screen and (max-width:950px)
{
	#about_box_div { padding-left:50px; padding-right:50px; }
}

@media screen and (max-width:900px)
{
	#top_banner { height:65px; }
	#dg_name { width:325px; padding-top:16px; }
	#dg_logo { width:65px; padding-top:0px; padding-bottom:9px; }
	#up_down_arrow { top:22px; width:75px; }
	#top_links_panel { top:65px; }
	#container_div { top:145px; }
	.subhead_text { font-size: 26px; line-height: 36px; }
	#about_box_div { padding-left:40px; padding-right:40px; }
}

@media screen and (max-width:800px)
{
	#up_down_arrow { top:22px; width:70px; }
	#about_box_div { width:35%; }
	#history_box_div { width:65%; }
}

@media screen and (max-width:750px)
{
	#about_box_div { width:38%; }
	#history_box_div { width:62%; }
}

@media screen and (max-width:700px)
{
	#dg_logo { width:62px; padding-top:0px; padding-bottom:9px; margin-left: 30px; }
	#about_box_div { width:40%; }
	#history_box_div { width:60%; }
}
@media screen and (max-width:625px)
{
	#dg_name { width:300px; padding-top:18px; }
	#dg_logo { width:60px; padding-top:0px; padding-bottom:9px; margin-left: 50px; }
	.subhead_text { font-size: 24px; line-height: 34px; }
}

@media screen and (max-width:600px)
{
	#about_box_div { width:44%; }
	#history_box_div { width:56%; }
}

@media screen and (max-width:550px)
{
	#dg_name { width:275px; padding-top:18px; }
	#dg_logo { width:57px; padding-bottom:8px; margin-left:60px; }
}

@media screen and (max-width:525px)
{
	#top_links_panel { height:62px; }
	#dg_logo { padding-bottom:8px; margin-left:80px; }
	#container_div { top:173px; }
	#about_box_div { width:45%; }
	#history_box_div { width:55%; }
}

@media screen and (max-width:500px)
{
	#dg_name { width:270px; padding-top:20px; }
	#dg_logo { margin-left:90px; }
	#container_div { height:600px; }
	#about_box_div { width:100%; padding-left:100px; padding-right:100px; }
	#history_box_div { width:100%; }
}

@media screen and (max-width:480px)
{
	#dg_name { width:270px; margin-left:80px; }
	#dg_logo { display:none;; }
}

@media screen and (max-width:450px)
{
	#dg_name { width:270px; padding-top:20px; margin-left: 85px; }
	#about_box_div { padding-left:85px; padding-right:85px; }
}

@media screen and (max-width:400px)
{
	#up_down_arrow { width:60px; top:24px; left:16px; }
	#dg_name { width:250px; padding-top:20px; margin-left: 80px; }
	#about_box_div { padding-left:70px; padding-right:70px; }
}

@media screen and (max-width:360px)
{
	#up_down_arrow { top:24px; width:55px; left:16px; }
	#dg_name { width:225px; padding-top:22px; margin-left: 70px; }
	#about_box_div { padding-left:60px; padding-right:60px; }
}