/* CSS Document */


:root {
    --PAGE_WIDTH:   1200px;  
	--RGBA_PAGE_BACK:  rgba(51,51,51,.8); 
 
     --COL_TEXT      : #ffffff; 
	 --COL_TEXT_HOVER: #F30;
	 --COL_TEXT_WHITISH : beige;
    --COL_TEXT_LESS_WHITISH : hsl(60, 7%, 65%);
	 --COL_BACK_HOVER: #CCC; 
     --COL_TEXT_SUBJECT:  #eece85; /*#ebb884;	*/
     --COL_SUBTLE_LINE: rgba(183, 181, 178, 0.4);
	
     --COL_MY_RED    : rgb(220, 63, 16);
	 --COL_MY_GREEN  : rgb(0, 220, 45);

    --FONT_TEXT    : "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;        
    --FONT_HEADER  : "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;       
}
html { 
  background-image: url(draig_background2.webp);/*background-image: url(../pic/holly_back.webp);*/
}

body {
   	font-family: var(--FONT_TEXT);
	color: var(--COL_TEXT);
	font-size : 18px;
	margin-top: 0px;
	margin-right: auto;
	line-height: 1.1em;
}
@media all and (max-width :900px) {
	body {
	   font-size : 18px;
	   line-height: 1.3em;
	   color:#063
	}
}



/* NEW FLEX LAYOUT ============================================================*/

.whole_screen {   /* the flex container representing the whole client part of teh browser window */
   display: flex;      /*     establish flex container */
   flex-direction: row ;
   flex-wrap: nowrap;
   justify-content: center;
   margin:0;

}

.page_content {    /* where the actual content goes - text and photos */
   display: flex;           /* establish flex container */
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-end;
   margin:0;	
   padding:20px 20px 20px 20px;
   width: var(--PAGE_WIDTH);
   max-width:100%;
   background: var(--RGBA_PAGE_BACK);
   box-shadow: 0px 0px 26px 2px rgba(255,255,255,0.4);
}

@media all and (max-width :900px) {
    .page_content { 
    padding-left: 4px;
    padding-right: 4px;
        box-shadow: none;
    }
}


.a_column {
	
	/*width:24%;*/
	margin:0;
	min-width: 220px;
	max-width:900px;
	min-height: 100vh;
}

.column1 {
	flex:1 1 auto;
	width:200px;
	margin:0;
  padding-right: 30px;
}

.column2 {
	
	max-width:800px;
	margin:0;
}

.explanation,
.ph_extra_words {
  color: var(--COL_TEXT_WHITISH);
    
}

.explanation {
	color: var(--COL_TEXT_WHITISH);
	font-size: 0.85em;
	line-height: 1.4em;
    border-top: 1px solid var(--COL_TEXT_WHITISH);
    border-bottom: 1px solid var(--COL_TEXT_WHITISH);
}


@media all and (min-width :900px) {
    .desktop_only {
        display: inherit;
    }
    .mobile_only {
        display:none;
    }
}
@media all and (max-width :900px) {
    .desktop_only {
        display: none;
    }
    .mobile_only {
        display:inherit;
    }
}


h1 {
	font-size: 1.6em;
	font-style: italic;
	color: var(--COL_MY_RED);
	border-bottom: 2px solid var(--COL_MY_GREEN);
	padding-bottom: 12px;
}

.ph_head_words {
     float:left;
    /* border-bottom: 1px solid var(--COL_TEXT_WHITISH);*/
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.ph_head_words h1 {
    border:none;
}



a:link,
a:visited{
	color: var(--COL_TEXT_WHITISH);
	text-decoration: none;
}
a:hover ,
a:active {
	text-decoration: none;
	color: var(--COL_MY_RED);
}

.explanation  a:link,
.explanation  a:visited{
	color: var(--COL_TEXT_WHITISH);
	text-decoration: none;
}
.explanation  a:hover ,
.explanation  a:active {
	text-decoration: none;
	color: var(--COL_MY_RED);
}

@media all and (max-width :900px) {
    .a_column {
        min-height:  0px;
    }
    .explanation {
        margin: 5px;
        max-width:600px;
    }
}

.ph_extra_words {
  font-size: 1.1em;
  font-style: italic;
}



.dragon_img {
  margin: 0px;

}
.fade_in_img {
  animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



.date_saved {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #999999;
}

.ph_albums {
	font-size: 1em;
	color: var(--COL_TEXT);
	margin-bottom: 15px;
	margin-top: 0px;
  background-color: rgba(0,0,0,.12);
  padding: 6px 4px 12px 4px;
}



.ph_albums h2 {
	font-size: 1.4em;
	color: var(--COL_MY_RED);
	font-weight: bold;
	padding-bottom: 12px;
	width: 100%;
	clear:both;
}

.ph_albums,
.ph_albums h2 {
  border-bottom: 2px solid var(--COL_MY_GREEN); 
}

.ph_albums h3 {
	font-size: 1.1em;
	color: var(--COL_MY_RED);
	font-weight: bold;
  margin-top: 8px;
  margin-bottom: 4px;
  clear:both;
 }




.ph_line {
	clear:both;
    line-height:  normal;
    overflow: hidden; /* a fix to ensure the div has height becasue it contains floats */
    padding-bottom:6px;
}

@media all and (max-width :900px) {
    .ph_line {
       border-bottom: 1px dashed var(--COL_SUBTLE_LINE);
   }
}

/*

.ph_line a:link,
.ph_line a:visited{
	color: var(--COL_TEXT);
	text-decoration: none;
}
.ph_line a:hover,
.ph_line a:active{
	color: var(--COL_TEXT_HOVER);
	text-decoration: none;
}
*/
.ph_subject{
	width: auto;
	display:inline-block;
	float:left;
	max-width:90%;
	padding: 2px 4px 4px 6px;	
    margin-bottom:-5px;
    margin-left: 16px;
    font-size: 1.05em;
  
}
.ph_subject:before {
  content: "\2022\A0";
  color: var(--COL_MY_RED);
 margin-left:-16px;
}



a:link .ph_subject,
a:visited .ph_subject {
	color:   var(--COL_TEXT_SUBJECT); 
}
a:hover .ph_subject,
a:active .ph_subject {
	color: var(--COL_TEXT_HOVER);
}
.ph_date{
	/*width: 25%;
    min-width: 250px;*/
    min-width: 100px;
    width: auto;
	display:inline-block;
	float:right;
	font-size: 0.85em;
	padding: 3px 4px 2px 4px;	
    color: var(--COL_TEXT_LESS_WHITISH);
    text-align: right;
   
}
a:hover .ph_date,
a:active .ph_date {
    color: var(--COL_TEXT_WHITISH);
}

.invisible {
	color: rgba(255,255,255,0.0);
}

.accordionItemHeading {
  font-size: 1.2em;
  letter-spacing: 1px;
	color: var(--COL_TEXT_SUBJECT);
	font-weight: normal;
	padding-bottom: 4px;
    margin-left: 20px;
    width:auto;
  cursor: pointer;
}
.ph_sub_acc_header {
  font-size: 0.8em;
  margin-left: 12px;
  letter-spacing: normal;
}
.close .accordionItemHeading {
  border-bottom: 2px solid rgba(0,0,0,0);
}
.open .accordionItemHeading {
  border-bottom: 2px solid var(--COL_MY_GREEN); 
  color: var(--COL_MY_RED);
  margin-bottom: 0;
  font-size: 1.4em;
  font-weight: bold;    
}

.open .accordionItemHeading::after,
.close .accordionItemHeading::after {
  content: "\2038";  
  float:right;
  font-size: 27px;
  position:relative;
  font-weight: normal; 
  left: -50px;
  color: var(--COL_TEXT_WHITISH);
}

@media all and (max-width :900px) {
    .open .accordionItemHeading::after,
    .close .accordionItemHeading::after {
        left: -25px;
    }
    .close .accordionItemHeading {
       border-bottom: 1px dashed var(--COL_SUBTLE_LINE);
   }
}

.close .accordionItemHeading::after {
  top:12px;
  transform: rotate(180deg) scaleX(1.7);
}

/*.close */.accordionItemHeading::before {
 /*   content: "\29c9\A0\A0";   ⧉ 
    content: "\2022\A0\A0"; */  
    /*content: "\29be\A0";  dot in circle */
  content: "\25A6\A0"; /* square with cross hatch */
  content: "\229e\A0";
   font-size: 1.0em;
    color: var(--COL_MY_RED);
    margin-left: -20px;
  font-weight: normal;
}

.open .accordionItemHeading::after {
  top:-12px;
  transform: scaleX(1.7);
}

.accordionItemHeading:hover {
 color: var(--COL_MY_RED);
 text-decoration: none;
  border-bottom: 2px solid var(--COL_MY_GREEN);
}

.close .accordionItemContent {
  height: 0px;
 /* transition: transform 0.1s linear;*/
  transform: scaleY(0);
  float: left;
  display: block;
}

.open .accordionItemContent {
    margin-left:12px;
  padding: 4px 15px 10px 10px;
  width: 100%;
  display: block;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s linear;
  box-sizing: border-box;
}
@media all and (max-width :900px) {
    .open .accordionItemContent {
      margin-left:0;
      padding-left: 0;
    }
}

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


#ph_footer {
  border-top: 1px solid var(--COL_TEXT_WHITISH);
  margin-top: 30px;
  padding: 2px;
  font-size: 0.85em;
  clear: both;
  width: 100%;
}

.ph_footer_copyright{
  color: var(--COL_TEXT_SUBJECT);
  font-size: 0.8em;
  float: right;
}