/*
Theme Name: ELP Legacy Modern
Theme URI: https://ericalynnphotography.com
Author: Erica Lynn Price
Description: Classic PHP theme modernized from Erica’s 2008 layout (Flash header replaced with image rotator).
Version: 1.0
Text Domain: elp-legacy-modern
*/

@charset "UTF-8";

/* ↓↓↓ Paste your old style.css here (all of it). Keep the same IDs/classes. ↓↓↓ */

/*
THEME NAME: [Fall2008] - Erica Lynn Photography Blog
THEME URI: http://www.ericalynnphotography.com/blog/
DESCRIPTION: Nice wide theme to display my sneak peeks 
VERSION: 2.0
AUTHOR: Erica Lynn Price with a little help from <a href="http://www.plaintxt.org/themes/sandbox/">sandbox</a>
AUTHOR URI: http://ericalynnphotography.com
*/

/* clear all formatting */
@import url("reset.css");

/* general styles */
body {
    background-image: url(images/bg4.png);
    background-color: #3abde2;
    font-family:  Century Gothic, verdana, tahoma; /* font-face blogwide */
    font-size: 12px;	/* paragraph font-size */
    color: #636363;   /* paragraph text-color blogwide */
    line-height: 1.5em;  /* spacing between lines in paragraphs */
}

/* solid color bar on top of page */
#top_solid_colored_bar {
    display: none;   /* delete "x" if you want to remove top bar */
    height: 20px;     /*  change height of top bar */
    background-color: #bfdee4;  /* change  color of top bar area */
}

/* link styles */
a:link {
    text-decoration: none;         /* no underlining default */
    color: #6ecf06;		       /* color of links not yet visited */
}
a:visited {
    text-decoration: none;         /* no underlining default */
    color: #6ecf06;		       /* color of links already visited */
}
a:hover {
    text-decoration: underline;     /* underlining as hover default */
    color: #6ecf06;                 /* color of links when being hovered over */
}

/* post title style */
h2.entry-title a, h2.entry-title, 
body.search h3.entry-title a, 
body.archive h3.entry-title a {
color: #cf06b0;   /* color of post titles */
font-size: 20px;	/* font size of post titles */
margin-bottom: 3px;	/* spacing below post titles */
text-decoration: none;	/* underline off, change to "underline" */
}



/* layout code */
#outerwrapper {
	background:transparent url(images/hover.png) repeat-y scroll 0%;
	margin:0pt auto;
	width:994px;
}
* html #outerwrapper {
	background-image: none;  /* IE6 can't handle transparent png */
}
#wrapper {
	width: 980px;
	margin: 0 auto;
	background-color: #FFF;	
}



/************************************************
*	Header  									*
************************************************/
#header {
    width: 980px;
    height: 200px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

#header-logo {
    background: url(images/logo.png) no-repeat;
    float:left;
    margin: 20px 10px 0px 40px;
}

#header-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

#header-flash {
    float: right;
    position: relative;
    margin: 20px 40px 0px 10px;
}

/* Header gallery box matches the old Flash area */
.header-gallery { width: 680px; height: 178px; overflow: hidden; }
.header-gallery img { display:block; width:680px; height:178px; object-fit: cover; }

/* navigation bar */
#navlinks ul {
	margin: 0px 40px 0 40px; 
	padding: 5px; 
	list-style-type: none; 
	list-style-image: none; 
	background: #3abde2;
}
#navlinks li {display: inline; }
#navlinks ul li a {
	text-decoration:none;
	padding: 4px 10px 4px 10px; 
	color: #fff;
	background: #3abde2;
}

#navlinks a:hover, #current-cat {
	color: #000;
	background: #fff;
	padding: 4px 10px 8px 10px; 
}



/* content */
#container {
	clear: both;
}
#content {
	margin: 40px 40px 0 35px;
}
#content p {
	margin: 0 0 20px 0;
}
.post {
	margin: 0 0 30px 0;
}
h2.entry-title {
	margin: 0 0 3px 0;
}
body.single #container {
	margin-bottom: 40px;
}
div.entry-content img {
	display: table;
	margin: 10px auto 20px auto;
	padding: 4px;
	border: 1px solid #DFDFDF;
}
img.wp-smiley{ border:none;}
img.pixel{ border:none;}

body.archive #content h2.page-title,
body.search #content h2.page-title {
	font-size: 140%;
}



/* sidebar / footer */

#sidebar {
    width: 980px;
	color: #636363;
    background: #F0F0F0;
	margin: 40px auto 0px;
}
#footer { clear: both; }
#footer {
    width: 980px;
	color: #636363;
    background: #F0F0F0;
	margin: 40px auto 0px;
	text-align: left;
}

.footerleft {
    float: left;
	width: 420px;
    background-color: #F0F0F0;
	display: inline;
	padding: 20px 0px 0px 0px;
}

.footerright {
    float: right;
	width: 450px;
    background-color: #F0F0F0;
	display: inline;
	padding: 20px 40px 0px 0px;
}
#footer::after { content: ""; display: block; clear: both; }
/* or, if you prefer: #footer { overflow: auto; } */
.footerleft,
.footerright { background-color: transparent; }  /* remove the F0F0F0 here */


/*
Plugin Name: WP-Digg Style Paginator
Plugin URI: http://www.mis-algoritmos.com/2007/09/09/wp-digg-style-pagination-plugin-v-10/
Author: Victor De la Rocha
Author URI: http://www.mis-algoritmos.com
*/
/*CSS Digg style pagination*/
	div.pagination {
		padding: 3px;
		margin: 3px;
		text-align:center;
	}
	
	div.pagination a {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #3abde2;
		text-decoration: none; /* no underline */
		color: #3abde2;
	}
	div.pagination a:hover, div.digg a:active {
		border: 1px solid #3abde2;
		color: #000;
	}
	div.pagination span.current {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #3abde2;
		font-weight: bold;
		background-color: #3abde2;
		color: #FFF;
	}
	div.pagination span.disabled {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #EEE;
		color: #DDD;
	}


/* This is all sandbox stuff, I'm not sure if I need to get rid of it */
/* Just some example content */

img.wp-smiley{ border:none;}

div#header{text-align:center;margin-bottom:2em;}
div#access div.skip-link{position:absolute;top:1em;right:1em;}
div#menu{font-size:0.9em;height:1.5em;padding-top:0.3em;background:#eee;width:100%;}
div#menu ul a{font-weight:700;text-decoration:none;}
div#menu ul,div#menu ul ul,div#menu ul li{list-style:none;margin:0;padding:0;}
div#menu ul li{float:left;}
div#menu ul li a{background:#eee;padding:0.3em 0.5em;}
div#menu ul ul{display:none;}
div#menu ul ul li{float:none;}
div#menu ul ul li a{margin:0;padding:0;}
div#menu ul li:hover ul{display:block;font-size:0.9em;padding-top:0.5em;position:absolute;}
div#menu ul li:hover ul li a{background:#f5f5f5;border:none;display:block;padding:0.1em;width:10em;}

.entry-title{clear:both;}
div#container,div.sidebar{margin-top:2em;}
div#nav-above,div#nav-below{width:100%;height:1em;}
div#nav-above{margin-bottom:1em;}
div#nav-below{margin-top:1em;}
.alignleft,div.nav-previous{float: left;}
.alignright,div.nav-next{float: right;}
form#commentform .form-label{margin:1em 0 0;}
form#commentform span.required{background:#fff;color:red;}
form#commentform,form#commentform p{padding:0;}
input#author,input#email,input#url{width:50%;}
input#author,input#email,input#url,textarea#comment{padding:0.2em;}
div.comments ol li{margin:0 0 3.5em;}
textarea#comment{height:13em;margin:0 0 0.5em;overflow:auto;width:66%;}


#sidebar ul{margin:0 0 0 25px;}
#sidebar li{margin:0 0 0 10px;padding:0;}
#sidebar h3{font-size:14px; margin:15px 0 0 20px; font-weight:bold;}
#sidebar input#s{width:7em; margin:0 0 0 20px;}
#sidebar li{list-style:none;padding:0 0 0 0px;}
#sidebar li form{margin:0.2em 0 0;padding:0;}
#sidebar ul ul{margin:0 0 0 40px;}
#sidebar ul ul li{list-style:disc;margin:0;}
#sidebar ul ul ul{margin:0 0 0 0.5em;}
#sidebar ul ul ul li{list-style:circle;}


#content ul{margin:0 0 0 25px;}
#content li{margin:0 0 0 10px;padding:0;}
#content h3{font-size:14px; margin:15px 0 0 20px; font-weight:bold;}
#content input#s{width:7em; margin:0 0 0 20px;}
#content li{list-style:none;padding:0 0 0 0px;}
#content li form{margin:0.2em 0 0;padding:0;}
#content ul ul{margin:0 0 0 40px;}
#content ul ul li{list-style:disc;margin:0;}
#content ul ul ul{margin:0 0 0 0.5em;}
#content ul ul ul li{list-style:circle;}

div#footer{text-align:center;}

/* New gallery feature styles; Can't use div.attachment because shortcodes can link to galleries in other posts */
div.gallery{clear:both;float:left;width:100%;}
div.gallery dl{float:left;text-align:center;}
div.gallery dl dt{margin:0;}
div.gallery dl dd{margin-left:0;}
div.entry-attachment,div.entry-caption{text-align:center;}
div.entry-attachment img,div#nav-images div img{overflow:hidden;}
body.attachment div#nav-images{clear:both;width:100%;}
body.attachment div#nav-images div{padding:1em 0;width:50%;}
body.attachment div#nav-images div.nav-previous{text-align:left;}
body.attachment div#nav-images div.nav-next{text-align:right;}
body.attachment div.entry-meta,body.attachment div#comments{clear:both;}

/* ===============================
   Responsive overrides
   =============================== */

/* 1) Global fluid defaults */
img, video { max-width: 100%; height: auto; }
#wrapper, #header, #footer, #sidebar, #content { width: 100%; }
* { box-sizing: border-box; }

/* 2) Desktop constraint */
@media (min-width: 981px){
  #wrapper { width: 980px; margin: 0 auto; }
  #header, #footer, #sidebar { width: 980px; }
}

/* 3) Tablet (≤ 768px) */
@media (max-width: 768px){
  /* Header stacks */
  #header { display: flex; flex-direction: column; align-items: center; padding: 10px 12px; height: auto; }
  #header-logo { float: none; margin: 0 0 10px 0; background-size: contain; background-position: center; width: 180px; height: 180px; }
  #header-logo img { max-width: 100%; height: auto; display: block; }
  #header-flash { float: none; position: static; margin: 0; width: 100%; }
  .header-gallery { width: 100%; height: 160px; overflow: hidden; }
  .header-gallery img { width: 100%; height: 160px; object-fit: cover; }

  /* Nav bar */
  #navlinks ul { margin: 0 12px; padding: 8px; }
  #navlinks ul li a { display: inline-block; padding: 8px 10px; }

  /* Content */
  #content { margin: 20px 12px 0 12px; }
  .post { margin-bottom: 24px; }
  div.entry-content img { max-width: 100%; height: auto; }

  /* Footer columns stack */
  .footerleft, .footerright { float: none; width: 100%; padding: 16px 12px 0 12px; }
}

/* 4) Phone (≤ 480px) */
@media (max-width: 480px){
  .header-gallery, .header-gallery img { height: 140px; }
  #navlinks ul { padding: 10px; }
  #navlinks ul li a { padding: 10px 12px; }
  h2.entry-title { font-size: 18px; }
  body { font-size: 14px; line-height: 1.6; }
  div.pagination a,
  div.pagination span.current { display: inline-block; padding: 8px 10px; margin: 4px; }
  #sidebar { margin: 24px 0 0 0; padding: 12px; }
}

/* ===============================
   Responsive fixes for container
   =============================== */

/* Let all site wrappers go fluid by default */
#outerwrapper,
#wrapper,
#header,
#footer,
#sidebar,
#content { width: 100%; }

/* Keep desktop look ≥981px wide */
@media (min-width: 981px){
  #outerwrapper { width: 994px; margin: 0 auto; }  /* preserve your legacy chrome */
  #wrapper, #header, #footer, #sidebar { width: 980px; margin: 0 auto; }
}

/* Tablet & down: truly fluid */
@media (max-width: 980px){
  /* Kill the fixed width that was locking mobile */
  #outerwrapper { width: 100%; margin: 0; }

  /* Reduce big margins/padding so content breathes on phones */
  #content { margin: 20px 12px 0 12px; }
  #sidebar { width: 100%; margin: 24px 0 0 0; padding: 12px; }

  /* Header stacks and gallery scales */
  #header { display: flex; flex-direction: column; align-items: center; padding: 10px 12px; height: auto; }
  #header-logo { float: none; margin: 0 0 10px 0; background-size: contain; background-position: center; width: 180px; height: 180px; }
  #header-flash { float: none; position: static; margin: 0; width: 100%; }
  .header-gallery { width: 100%; height: 160px; overflow: hidden; }
  .header-gallery img { width: 100%; height: 160px; object-fit: cover; }

  /* Teal nav bar tweaks */
  #navlinks ul { margin: 0 12px; padding: 8px; }
  #navlinks ul li a { display: inline-block; padding: 8px 10px; }

  /* Footer columns stack */
  .footerleft, .footerright { float: none; width: 100%; padding: 16px 12px 0 12px; }
}

/* Small phones */
@media (max-width: 480px){
  .header-gallery, .header-gallery img { height: 140px; }
  h2.entry-title { font-size: 18px; }
  body { font-size: 14px; line-height: 1.6; }
  div.pagination a, div.pagination span.current { display: inline-block; padding: 8px 10px; margin: 4px; }
}

/* Safety: avoid sideways scroll on tiny screens */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }