/* Brian Fleming's Gallery General Stylesheet 13th March 2021 written by Peter King - Rules by Classes */

/* General Layout of pages on the site

   On the index page only a 960px wide container div holds within it two half-width divs floated left containing text.
   On all pages except the index page a 960px wide container div holds within it two principal divs each floated left, a main content div at left with a narrower div to the right of it.
   Within the main content div are further divs each floated left which can hold full-size images, thumbnail images or text.  
   They are either one-third the width, half the width or the full width of this main section div. 
   They are designated third-panel, half-panel or full-panel.
   At the bottom of the page is a footer div. 
   
   Please note that on the Morocco page there has been recourse to a special hack in an attempt to avoid overly complex CSS or having to use tables.
   Some of the portrait-mode thumbnail images on this page are of a lesser height than others so that the captions underneath them would not line up easily without resorting to some more complex CSS. The hack used is to add a border to ALL the portrait-mode thumb jpgs on THIS PAGE ONLY and then, in the case of the non-standard height images ONLY , sit them at the top of a 302px high grey #595959 background to create a new composite jpg image of the right height so that the lining-up is easily effected. This can be effected using photo-editing software. All the portrait-mode thumbs on this page are therefore not classed as ."thumb" although the landscape-mode thumbs on this page are not affected by this problem and can continue to be classed as ."thumb" as they receive their borders through the CSS.

   Please also note that any classes defined on a page as simpleCart_... something or other are defined in the simpleCart.js script and not here. These are used for the Shopping Basket process.
   
*/
   
   
/*  ========== BELOW IS A GENERAL CSS RESET ========== */

html, body, div, span, p, em, img, ol, ul, li  {

vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
  
}

p {

margin: 10px 0 5px 0;

}
	
/*  General css reset then the margins for paragraphs are redefined  */	
	
/*  ========== END OF GENERAL CSS RESET ==========  */


/*  ========== BELOW ARE RULES RELATING TO BASIC PAGE STRUCTURE ==========  */

body { 

background-color:#595959;
color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
direction:ltr;
min-width:960px;

} 

#container {

width:960px;
margin: 10px auto 0 auto;

}

/* Container envelope 960px wide used for all page content */

/* ========== END OF RULES RELATING TO BASIC PAGE STRUCTURE ========== */


/* ========== BELOW ARE OTHER GENERAL STRUCTURAL AND LINK ELEMENTS ========== */


.clear {
	
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
overflow:hidden;
visibility:hidden;
width:0;
height:0;

} 

/* Divs or paragraphs used as horizontal spacer elements clearing both sides */

a {

text-decoration:none;

}

/* Text links are not underlined unless specifically stated */

a img {

border:none;

}

/* No borders on image links */


/* ========== END OF RULES RELATING TO OTHER GENERAL STRUCTURAL AND LINK ELEMENTS ========== */


/* ========== BELOW ARE RULES RELATING TO SITE TITLE ========== */
 
#sitetitle {

float:left;
width:620px;
padding-top:25px;
padding-bottom:10px;
text-align:left;

}

/* Website title gif floated left at top of all pages */

/* ========== END OF RULES RELATING TO SITE TITLE ========== */


/*  ========== BELOW ARE RULES RELATING TO NAVIGATION BAR ========== */  
	   
#navbar {

width:100%;
border:1px solid #999999;
padding:10px 0 10px 0;
clear:both;

}

/* Div holding ul #navlist */

#navlist {

list-style:none;
padding:0;
margin:0;
text-align:left;

}

#navlist li {

display:inline;
font-size:16px;

}

#navlist a {

font-size:16px;
text-decoration:none;
color:#ffffff;
padding:5px 15px 5px 15px;

}

#navlist a:hover {

background-color:#696969;
color:#eeeeee;

}

#navlist a#active {
	
color:#898989;

}

/* ========== END OF RULES RELATING TO NAVIGATION BAR ========== */


/* ========== BELOW ARE RULES THAT ARE SPECIFIC TO THE INDEX PAGE AND CONTACT FORM PAGES ONLY ========== */

#index-heading {

font-size:24px;
font-weight:500;
text-align:left;

}

/* Heading above text panels on Index page and above the form on the Contact Form page */

.index-left-panel {

width:460px;
float: left;
display: inline;
position: relative;
margin-top: 20px;
margin-right:20px;
padding:0;
text-align:justify;

}

/* Left-hand Panel containing text on index and contact pages only - half width of container at 460px plus 20px margin-right making 480px  */

.index-right-panel {

width:460px;
float: left;
display: inline;
position: relative;
margin-top: 20px;
margin-left:20px;
padding:0;
text-align:justify;

}

/* Right-hand Panel containing text on index and contact pages only - half width of container at 460px plus 20px margin-left making 480px  */

#formwrap {
	
width:100%;
border: 1px solid #999999;
padding:5px 0 30px 0;
margin:20px 0 20px 0;
	
}

/* Div holding Contact Form */

#contact {

width:100%;

}

/* Contact Form within the formwrap div */

.form-input {

width:300px;
padding:3px;
color:#336699;

}

/* Width and padding of Contact Form text input fields */

#ctfrm {
	
font-size:14px;
color:#ffffff;	

}

/* Text size and colour of alerts on Contact Form */


/* ========== END OF RULES RELATING TO INDEX PAGE AND CONTACT FORM PAGES ONLY ========== */


/* ========== BELOW ARE RULES RELATING TO LEFT-HAND MAIN SECTION OF ALL PAGES EXCEPT THE INDEX PAGE AND CONTACT FORM PAGE ========== */

#main {

background-color:#595959;
width:720px;
float:left;
display: inline;
position: relative;
margin-top:10px;
padding:0;

}

/* Left-hand main section wrapper floated left on each page. Width is three-quarters of content container at 720px. */ 

.third-panel {
	
width: 220px;
float: left;
display: inline;
position: relative;
margin-top: 20px;
margin-right: 20px;
padding: 0;
text-align: left;

}

/* Panel containing image and possible caption or text - one third width of main section at 220px plus 20px margin-right making 240px */

.half-panel {

width:340px;
float: left;
display: inline;
position: relative;
margin-top: 20px;
margin-right:20px;
padding:0;
text-align:left;

}

/* Panel containing image and possible caption or text - half width of main section at 340px plus 20px margin-right making 360px  */

.full-panel {

width:700px;
float: left;
display: inline;
position: relative;
margin-top: 20px;
margin-right:20px;
padding:0;
text-align:left;

}

/* Panel containing image and possible caption or text - full width of main section at 700px plus 20px margin-right making 720px  */

.card-panel {

width:700px;
float: left;
display: inline;
position: relative;
margin-top: 10px;
margin-right:20px;
padding:0;
text-align:left;

}

/* Panel containing image and possible caption on individual cards pages only - full width of main section at 700px plus 20px margin-right making 720px but with 10px top margin  */


.thumb {
	
border: 1px solid #898989;

}

/* Defines border around a thumbnail image in one of the above panels */


.caption {

color:#ffffff;
font-size:16px;
text-align:left;

}

/* Caption underneath an image */ 


.paneltext {

color:#ffffff;
font-size:16px;
text-align:justify;
padding:0 50px 10px 50px;

}

/* Text block within any of above panels when used for justified text instead of caption */

#warning {

color:#ffffff; 
font-size:13px;
font-weight:bold;
padding:10px 0 10px 0;

}

/* Warning text at head of pages regarding use of javascript */


/* ========== END OF RULES RELATING TO LEFT-HAND MAIN SECTION OF ALL PAGES EXCEPT THE INDEX PAGE AND CONTACT FORM PAGE ========== */


/* ========== BELOW ARE RULES RELATING TO RIGHT-HAND SECTION OF PAGE ========== */


#right {

background-color:#595959;
width:240px;
float:left;
display: inline;
position: relative;
text-align:center;
margin-top:20px;
padding:0;

}

/* Wrapper div containing right-hand content section of each page except individual cards pages - 240px wide with 20px margin at top */


#right-cards {

background-color:#595959;
width:240px;
float:left;
display: inline;
position: relative;
text-align:center;
margin-top:40px;
padding:0;

}

/* Wrapper div containing right-hand content section of individual cards pages only  - 240px wide with 40px margin at top */


#heading {

font-size:24px;
font-weight:500;
text-align:center;

}

/* Heading at top of right-hand text panel */



#viewbasket {
	
border:1px solid #999999;
margin: 20px 0 20px 0;
padding-bottom: 10px;
	
}

/* Container div for Basket Contents in right-hand section of Cards page and individual Cards pages */


.basketcontents {

color:#ffffff;
font-size:14px;
text-align:justify;
padding:0 20px 0 20px;

}

/* Shows Basket Contents within the viewbasket div in right-hand section of Cards page and individual Cards pages */



.righttext {

color:#ffffff;
font-size:16px;
text-align:justify;
padding:0;

}

/* 16px font-size text block within the right-hand section used for justified text */


/* ========== END OF RULES RELATING TO RIGHT-HAND SECTION OF PAGE========== */


/* ========== RULES RELATING TO INPUT ON CARDS PAGES ========== */


fieldset {

border:none;
padding:0;
margin:0;

}


.qty {
	
color:#ffffff;
font-size:14px;
text-align:left;
padding:0;
margin:0;

}


input[type="text"] {
	
background-color:#ffffff; 
color:#666666;
border: 1px solid #999999;

} 


input[type="submit"] {
	
display:       inline-block;	
background:    #93c47d;
background:    -webkit-linear-gradient(#93c47d, #38761d);
background:    linear-gradient(#93c47d, #38761d);
border:        1px solid #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;	

} 

/* Submit button for adding cards to basket on the Individual Cards pages as well as Checkout link on the Basket page */


input[type="submit"]:hover {
	
display:       inline-block;	
background:    #ccf49d;
background:    -webkit-linear-gradient(#ccf49d, #38761d);
background:    linear-gradient(#ccf49d, #38761d);
border:        1px inset #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;	

}

/* Hover on above Submit button */  


button {
	
display:       inline-block;	
background:    #999999;
background:    -webkit-linear-gradient(#999999, #797979);
background:    linear-gradient(#999999, #797979);
border:        1px solid #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;	

} 

/* Button link underneath image on all Cards pages linking to either Individual Cards pages or as link back to main Cards page  - also used as a link back on the Contact-Error page */


button:hover {
	
display:       inline-block;	
background:    #cccccc;
background:    -webkit-linear-gradient(#cccccc, #797979);
background:    linear-gradient(#cccccc, #797979);
border:        1px inset #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;	

} 

/* Hover on above button */


#gotobasket  {
	
display:       inline-block;	
background:    #93c47d;
background:    -webkit-linear-gradient(#93c47d, #38761d);
background:    linear-gradient(#93c47d, #38761d);
border:        1px solid #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;
	
}

/* Green button link to view the Basket on main Cards page and on individual cards pages */


#gotobasket:hover  {
	
display:       inline-block;	
background:    #ccf49d;
background:    -webkit-linear-gradient(#ccf49d, #38761d);
background:    linear-gradient(#ccf49d, #38761d);
border:        1px inset #797979;
border-radius: 4px;
color:         #ffffff;
padding:       5px 15px;
font-size:     14px;
text-align:    center;
text-shadow:   1px 1px 0 #000;
cursor:pointer;
	
}

/* Hover on above button */


.backlink {
	
margin-top:20px;
	
} 

/* Button as above used on Individual Cards pages underneath image linking back to main Cards page */ 
 

/* ========= END OF RULES RELATING TO INPUT ON CARDS PAGES ======== */


/* ========== BELOW ARE RULES RELATING TO CONTENTS ELEMENTS ON THE SHOPPING BASKET PAGE ONLY ========== */

.itemContainer {

width:644px;
float:left;
margin: 5px 0 7px 0 ;

}
	
.itemContainer div.itemName  {

width:255px;
float:left;

}
	
.itemContainer div.itemPrice  {

width:90px;
float:left;

}
	
.itemContainer div.itemdecrement a {

width:20px;
float:left;
color:#ffffff;
font-weight:bold;

}
	
.itemContainer div.itemdecrement a:hover{

color:#ffffff;
background-color:#797979;

}

.itemContainer div.itemQuantity {

width:33px;
float:left;

}
	
.itemContainer div.itemincrement a {
width:20px;
float:left;
color:#ffffff;
font-weight:bold;

}
	
.itemContainer div.itemincrement a:hover{

color:#ffffff;
background-color:#797979;

}
	
.itemContainer div.itemTotal {

width:100px;
float:left;
text-align:right;

}
	
.itemContainer div.itemremove a {

width:125px;
float:left;
color:#ff9900;
font-style:italic;
text-decoration:none;

}
	
.itemContainer div.itemremove a:hover {

width:125px;
float:left;
color:#cc0000;
font-style:italic;
background-color:#797979;
text-decoration:none;

}
	
.cartHeaders {

width:644px;
float:left;
margin: 5px 0 20px 0 ;

}
	
.cartHeaders div.itemName {

width:255px;
float:left;

}
	
.cartHeaders div.itemPrice {

width:90px;
float:left;

}
	
.cartHeaders div.itemdecrement {

width:20px;
float:left;

}
	
.cartHeaders div.itemQuantity {

width:33px;
float:left;

}
	
.cartHeaders div.itemincrement {

width:20px;
float:left;

}
	
.cartHeaders div.itemTotal {

width:100px;
float:left;
text-align:right;

}
	
.cartHeaders div.itemremove {

width:125px;
float:left;

}

#checkout {
	
margin-top:30px;	
	
}

/* Margin at top of fieldset in form containing Checkout button on Shopping Basket Page */


/* ========== END OF RULES RELATING TO CONTENTS ELEMENTS ON THE SHOPPING BASKET PAGE ONLY ========== */


/* ========== BELOW ARE RULES RELATING TO THE FOOT OF EACH PAGE ========== */

#foot {
 
width:100%;
border-top: 1px solid #999999;
margin-top:20px;

}

/* Div containing section at foot of each page */

#indexcopyright {
	
font-size:12px;
text-align:center;
margin-top:10px;
margin-bottom:10px;

}

/* Copyright Statement at foot of index and contact pages only */


#copyright {
	
font-size:12px;
text-align:left;
margin-top:10px;
margin-bottom:10px;

}

/* Copyright Statement at foot of each page except index page */


.infotext {

color:#ffffff;
font-size:14px;
text-align:left;

}

/* Misc lines of informative text */

.infotext-disabled {

color:#656565;
font-size:14px;
text-align:left;

}

/* Misc lines of toned-down text on contact-thanks page only */

/* ========== END OF RULES RELATING TO THE FOOT OF EACH PAGE ========== */


/*  PK 13th March 2021  */