/*
PRIMROSIA.CO.UK CSS STYLES

TABLE OF CONTENTS

GLOBAL      - common styles
WRAPPER     - outer wrapper, for horizontal centering
PAGE        - page wrapper, container for inner column
CONTENT     - wrapper for template-external content
HEADER      - container for site logo
NAVIGATION  - container for navigation lists
BREADCRUMBS - container for breadcrumb trail
FOOTER      - copyright and smallprint
FORM        - form elements
GALLERY     - gallery elements
*/


/* @group GLOBAL */

body {
	margin: 0;
	background-color: white;
}

h1 {
    margin-top: 0.2em;
    margin-bottom: 0.7em;
    font-size: 130%;
    line-height: normal;
    color: #fc3;
}

h2 {
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    font-size: 115%;
    line-height: normal;
    color: #fe9;
}

h2 a:link, h2 a:hover, h2 a:visited, h2 a:active {
	color: #fe9;
}

p {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

hr {
    color: white;
	background-color: #5e7329;
}

a:link, a:hover, a:visited, a:active {
	color: white;
    outline: none; /* IE broken */
}

.left {
	margin-right: 10px !important;
	margin-left: 0 !important;
	float: left;
}

.right {
	margin-right: 0 !important;
	margin-left: 10px !important;
	float: right;
}

.image {
	margin: 5px;
	border: 1px solid white;
}

.gap {
	padding-right: 50px;
}

.clear {
	clear: both;
}

/* @end */

/* @group WRAPPER */

#wrapper {
	background: white url(../assets/backgrounds/wrapper_bg.jpg) no-repeat;
	height: 634px; /* of bg img */
	width: 750px; /* of bg img */
	/* padding-right: 44px; /* balance pot left padding 48-4 */
	margin: 0 auto; /* centred */
	font: 13px/1.4em Georgia, "Times New Roman", Times, serif;
	color: white;
/* background-color: yellow; /* debug */
}

/* @end */

/* @group HEADER */

#header {
}

#logo {
	position: relative;
	top: 0px;
	left: 48px;
	height: 120px; /* of fg img */
	width: 306px; /* of fg img */
/* background-color: red; /* debug */
}

/* @end */

/* @group CONTENT */

#page {
	position: relative;
    left: 128px;
	height: 500px;
    width: 542px; /* 750-128-(128-48) */
/* background-color: green; /* debug */
}

#content {
	clear: left;
	height: 380px;
	overflow: auto;
	padding-right: 10px; /* between content and scroller */
    scrollbar-3dlight-color:    #7f9036;
    scrollbar-arrow-color:      white;
    scrollbar-base-color:       #7f9036;
    scrollbar-face-color:       #7f9036;
    scrollbar-highlight-color:  white;
    scrollbar-shadow-color:     #233106;
    scrollbar-track-color:      #7f9036;
}

/* @end */

/* @group NAVIGATION */

#nav {
	position: relative;
	height: 60px;
/* background-color: #f0f; /* debug */
}

#nav ul {
	position: absolute;
	left: -10px;
	margin: 0;
	padding: 0;
/* background-color: blue; /* debug */
}

#nav li { /* float all list items */
	margin: 0;
	float: left;
	display: block;
/* background-color: #f0f; /* debug */
}

#nav a {
	display: block;
	line-height: 35px;
	padding: 0 10px;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
    color: #fe9;
/* background-color: #f0f; /* debug */
}

#nav li ul { /* hide sub navs below */
	left: 0;
	top: 30px;
	height: 30px;
/* background-color: blue; /* debug */
}

#nav li.on a {
	color: #f90; /* current top nav */
}

#nav li.on ul a {
	float: left; /* ie doesn't inherit the float */
	font-size: 12px;
    color: #fe8;
}

#nav li.on ul a.current {
    color: #fc3; /* current sub nav */
}

#nav li.on a:hover, #nav li.off a:hover { 
	background: url(../assets/backgrounds/butterfly.gif) no-repeat 30% top;
}

#nav li.on ul li a:hover, #nav li.off ul li a:hover { 
	background: url(../assets/backgrounds/butterfly.gif) no-repeat 70% bottom;
}

/* @end */

/* @group BREADCRUMBS */

#breadcrumbs ul {
	margin: 10px 0 0 0;
	padding: 0;
	list-style: none;
}

#breadcrumbs li {
	float: left;
	padding-right: 10px;
}

#breadcrumbs a {
	padding-right: 10px;
	font-size: 11px;
}

/* @end */

/* @group FOOTER */

#footer {
	clear: left;
    padding-top: 20px;
}

#footer p, #footer a {
    margin: 0;
	font-size: 11px;
    color: #5e7329;
}

/* @end */

/* @group FORM */

input, textarea {
	background: #D8E37A;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #66792A;
	border-bottom: 1px solid #66792A;
	border-left: 1px solid #FFFFFF;
	width: 250px;
}

.submit {
    background: #D8E37A;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #66792A;
	border-bottom: 1px solid #66792A;
	border-left: 1px solid #FFFFFF;
	width: 50px;
}

p.error {
    color: #fc3;
}

/* @end */

/* @group GALLERY */

#previews {
	float: left;
	width: 174px; /* (10 + 26 + 10) * 3 + (72 / 2 - (10 + 26) / 2) * 2 */
	/* width: 128px; /* (10 + 26 + 10) * 2 + (72 / 2 - (10 + 26) / 2) * 2 */

}

#transport {
	width: 128px; /* 4 * 32 */
	height: 32px;
	margin: 0 auto;
	padding-left: 3px;
}

#transport img {
	border: none;
}

#thumbnails {
	width: 100%;
	padding-left: 18px; /* (72 / 2 - (10 + 26) / 2) */
}

#thumbnails div {
	float: left;
	display:inline;
	position: relative;
	width: 26px;
	height: 26px;
	margin: 10px;
	padding: 0;
}

#thumbnails img {
	position: absolute;
	left: 0;
	right: 0;
	width: 24px;
	height: 24px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #66792A;
	border-bottom: 1px solid #66792A;
	border-left: 1px solid #FFFFFF;
}

#picture {
	padding: 0;
	width: 334px; /* 1 + 5 + (1 + 320 + 1) + 5 + 1 */
	float: right;
}

#mainImageOutline {
	margin: 0 auto;
	overflow: hidden;
}

#mainImage {
	width: 100%;
	height: 100%;
}

.picture-frame {
	border: 5px solid #D8E37A;
}

.picture-border {
	border-top: 1px solid #66792A;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #66792A;
}

.still {
	float: left;
	line-height: 0;
}

.selectedThumbnail {
	border-top: 1px solid #66792A !important;
	border-right: 1px solid #FFFFFF !important;
	border-bottom: 1px solid #FFFFFF !important;
	border-left: 1px solid #66792A !important;
}

.inFocus {
  	border: 2px solid #D8E37A !important;
}

#caption {
	clear: both;
	padding-top: 0.3em;
}

/* @end */