/*
colors from image:  background #a0b3db, petals #87a1c2, light #dcdfe8
derived colors: dark blue #374E7F, gold #ffea66
*/

/* Header site name font is Bickley Script, which is installed on the XP computer */

/* Responsive design style sheet */

/* Styles that are the same regardless of screen size */

body {
  margin: 0;
  padding: 0;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.875em;
  background-color: white;
  color: black;
}
h1, h2, h3, h4 {
  color: #374E7F;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.71em;
  margin-top: 0px;
}
h3 {
  font-size: 1.43em;
}

h4 {
  font-size: 1.2em;
}

p {
  line-height: 1.3em;
  margin-bottom: 1.3em;
}
img.right {
	float: right;
	margin-left: 20px;
	margin-bottom: 1em;
}

.clear {
  clear: both;
}

#head h1 {
  margin-top: 0;
  margin-bottom: 5px;
}
#head h3 {
  color: #87a1c2;
  margin: 0px;
}
#head a img {
  border:  none;
}

p.blog-date {
	margin: 0;
}

/* Navigation */

ul.nav, .nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
ul.nav {
  color: #374E7F;
  font-weight: bold;
  font-size: 0.86em;
}
ul.nav li {
  padding: 3px 0px; 
}
a:link, a:visited {
  color: #374E7F;
}
.nav a {
  display: block;
  text-decoration: none;
  margin: 0px;
}
ul.nav ul a {
  padding-left: 13px; 
}
#here {
  color: #87a1c2;
}

a:hover, .nav a:hover {
  color: #87a1c2;
}
a:active, .nav a:active {
}

/* verse block */

.verse {
  font-size: 0.86em;
  margin-top: 2.6em;
}
.verse p {
  margin-bottom: 0px;
}
p.ref {
  margin-top: 0px;
  text-align: right;
}

/* home page slideshow and portfolio image */

.cycle-slideshow {
  text-align: center;
  color: #374E7F;
  font-weight: bold;
}
.cycle-slideshow, .portimg {
  border: 1px solid #ddd;
}
.cycle-slideshow a {
  text-decoration: none;
  display: none;
}
.cycle-slideshow a.first {
	display: inherit;
}
.cycle-prev {
	float: left;
	cursor: pointer;
}
.cycle-next {
	float: right;
	cursor: pointer;
}
/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 100px; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }

.cycle-prev { left: 0; background: url(images/prevnext.png) left center no-repeat; }
.cycle-next { right: 0; background: url(images/prevnext.png) right center no-repeat; }

.cycle-prev:hover, .cycle-next:hover { opacity: .4; filter: alpha(opacity=40) }

/* display paused text on top of paused slideshow */
/*
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}
*/
/* content charts */

.chart th, .chart td {
	padding: 0 20px 10px 0; 
	text-align: left;
}

.chart img {
	border: none;
}

/* contact form */

form, .msg {
  margin: 20px 0 0 0;
}
.msg {
	padding: 5px 10px;
	background-color: #dcdfe8;
}
label { 
  float: left; 
  width: 7.3em; 
}
label#copy { width: 100%; }
label.wide { width: auto; }

input, textarea { 
  font-family: Arial,Helvetica,sans-serif;
  font-size: 0.86em; 
}
input#subject { /* hide to foil spammers */
	visibility:hidden;   
	display:none;   
}

/* footer */

#foot {
  padding: 1em 0px;
  font-size: 0.86em;
  border-top: 2px solid #ffea66;
}

/* ******************************************************************************** */

/*
  Styles for very small screens, using only one column for everything.
  It has the slideshow/screenshot at the top, followed by the text, and the menu at the bottom.
*/

#head {
  padding: 10px 0 2em;
}
#head h1 img {
  width: 100%;
  max-width: 299px;
}

#container {
  background: white url(images/Depositphotos_8058706_m8.gif) 190px top no-repeat;
  padding: 0px 10px;
}

.sidebar {
  width: 100%;
  margin-bottom: 1em;
}

.cycle-slideshow, .portimg, .fleximg {
  max-width: 100%;
  margin-bottom: 10px;
}

.cycle-slideshow {
	width: 450px;
}

.cycle-slideshow img {
  width: 100%;
}

input#submit {
  margin-bottom: 1em;
}
textarea { 
  width: 100%;
  max-width: 30em;
}

/*
  Styles for small screens.
  A narrow menu is on the left; the right column has the slideshow/screenshot at the top, followed by the text.
*/

@media only screen and (min-width: 540px) {

#container {
  padding: 0px 20px;
}

#head {
  padding: 20px 0 40px;
  margin-bottom: 20px;
}

.sidebar {
  width: 22.6%;
  float: left;
}

.content {
  width: 72.6%;
  float: right;
}

/* footer */

#foot {
  clear: both;
  margin-left: 27.4%;
}

} /* End of small screen styles */

/*
  Styles for medium size screens.
  The content column is wide enough to let the text start next to the slideshow/screenshot.
*/

@media only screen and (min-width: 720px) {

body {
  background: #a0b3db url(images/Depositphotos_8058706_m5.gif);
}

#container {
  background: white url(images/Depositphotos_8058706_m8.gif) 190px 10px no-repeat;
  border: 1px solid #374E7F;
  border-top: none;
}

/* home page slideshow and portfolio image */

.cycle-slideshow, .portimg, .fleximg {
  max-width: 70%;
  float: right;
  margin-left: 20px;
}

.cycle-slideshow img {
  max-width: 450px;
}

} /* End of medium size screen styles */

/*
  Styles for screens large enough to display everything as originally designed
*/

@media only screen and (min-width: 990px) {

#container {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #374E7F;
  border-top: none;
}
.sidebar {
  width: 215px;
}

.content {
  width: 690px;
}

/* home page slideshow and portfolio image */

div.cycle-slideshow {
  width: 450px;
}

/* footer */

#foot {
  margin-left: 260px;
}

} /* End of large screen styles */