/*****************************************************************
Tables and Backgrounds for Main Page 
*****************************************************************/
.homepage {width: 98%;  height: 98%; position: fixed; top: 0; left: 0;  overflow: hidden;}

body {background-image: url("../../Graphics/Background/Top.png"); background-repeat: repeat; background-attachment: fixed; align-self: center}

.outsideframe {background-image: url("../../Graphics/Background/Frame Outside.png"); background-repeat: repeat; padding: 1px; background-attachment: fixed; height: 100%; width: 100%}

.insideframe {background-image: url("../../Graphics/Background/Frame Inside.png"); background-repeat: repeat; padding: 3px; background-attachment: fixed; height: 100%; width: 100%}	

.middle {background-image: url("../../Graphics/Background/Middle.png");  background-repeat: repeat; padding: 15px; background-attachment: fixed; height: 100%; width: 100%}

.top {background-image: url("../../Graphics/Background/Top.png");  background-repeat: repeat; padding: 10px; background-attachment: fixed; height: 100%; width: 100%}

/*****************************************************************
Header Titles and Icons.
*****************************************************************/
h1 {text-align: center; font-family: Script MT; font-size: 30px; color: #86E0FF; margin-bottom: 3px; margin-top: 2px}
        
    .h1 {display: inline-flex; align-items: center; gap: 0px}
		
        .h1::before {content: ""; display: inline-block; width: 25px; height: 25px; background-image: url("../../Graphics/Icons/h1.png"); background-size: contain; background-repeat: no-repeat}

h2 {text-align: center; font-family: Script MT; font-size: 25px; color: #FFD5FF; margin-bottom: 3px; margin-top: 2px}

    .h2 {display: inline-flex; align-items: center; gap: 0px}

		  .h2::before {content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("../../Graphics/Icons/h2.png"); background-size: contain; background-repeat: no-repeat}

h3 {text-align: center; font-family: Script MT; font-size: 20px; color: #E0C0A0; margin-bottom: 3px; margin-top: 2px}
        
    .h3 {display: inline-flex; align-items: center; gap: 0px}

        .h3::before {content: ""; display: inline-block; width: 15px; height: 15px; background-image: url("../../Graphics/Icons/h3.png"); background-size: contain; background-repeat: no-repeat}

h4 {text-align: center; font-family: Script MT; font-size: 15px; color: #CCFFFF; margin-bottom: 3px; margin-top: 2px}

    .h4 {display: inline-flex; align-items: center; gap: 0px}

        .h4::before {content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("../../Graphics/Icons/h4.png"); background-size: contain; background-repeat: no-repeat}

h5 {text-align: center; font-family: Script MT; font-size: 10px; color: #FFFFFF; margin-bottom: 3px; margin-top: 2px}

    .h5 {display: inline-flex; align-items: center; gap: 0px}
		
        .h5::before {content: ""; display: inline-block; width: 12px; height: 12px; background-image: url("../../Graphics/Icons/h5.png"); background-size: contain; background-repeat: no-repeat}

/*****************************************************************
Paragraph, Header, & Footer and Icons Layout.
*****************************************************************/
p {text-align: justify; font-family: Arial; font-size: 14px; color: #C1E0FF; text-indent: 2%; line-height: 17px}

.poem {text-align: justify; font-family: Arial; font-size: 14px; color: lightcyan; line-height: 17px}
    
    .picon {display: inline-flex; align-items: center; gap: 0px}

        .picon::before {content: ""; display: inline-block; width: 12px; height: 12px; background-image: url("../../Graphics/Icons/p.png"); background-size: contain; background-repeat: no-repeat}

header {text-align: left; color: #FFE6FF; font-family: "Arial"; font-size: 14px; text-decoration: none; gap: 1px}

    .header {display: inline-flex; align-items: center; gap: 0px}
		
        .header::before {content: ""; display: inline-block; width: 12px;  height: 12px; background-image: url("../../Graphics/Icons/header.png"); background-size: contain; background-repeat: no-repeat}

footer {color: #000000; font-family: Arial; font-size: 12px; text-align: center; padding: 1px}
        
    .footer {display: inline-flex; align-items: center; gap: 0px}

        .footer::before {content: ""; display: inline-block; width: 10px;  height: 10px; background-image: url("../../Graphics/Icons/footer.png"); background-size: contain; background-repeat: no-repeat}

/*****************************************************************
Links and Icon Layout for all links and their related icons.
*****************************************************************/

a {text-align: center; color: #FFFFFF; font-family: "Arial"; font-size: 14px; text-decoration: none; gap: 1px;}

a:hover {color: aqua; text-decoration: underline}
        
    .links {display: inline-flex; align-items: center; gap: 0px}

        .links::before {content: ""; display: inline-block; width: 12px;  height: 12px; background-image: url("../../Graphics/Icons/links.png"); background-size: contain; background-repeat: no-repeat}

/*****************************************************************
List and Icon Layout for all unordered lists.
*****************************************************************/

ol {list-style: none; counter-reset: swan-counter}

ol li {counter-increment: swan-counter; position: relative; color: #FFD5FF}

ol li::before {content: counter(swan-counter) ") "; position: absolute;  left: -25px}

ol li .indent {display: block; margin-left: 0px; text-align: justify; font-family: Arial; font-size: 14px; color: #FFD5FF}

    .list {display: inline-flex; align-items: center; gap: 0px}

        .list::before {content: ""; display: inline-block; width: 12px;  height: 12px; background-image: url("../../Graphics/Icons/links.png"); background-size: contain; background-repeat: no-repeat}

/*****************************************************************
Table Layout for all the different types of tables on the pages.
*****************************************************************/
table {width: 100%; height: 100%; vertical-align: top}

    .table {width: 95%; height: auto; vertical-align: top; padding-left: 7%}

    .tablelinks {width: 33.3%; height: auto; vertical-align: top}

tr {padding: 0}
    	    
    .tr {width: 45%; padding-left: 3%; vertical-align: top}

td {padding: 0;}

    .tdlinks {width:15%; vertical-align:top; text-align:left}

    .tdindexlinks {width:20%; vertical-align:top; text-align:left}
    
    .tdmainlinks {width: 15%; vertical-align: top; align-items: center}

    .tdheader {width:60%; vertical-align:top; text-align:center; padding:0; margin:0; line-height:0; height:0; }
    
    .tdbooks {width:18%; vertical-align:top; text-align:left}

/*****************************************************************
iFrame Layout for all frame used on the pages.
*****************************************************************/
iframe {width: 100%; height: 100%; border: 0; display: block; overflow: auto; vertical-align: top} 

/*****************************************************************
Header Pictures Layout for headers on the pages.
*****************************************************************/
.SwanCreativeAgencyHeader { background-image: url("../../Graphics/Headers/Swan Creative Agency.png"); width: 100%; height: 110%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanDigitalStudiosHeader { background-image: url("../../Graphics/Headers/Swan%20Digital%20Studios.png"); width: 100%; height: 110%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanLakesidePoetryHeader { background-image: url("../../Graphics/Headers/Swan Poetry Lakeside.png"); width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanProfessionalSuiteHeader { background-image: url("../../Graphics/Headers/Swan Professional Suite.png"); width: 100%; height: 110%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanShowcaseGalleryHeader { background-image: url("../../Graphics/Headers/Swan Showcase Gallery.png"); width: 100%; height: 110%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanStoryGardenHeader { background-image: url("../../Graphics/Headers/Swan Story Garden.png"); width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanFamilyHavenHeader { background-image: url("../../Graphics/Headers/Swan Story Garden.png"); width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanFaithfulStepsHeader { background-image: url("../../Graphics/Headers/Swan Faithful Steps.png"); width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}

.SwanTributeSanctuaryHeader { background-image: url("../../Graphics/Headers/Swan Story Garden.png"); width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat}

/*****************************************************************
Floating Icons Layout for Icons within the paragraphs.
*****************************************************************/
.SwanCreativeAgencyIcon { background-image: url("../../Graphics/Icons/Studios/Swan Creative Agency.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanDigitalStudiosIcon { background-image: url("../../Graphics/Icons/Studios/Swan%20Digital%20Studios.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanFaithfulStepsIcon { background-image: url("../../Graphics/Icons/Studios/Swan Faithful Steps.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanFamilyHavenIcon { background-image: url("../../Graphics/Icons/Studios/Swan Family Haven.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanPoetryLakesideIcon { background-image: url("../../Graphics/Icons/Studios/Swan Poetry Lakeside.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanProfessionalSuiteIcon { background-image: url("../../Graphics/Icons/Studios/Swan Professional Suite.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanShowcaseGalleryIcon { background-image: url("../../Graphics/Icons/Studios/Swan Showcase Gallery.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanStoryGardenIcon { background-image: url("../../Graphics/Icons/Studios/Swan Story Garden.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.SwanTributeSanctuaryIcon { background-image: url("../../Graphics/Icons/Studios/Swan Tribute Sanctuary.png"); width: 100px; height: 100px; float: left; margin: 5px 15px 15px 0; background-size: contain; background-repeat: no-repeat; background-position: center}

/*****************************************************************
Table to Pricing and Icon for Table on Swan Digital Studios pricing pages.
*****************************************************************/
.price {font-family: "Arial"; text-align:right; color: lavender; width: 30%; font-size: 14px; margin-bottom: 1px}

.subprice {width: 30%; color: #CCECFF; font-family: "Arial"; font-size: 14px; text-transform: uppercase; text-align: center; background-color: rgba(51, 102, 255, .1); margin-bottom: 1px}

.subname {width: 50%; color: #CCECFF; font-family: "Arial"; font-size: 14px; text-transform: uppercase; text-align: center; background-color: rgba(51, 102, 255, .1); margin-bottom: 1px}

.name {width: 45%; text-align: justify; color: #CCFFCC; font-family: Arial; font-size: 14px; margin-bottom: 1px}

    .sub {display: inline-flex; align-items: center; gap: 0px}

		.sub::before {content: ""; display: inline-block; width: 12px;  height: 12px; background-image: url("../../Graphics/Icons/sub.png"); background-size: contain; background-repeat: no-repeat}
        
    .tname {display: inline-flex; align-items: center; gap: 0px}

		.tname::before {content: ""; display: inline-block; width: 12px;  height: 12px; background-image: url("../../Graphics/Icons/subname.png"); background-size: contain; background-repeat: no-repeat}
/*****************************************************************
Guided Link Layout for links within the frame to the side of the page.
*****************************************************************/
.guide-wrapper {display: flex; width: 100%; gap: 1px; align-items: flex-start;}

.guide-links {width: 22%; display: flex; flex-direction: column; gap: 1px;}

.guide-links a {text-align: left; display: block;}

.guide-text {flex: 1; display: block}
    .guide {display: flex; justify-content: space-between; width: 100%; gap: 1px; padding-bottom: 1px}

.coming {width:50%; float:right; display: flex; justify-content: flex-star; gap: 25px; flex-wrap:wrap; padding: 1px}

/*****************************************************************
Book Covers Icons for Swan Story Garden. 
*****************************************************************/
.DestinyCrossingAPromisingFuture { background-image: url("../../Graphics/Covers/Destiny Crossing/1) A Promising Future/front.jpg"); width: 300px; height: 300px; float: left; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.DestinyCrossingATimeToGrow { background-image: url("../../Graphics/Covers/Destiny Crossing/2) A Time to Grow/front.jpg"); width: 300px; height: 300px; float: left; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.DestinyCrossingASecretPlan { background-image: url("../../Graphics/Covers/Destiny Crossing/3) A Secret Plan/front.jpg"); width: 300px; height: 300px; float: left; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center}

.CelesteChronicles { background-image: url("../../Graphics/Covers/Celeste Chronicles/Front.jpg"); width: 300px; height: 300px; float: left; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center}