@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

/* STRUCTURE - COMMON */
* {margin:0; padding:0}

html {overflow-y:scroll}

body {
	font:62.5% 'Ubuntu', sans-serif;
	background:#fff;
	margin:0;
	padding:0;
	color:#555; /* text colour */
}

.container {
	width:960px;
	margin:0 auto;  /* the auto value on the sides, coupled with the width, centres the layout */
	padding-top:10px
}

.clearfloat {clear:both; height:0;}

#header {  /* needs an ID for menu to work */
	width:960px;
	text-align:left;
	padding:10px 0;
}

.banner {
	width:960px;
	padding-bottom:10px
}
.lcol {float:left}
.rcol {float:right}

.tintpanel {
	padding:20px;
	background-color:#eee;
	margin:20px 0 40px 0;
	color:#000
}

/* TEXT */
h1 {font:700 2em 'Ubuntu', sans-serif; color:#333; margin:10px 0 25px 0}
h2 {font:700 1.6em 'Ubuntu', sans-serif; color:#333; margin:10px 0 25px 0}
p {font:400 1.4em 'Ubuntu', sans-serif; text-align:left; margin-bottom:15px; line-height:19px}
.tintpanel p {font:400 1.7em 'Shadows Into Light', cursive; margin:0}
.footer {font-size:1em; text-align:center; padding:7px; margin-bottom:0; line-height:10px}

/* LINKS */
a {
	font-weight:bold;
	color:#555; /* explicit - or blue! */
	text-decoration:none;
	border:none
}
a:link:hover, a:visited:hover {
	font-weight:bold;
	color:#ccc;
	text-decoration:none
}

/* HEADER IMAGE and MENU */
#header img {float:left; padding-bottom:10px}
#header ul {list-style:none; display:inline-table}
#header ul li {
	float:left;
	font:400 1.4em 'Ubuntu', sans-serif
}
#header ul li a {
	font-weight:bold;
	padding:0 10px;
	text-decoration:none;
	color:#555
}
#header ul li a:hover {color:#ccc}
#header ul li a.nopad {padding-left:0}

/* =============== PAINTINGS PAGES =============== */
.paypal {float:right; width:320px; margin:30px 0}
.cards {margin:10px 0}
.p-title {height:40px} 
.description {margin-top:8px}
td {font:700 1.4em 'Ubuntu', sans-serif; vertical-align:central}

/* MAGNIFIER */
.magnify {position:relative} /* container for image on page */
/* Magnifying glass (contains full-size image, as declared on individual page) */
.large {
	border-radius:100%; /* circle */
	width:175px; height:175px;
	/* multiple box shadows to achieve the glass effect */
	box-shadow:0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	position:absolute; /* position is controlled by Javascript based on position of mouse cursor over small image on page */
	display:none; /* hidden at start */
}
/*to solve overlap bug at the edges during magnification*/
.small {display:block}

/* FRAMED PRINT POPUP */
/* (background colour declared on individual page) */
#popup {
	box-shadow:rgba(0,0,0,0.6) 0px 2px 12px; /* drop-shadow of whole pop-up */
	padding:100px; /* surrounding border size */
	position:relative;
	display:none;
}
#close-x {
	background:url(../images/buttons/close.png) no-repeat;
	width:30px;
	height:30px;
	display:block;
	position:absolute; 
	top:-15px; 
	z-index:11
}
.shad {box-shadow:5px 5px 10px #999} /* drop-shadow on framed painting */