./*
* @todo max width on content 
*
* Milton Blue: #00aeef
* hover orange/red: #b93f0f
*/

/* GENERAL PAGE STYLES
----------------------- */
html, body, div, ul, ol {margin: 0; padding: 0;}

/*  COMMON STYLES
------------------- */
.hidden {display: none;}
.clear {clear: both; min-height: 2px;}
.overflow {overflow: auto; min-height: 2px;}
.fit {max-width: 100%; height: auto;}
.force-fit {width: 100%; height: auto;}
.top_margin {margin-top: 2em;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.top-space {margin-top: 3em;}

.f_left {float: left; margin: 0 10px 10px 0;}
.f_right {float: right; margin: 0 0 10px 10px;}
.limit_width {max-width: 1100px;}

.large {font-size: 130%;}

.highlight {color: #1976a7;}
.highlight2 {color: #f9d17a;} /* yellowish */
.low {color: #666;}
.bold {font-weight: bold;}

.short {width: 4em;}

/* JavaScript panels and such */
.js .js_hidden,
.js .panel {display: none;}

a.close {visibility: hidden;}
.js a.close {visibility: visible;}


/* Big Call to Action */
#main a.cta_main, 
#main a.cta_main:visited {
	font-family: 'Open Sans', Arial, verdana, sans-serif; font-size: 1.5em; text-decoration: none;
	padding: 0.5em 1em;
	color: #fff; text-shadow: -1px -1px 1px #0096C8;
	background: #00aeef;
}

#main a.cta_main:hover {
	background: #0096C8;
	color: #fff;
}

#main a.cta_main.active {
	text-shadow: none;
	background: #171717;
	color: #999;
}

body {
    background: #dfdcc1;
    font-size: 82.5%;
    font-family: 'Open Sans', georgia, garamond, 'times new roman', serif;
}

@media screen and (min-width: 961px) {
	body {background: url('img/bg_texture.jpg') repeat-x #dfdcc1;}
}

header, section, nav, footer, figure, figcaption, aside {display: block;}

h1, h2 {font-weight: normal;}

/* Headings in group */
hgroup {margin: 0 0 3em 0; border-bottom: 2px solid #000;}
hgroup h1 {font-weight: bold; margin-bottom: 0;}
hgroup h2 {margin-top: 0;}

p {line-height: 150%;}
li {line-height: 200%;}
a img {border: none;}

ul, ol {margin-left: 25px; padding: 0;}

table {margin: 1em 0;}
th, td {padding: 5px 10px 5px 0; text-align: left; vertical-align: top;}

blockquote {
	margin: auto 3em; padding: 1em; background: #e5e5e5;
	text-align: center;
}

figure {margin: 2em 0;}

::selection {background: #00AEEF; color: #fff;}


table.grid {border: 1px solid #888; background: #fff;}
table.grid thead {
	color: #fff;
	background: #29a6e1;
	background: -webkit-linear-gradient(top, #4fbcf0 0%, #29a6e1 100%);
	background: -moz-linear-gradient(top, #4fbcf0 0%, #29a6e1 100%);
	background: -ms-linear-gradient(top, #4fbcf0 0%, #29a6e1 100%);
	background: linear-gradient(top, #4fbcf0 0%, #29a6e1 100%);
}
table.grid th,
table.grid td {
    padding: 0.5em;
    border-style: solid; border-width: 0 1px 1px 0; border-color: #888;
}

table.grid tr.alt th {background: #1d90c6;}
table.grid tr.alt td {background: #eaeaea;}

table.grid tbody th {color: #fff; background: #29a6e1;}
table.grid th {border-right-color: #49d9ca; border-bottom-color: #208bbe;}

/* COMMON LAYOUT ELEMENTS
header, nav, main, footer

Major sections are differention by coloured logo variations which extends 
to page elements such as texture strips and footer bg
use class names to alter those styles

.framing, .gallery, .supplies, .printing

-------------------------- */
    header.main {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 95px;
        background: url('img/header_shadow.png') repeat-x 0 100% transparent;
    }
    
    header.main .inner {
        background: url('img/strip_default.jpg') repeat-x #fff;
        padding-top: 15px;
        height: 73px; /* 88-15 for texture strip */
    }
    
    header.main .inner.gallery_printing {
        background-image: url('img/strip_gallery_printing.jpg');
    }
    header.main .inner.supplies {
        background-image: url('img/strip_supplies.jpg');
    }
    #logo {border: 0; width: 241px; height: 73px; margin: 0 30px 0 10px; float: left;}
    
    
    /* MAIN NAVIGATION */
    #nav {margin: 0; padding: 0;}
    #nav li.top {
        list-style: none; line-height: 150%;
        display: block; float: left; 
        height: 64px; width: 88px;
        padding: 10px 8px 0 8px;
    }
    
    #nav li.wide {width: 133px;}
    #nav li.current {background: url('img/nav_sprite.jpg') #0d4e5d;}
    
    /* section-specific background images for .current 
    NB: some sections use complementary NOT matching colour section, so BG offset may seem odd
    */
    #nav.framing li.current {background-position: 0 -152px; background-color: #0d4e5d;}
    #nav.printing li.current {background-position: 0 -76px; background-color: #442c08;}
    #nav.gallery li.current {background-position: 0 -228px; background-color: #c95612;}
    /* .supplies use default blue */
    
    
    #nav li.top > a {
        display: block;
        color: #2F8FBF;
        text-decoration: none; 
        text-align: center;
		font-size: 130%;
		font-weight: bold; font-style: italic;
        padding-top: 3px;
        height: 57px;
    }
    
    #nav.gallery li.top > a {color: #685312;}
    #nav.supplies li.top > a {color: #567F1F;}
    #nav.printing li.top > a {color: #7F5F00;}
    
    #nav li.top > a:hover {color: #000; text-decoration: underline;}
    #nav li.top.current > a {color: #fff; text-shadow: none;}
    #nav li.top.current > a:hover {color: #fff; text-decoration: none;}
    
    
    /* Drop Navigation */
    nav li {position: relative;}
    nav .drop {
        display: none;
        position: absolute; top: 74px; left: -2em;
        width: 15em; padding: 0.5em 1em 1em 1em;
        background: #fff;
        background: -webkit-linear-gradient(top, #fff 40%, #e2e2e2 100%);
        background: -moz-linear-gradient(top, #fff 40%, #e2e2e2 100%);
        background: -ms-linear-gradient(top, #fff 40%, #e2e2e2 100%);
        background: -o-linear-gradient(top, #fff 40%, #e2e2e2 100%);
        background: linear-gradient(top, #fff 40%, #e2e2e2 100%);
        border-width: 0 1px 1px 1px; border-color: #ccc; border-style: solid;
        -moz-box-shadow: 4px 4px 0 rgba(90,90,90, 0.25);
        -webkit-box-shadow: 4px 4px 0 rgba(90,90,90, 0.25);
        box-shadow: 4px 4px 0 rgba(90,90,90, 0.25);
    }
    nav .drop.active {display:block;}
    nav .drop.wide {width: 40em; left: -10em;}
    
    nav .drop li {list-style-type: disc;  color: #1976a7;}
    nav .drop a {color: #2f8fbf; text-decoration: none;}
    nav .drop a:hover {color: #b93f0f; text-decoration: underline;}
    nav .drop .col2 {margin: 0 0.5em 0 0;}
    
    nav h4 {margin-bottom: 0;}
    nav .drop h4 a,
    nav .drop h4 a:visited {color: #b93f0f;}
    
    #main {
        margin: 103px 15px 15px 15px;
        padding-bottom: 2em;
        overflow: auto;
        background: #fff; color: #333;
        border: 2px solid #eaeaea;
        min-height: 300px;
        -moz-box-shadow: 1px 1px 2px #aaa;
        -webkit-box-shadow: 1px 1px 2px #aaa;
        box-shadow: 1px 1px 2px #aaa;
    }
    
    /* COLOURED STRIP across top of #main div
    different colour by site section 
    framing is same as default
    */
    #main_strip {display: block; width: 100%; height: 20px; margin-bottom: 10px; background: url('img/strips_main2.png') no-repeat #7fb5ca;}
    #main_strip.framing {background-position: 0 0; background-color: #7fb5ca;}
    #main_strip.gallery {background-position: 0 -20px; background-color: #fec64a;}
    #main_strip.supplies {background-position: 0 -40px; background-color: #83c241;}
    #main_strip.printing {background-position: 0 -60px; background-color: #f66b24;}
    
    
    /* Default links & text color */
    #main a {color: #1976a7;}
    #main a:visited {color: #3e5d6d;}
    #main a:hover {color: #b93f0f;}
    
    #main.supplies a {color: #3c8700;}
    #main.supplies a:visited {color: #2f5b0b;}
    #main.supplies a:hover {color: #1976A7;}
    
    #sidebar {float: left; width: 25%; margin-left: 1%;} /* was 14% */
    #content {max-width: 1100px; margin-left: 28%; margin-right: 2%;} /* was 17% */
    
        #content.full {margin-left: 2%;} /* was 1%, not fully tested */
        
        /* narrower sidebar, wider content option (use together) */
		#sidebar.narrow {width: 18%;}
		#content.wide   {margin-left: 21%; max-width: none;}
        

        /* Align top sidebar menu and content heading */    
        #sidebar ul:first-child {margin-top: 17px;}
        #content h1:first-child {margin-top: 20px;}
        
    footer {
        margin: 0 15px 0 15px;
        padding: 15px;
        height: 45px;
        background: url('img/footer_textures2.png') no-repeat #243c4d; color: #fff;
    }
    
    footer.gallery {background-position: 0 -75px; background-color: #eaa62f; color: #402a17;}
    footer.supplies {background-position: 0 -150px; background-color: #234f00;}
    footer.printing {background-position: 0 -225px; background-color: #76300b;}
    
    footer a {color: #fff; text-decoration: none;}
    footer a.low {color: #ccc;}
    footer a:hover {text-decoration: underline;}
    
    /* Footer link styles per section */
    footer.gallery a {color: #402a17;}
	footer.gallery a.low {color: #9f510c;}
    footer.supplies a.low {color: #aabf8f;}
    footer.printing a.low {color: #cf7240;}
    
    footer div {float: left; width: 33%;}
    #fc3 {float: right !important;}


/* FLOATED COLUMNS
------------------- */
.colParent {overflow: auto;}
.col,
.col2,
.col3,
.col4 {float: left; margin: 0 15px 20px 0; padding: 0;}

.col {width: auto;}
.col2 {width: 48%;}
.col3 {width: 32%;}
.col4 {width: 24%;}

.feature_box.last,
.feature_box .last {margin-right: 0 !important;} /* two selectors are not a mistake */

.col.last
.col2.last,
.col3.last,
.col4.last {margin-right: 0;}


/* SUB ELEMENTS 
---------------- */
#sidebar .menu {margin-left: 0;}
#sidebar .menu li {list-style: none; margin-bottom: 1em; line-height: 100%;}
#sidebar .menu a {color: #1976a7; text-decoration: none; line-height: 130%;}
#sidebar .menu a:hover {color: #000; text-decoration: underline;}

#sidebar .submenu {margin-bottom: 10px;}
#sidebar .submenu li {list-style: circle;}
#sidebar .submenu li a {font-weight: normal; line-height: 150%;}

    /* sidebar in printing section */
    #main.printing #sidebar .menu a {color: #76300b;}
    #main.printing #sidebar .menu a:hover {color: #f66b24;}
    
.side_images {width: 200px; margin: 3em 0;}
.side_images img {display: block; width: 200px; height: 45px; border: none; margin-bottom: 5px;}

/* Feature (block) link */
a.feature-block {
	display: block; 
	margin: 2em 0; padding: 1.5em 1em; max-width: 15em;
	background:  url('img/footer_textures2.png') no-repeat 0 -75px #eaa62f; 
	font-weight: bold; text-decoration: none;
	text-shadow: -1px -1px 1px #E6E600;
	border-color: #c87800; border-width: 1px; border-style: solid;
}
#main a.feature-block {color: #222;}
#main a.feature-block:hover {text-decoration: underline; text-shadow: none;}

a.feature-block.style2 {background-position: 0 0; background-color: #243c4d; border-color: #000;}
#main a.feature-block.style2 {text-shadow: -1px -1px 1px #000; color: #b4e6f0;}
#main a.feature-block.style2:hover {color: #fff;}

a.feature-block.style3 {background-position: -80px -230px; background-color: #76300b; border-color: #000;}
#main a.feature-block.style3 {text-shadow: none; color: #fff;}
#main a.feature-block.style3:hover {color: #fff;}


/** LISTS **
-------------*/
ul.space li , ul.sub li{line-height: 100%; margin-top: 0.5em;}
ul.space li ul, ul.sub li ul {margin-top: 0.5em;}

ul.space_more li {margin-top: 1em;}
ul.space_more li ul {margin-top: 1em;}

li .sub {display: block; color: #3f7397;} /* sub element, new line, lighter */


/* Block list label */
ul.table {margin: 0 0 2em 0; padding: 0;}
ul.table li {list-style: none; margin-bottom: 0.5em;}
ul.table .label {font-weight: bold; display: block; float: left; width: 7em;}
ul.table.w13 .label {width: 13em;}
ul.table.nobold .label {font-weight: normal;}


/** TAG CLOUD LIST **/
.tag_cloud li {list-style-type: none; display: inline; margin-right: 0.5em;}
.tag_cloud .size_2 {font-size: 130%;}
.tag_cloud .size_3 {font-size: 180%;}
.tag_cloud .size_4 {font-size: 210%;}


/** "snapshot" decorative images **/
div.snapshots {margin: 2em 0 1em 0;}
div.snapshots img,
img.bordered {
    margin: 0 1em 1em 0; padding: 7px; border: 3px solid #d5d5d5; background: #333;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-box-shadow: 1px 1px 2px #777;
    box-shadow: 1px 1px 2px #777;
}
img.bordered2 {border: 1px solid #999;} /* light bordering */

div.snapshots img.s220 {width: 220px; height: 150px;}


/** Box style links (grid look) **/
#main .box-links {overflow: auto;}
#main .box-links a {
    display: block; float: left;
    width: 11em; margin: 0 0.5em 0.5em 0; padding: 0 0.5em;
    line-height: 3em;
    background: #1E91C8; color: #fff;
}
#main .box-links a.wide {width: 23.5em;} /* double width, align with 2 normals */
#main .box-links a:hover {background: #243c4d; color: #fff;}

    #main.printing .box-links a {background: #76300b;}
    #main.printing .box-links a:hover {background: #f66b24;}


    
/* FEATURE BLOCKs
 - background on heading
 - heading links
 - p indent
 use with .col2 for two across like digital printing 
*/
.feature_block h2 {
	color: #fff; background: url('img/nav_sprite.jpg') no-repeat #144c5b; margin-bottom: 1em; padding: 0.4em;
}
.feature_block p {margin: 0 1em 1em 1em;}
#main .feature_block h2 a, 
#main .feature_block h2 a:visited {color: #fff; text-decoration: none;}
#main .feature_block h2 a:hover {color: #e5dd96;}


    
/** Button Style Link (compact size) **/
#main a.button,
#main a.button_compact {
    display: block;  padding: 0.3em 0;
    text-align: center; 
    font-weight: bold; text-decoration: none;
    text-shadow: 1px 1px 0 #1976a7;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    background: #35a4de; color: #fff;
}

#main a.button,
#main a.button_compact:visited {color: #fff;}

#main a.button:hover,
#main a.button_compact:hover {
    background: #B93F0F; text-shadow: 1px 1px 0 #444;
    color: #fff;
}
	/* compact size */
	#main a.button_compact {width: 5em;} 
	
	/* inline button */
	#main a.button.inline { display: inline; padding: 0.5em 1em;}
	   
    
/* HOME PAGE
------------------ */
#home_content {
    float: left;
    margin: 0 2%;
    width: 62%;
    border: none;
    
    /* content & contact widths + margins = 100%. Chrome ok
    IE8 & FF3 needs 98% total to avoid breaking
    IE6 wanted 97%! Can you beleive that?
    
    11 October 2011
    Trying again without the borders. Need that alignment!
    */
}

#home_side {
    float: left; border: none;
    margin: 0 2% 0;
    width: 29%;
}

.feature_box {
    float: left;
    margin: 0 2% 2% 0; padding: 0;
    min-height: 80px;
}

.feature_box h2 {font-weight: bold; margin-top: 0;}

.feature_box.box1 {width: 100%; margin-right: 0;float: none;clear: left;} /* full width */
.feature_box.box2 {width: 49%; padding: 0;}
.feature_box.box3 {width: 31%;}
.feature_box.box3.last {width: 32%;} /* add 1% to align with the two col boxes above */


    /* HOME ELEMENTS (boxes) 
    ---------------------------*/
    #mining, #framing {height: 190px; border-top: 8px solid #222; border-color:  #222 #ccc  #ccc; border-width: 8px 0 0; border-style: solid;}
    #mining {
        border-top: 8px solid #222;
        padding-top: 10px;
        background: url(img/mining_bg.png) repeat-x 0 100% #e0c010;
        background: -moz-linear-gradient(top, #e0c010 0%, #eadf48 96%, #f7f067 100%);
        
        background: -webkit-linear-gradient(top, #E0C010 0%,#EADF48 96%,#F7F067 100%);
        background: -o-linear-gradient(top, #e0c010 0%,#eadf48 96%,#f7f067 100%);
        background: -ms-linear-gradient(top, #e0c010 0%,#eadf48 96%,#f7f067 100%);
        background: linear-gradient(top, #e0c010 0%,#eadf48 96%,#f7f067 100%);
    }
    
        #mining h3 a,
        #mining h3 a:visited {color: #000; text-decoration: none; text-shadow: -1px -1px 0 #f8e788; }
        #mining h3 a:hover {color: #563522; text-decoration: underline;}
        
        #mining h3 {font-size: 1em; font-weight: normal; text-align: center; margin: 0 0 2em 0;}
        #mining h3 span {font-size: 1.5em;  display: block;  text-align: center; font-weight: bold; text-decoration: underline;}
        
        #mining ul {margin-left: 3em;}
        #mining li {line-height: 150%;  }
        
        #mining_ticker {margin: 1em 0 0 0; padding: 0; height: 45px; background: url(img/coal.jpg) no-repeat #222; border-top: 2px dashed #e0c010; }
        
        #mining_ticker span {
            font-size: 1.2em; font-style: italic; text-align: center; color: #fff;
            width: 16em;
            background: #000;
            background: rgba(0, 0, 0, 0.6);
            display: block; height: 45px; line-height: 45px; margin: 0 auto;
        }
        
    
    /* Framing feature box */
    #framing {
        height: 209px; border: none;
        background: url('img/framing_bg2.jpg') #333;
        padding: 0; color: #fff;
    }
    
        #framing div {margin: 2em; padding: 0;}
        #framing h2 {margin: 0;}
        #framing a,
        #framing a:visited {color: #44bdf9; text-decoration: none;}
        
        #framing a:hover {color: #fff; text-decoration: underline;}
        
        
    /* Large Format Printing feature box */
    #large_printing {
        border-color: #1792bf;
        background: #e6e6e6; border: 1px solid #BBB;
    }
    
    #large_printing h2 {
        margin: 0; padding: 0.5em 0;
        text-align: center; font-style: italic;
        border-bottom: 1px solid #c5f2fb; background: #25a4d1; color: #fff;
    }
    #large_printing .col2 {
        padding: 0 0.5em 0 1em;
        width: 45%;
    }
    
    @media all and (min-width: 1200px) {
	    #large_printing .col2 {padding-right: 1em;}
    }
    
    #large_printing li {line-height: 150%;}
    #large_printing a.button_compact {
        width: 8em;
        border: 1px solid #c5f2fb;
        border-radius: 8px; -moz-border-radius: 8px;
        text-shadow: none;  font-weight: normal;
        background: #444;
    }
    
    .borderradius #large_printing a.button_compact {border: none;} /* no border with rounded corners */
        
    
    /* House Gallery */
	#house_gallery h2 { background: #EAA62F; padding: 0.3em; }
	#house_gallery ul { margin: auto 0; padding: 0; }
	#house_gallery li { list-style: none; }
	
	#house_gallery a {
		text-decoration: none;
		display: block;
		padding-left: 0.5em;
		max-width: 350px;
	}
	#house_gallery a:hover { background: #f7c546; color: #000; }
    
    
		/* Enquiry Model 
		 * (probably move to more general) */
		 .contact_modal {
			display: none;
			background: #333;
			background: rgba(0,0,0, 0.9);
			color: #fff;
			padding: 1em;
			max-width: 30em;
			position: absolute;
			right: 4%;
		 }
		 .contact_modal h3 {margin: 0 0 0.5em 0;}
		 #main .contact_modal a,
		 #main .contact_modal a:visited {color: #fec64a;}
		 
    /* Art Supplies & Tertiary Links */
    #art_supplies h2 { background: #b7cfa4; padding: 0.3em; }
    #art_supplies a.img {display: block; text-align: center;}
    #art_supplies img {margin: 0 auto; border: none; width: 200px; height: 118px;}
    
        /* Services Links (icons) for secondary featured 
        * @todo contain in feature_box (no visible boundary) to maintain grid
        */
        #services_iconed {clear: left; margin: 0; padding: 0;}
        #services_iconed li {list-style: none;}
        #services_iconed a {
			display: block; width: 13em;
			padding-left: 80px; margin: 0 0 5px 0;
			height: 55px; line-height: 50px;
			background: url('img/services_sprite2.png') no-repeat;
			text-decoration: none;
        }
        #services_iconed a.block_mounting {background-position: 0 -55px;}
        #services_iconed a.gallery_hanging {background-position: 0 -110px; padding-left: 65px;}
        
        /* Hover */
		#services_iconed a:hover {background-position: 0 -165px;}
		#services_iconed a.block_mounting:hover {background-position: 0 -220px;}
		#services_iconed a.gallery_hanging:hover {background-position: 0 -275px;}
        
        /* One line on wider screens */
		@media screen and (min-width: 1260px) {
			#services_iconed {overflow: auto;}
			#services_iconed a {
				float: left;
				width: 21%;
			}
		}
        
    #home_side address {
        font-size: 1.2em;
        padding-top: 30px; 
        background: url(img/dots.png) no-repeat 50px 0; 
        color: #1976A7; 
        font-style: normal;
    }
    
    #home_side .description {
	    padding-top: 15px;
	    margin-top: 2em;
	    background: url(img/dots.png) no-repeat 50px 0;
    }


/* HOUSE GALLERY SECTION 
-------------------------- */
#artists {overflow: auto;}
#artists a.block {
    display: block; float: left;
    width: 14em; height: 5em; padding: 0.5em;
    border: 1px solid #fff;
    margin: 0 0.5em 0.5em 0;
    text-decoration: none;
    color: #1976A7;
}
#artists a.block:hover {border-color: #b9c8ed;}
#artists a.block:hover h3 {text-decoration: underline;}

#artists a.block h3 {margin: 0;}
#artists a.block p {color: #000; margin: 0;}

    /* Artist sample works */
    #works {margin-top: 1em; padding-top: 1em; overflow: auto;}
    
    #works img {
        border: none;
    }
    
    #works section {overflow: auto; margin-bottom: 1em; padding: 1em 0; border-top: 1px solid #ccc;}
    #works a.thumb {float: left; margin: 0 1em 0 0;}
    #works h3 {margin: 0 0 0.5em 0;}
    #works dt {display: inline-block; margin: 0 0.2em 0 0; color: #C99800;}
    #works dd {display: inline-block; margin: 0 2.5em 0 0 ; }


/* FRAMING SECTION
--------------------- */
#photo_grid .cell {display: block; float: left; margin: 0 2em 2em 0; padding: 0; text-align: center;}

#photo_grid.framing .cell {width: 224px; height: 184px;}
#photo_grid.framing .cell img {width: 220px; height: 150px; border: 2px solid #243c4d;}
#photo_grid a.cell {text-decoration: none;}

#framed {
	padding: 55px 55px; width: 290px; height: 182px;
    background: url('img/framing/frame_bg2.jpg') no-repeat #243b4b;
    color: #fff;
}
#framed ul {margin: 10px 0; padding: 0; float: left; width: 49%;}
#framed li {list-style: none; line-height: 200%; text-align: center;}

/* framing supplies */
#supplies-container div.panel {
    background: url(img/canvas_light.jpg);
    padding: 0 0 1em 15px;
    -moz-box-shadow: 0 1px 4px #666;    
    -webkit-box-shadow: 0 1px 4px #666; 
}
#supplies-container h2 {margin: 0 0 0.5em -15px; padding: 0.2em; background: #243C4D; color: #fff;}
#supplies-container li {margin-top: 0.5em;} /* .space */


/* Contact 
------------*/
img#building {width: 350px; height: 237px; border: 3px solid #555;}
#google-map.on {width: 530px; height: 400px; border: 2px solid #1976a7;}


/* About Us 
------------*/
.desktop .staff {
	background: url(img/splats_1.jpg) no-repeat transparent;
}

.staff article {
	margin-bottom: 2em;
	border-bottom: 1px solid #ddd;
	padding-bottom: 2em;
	overflow: auto;
}
.staff h2 {
	margin: 0;
	font-weight: bold;
}

.staff img { width: 100px; height: 100px; border: 3px solid #333; float: left; margin: 0 1em 1em 0; }

.staff .job-title {
	font-weight: bold;
	margin-top: 0;
	color: #8b3109;
}


/* MOUNTING & LAMINATING SECTION
--------------------------------- */
.mounting_services {border-bottom: 1px solid #bbb;}
.mounting_services h2 {margin-bottom: 0;}
#main .mounting_services a {color: #1976a7;}
#main .mounting_services a:visited {color: #204b62;}

#main .mounting_services a:hover {color: #43810a;}

/* Mounting Services : 3 across on wide resolutions */
@media screen and (min-width: 1575px) {
	
	.mounting_services {float: left; width: 30.5%; margin-right: 2%; border: none;}
	.mounting_services h2 {color: #fff; background: url('img/nav_sprite.jpg') no-repeat #144c5b; margin-bottom: 1em; padding: 0.4em;}
	#main .mounting_services h2 a {color: #fff; text-decoration: none;}
	#main .mounting_services h2 a:visited,
	#main .mounting_services h2 a:hover {color: #aaf7f6;}
	.mounting_services p {margin: 0 1em 1em 1em;}
	.mounting_services p a {font-weight: bold;}
}
	
	/* Block mounting (maybe others) price quote form */
	.pricing-form {padding: 1%; width: 47.5%; float: left;}
	.pricing-form h2 {margin: 0 0 1em 0;}
	.pricing-form div {margin: 0 0 1em 0;}
	.pricing-form label.block {font-weight: bold; width: 7em; display: inline-block;}
	.pricing-form input[type=radio] {margin-left: 0.5em;}
	.pricing-form #bm_quote_btn {margin-left: 7em;}
	
	.price-box {
		margin: 2em 0;
		padding: 1em;
		background: #f0f0f0;
		border: 1px solid #ddd;
		overflow: auto;
	}
	
	/* Box layout
	- default is 50/50 split
	- above 1450px do 2/3 split (1/3 enough for result, not swimming in big space)
	- on mobile condense to single column (full width). Still working out how to target retina px
	*/
	.price-box .result {float: left; margin: 0; border-left: 1px solid #ccc; width: 49.5%;} /* reduce for IE? */
	.price-box .result .inner {margin: 0 2em; padding: 0;}
	
	@media screen and (min-width: 1450px) {
		.pricing-form {width: 64%;}
		.price-box .result {width: 33.9%;}
	}
	
	@media screen and (max-width: 450px) {
		.pricing-form {float: none; width: auto;}	
		.price-box .result {float: none; width: auto; border-top: 1px solid #ccc; border-left: none;}	
	}
	
	.price-box .price {
		font-size: 2em; color: #1976a7; text-align: center;
	}
	
	.price-box .result li {line-height: 160%;}
	.price-box .result strong {font-weight: normal; color: #1976a7;}
	
	.price-box .result .discount {
		padding: 0.5em; text-align: center;
		background: #7bd7fb; color: #222;
		-moz-border-radius: 1.5em;
		-webkit-border-radius: 1.5em;
		border-radius: 1.5em;
	}


/* DIGITAL PRINTING SECTION
----------------------------- */
.printing .feature_block h2 {background-position: 0 -228px; background-color: #c95812;} /* orange segment */

.price-notice {
	padding: 1px 2em 2em;
    background: #B51212;
    color: white;
    max-width: 30em;
    margin: 2em auto;
    border-radius: 5px;
}

.price-notice h2 {
	border-bottom: 1px solid #EC5151;
    padding-bottom: 0.5em;
}


/* ART SUPPLIES SECTION 
------------------------- */
.prodlist {
	float: left; width: 47%; margin: 0 1em 1em 0; padding: 1%;
	background: url('img/art_blackboard.jpg') no-repeat;
}
.prodlist.last {margin-right: 0;}

#main.supplies .prodlist a {color: #92c90f; text-decoration: none;}	/* sorry for the specificity race. live & learn */
#main.supplies .prodlist a:visited {color: #729914;}
#main.supplies .prodlist a:hover {color: #23cfde; text-decoration: underline;}


.supply_sect h3 {margin-top: 10px; color: #449800; font-size: 150%;}
.supply_sect .toggle {visibility: hidden; cursor: pointer; color: #00aeef; text-decoration: underline; font-size: 0.7em; font-weight: normal; margin-left: 1em;}
.supply_sect .toggle:hover {color: #0a84af;}

.supply_sect {margin-top: 2em; border-top: 1px solid #ccc;}
.supply_sect.closed {height: 7em; color: #888; overflow: hidden;}
.supply_sect.active {background: #f0f0f0;}




/* EXHIBITIONS
------------------- */
article.exhibition {margin-bottom: 2em; font-size: 200%; overflow: auto;}

.exhibition .small,
.exhibition sup {font-size: 50%;}

.exhibition .tower {float: left; margin-right: 1em; width: 25%;}
.exhibition .tower img {max-width: 100%; height: auto;}

.exhibition .copy {float: left; width: 58%;}


.exhibition hgroup {border: none; margin: 0;}
.exhibition h1 {margin: 0;}
.exhibition h2 {margin: 0; font-size: 1em;}

.exhibition .opening {
	margin: 3em 0;
	background: url(img/twirl.png) 0 50% no-repeat transparent;
	padding-left: 70px;
	color: #378881;
}
.exhibition .opening h3 {font-size: 75%; font-weight: normal; margin: 0;}
.exhibition .opening p {margin: 0; font-weight: bold;}

/*.exhibition .dates {margin-bottom: 3em;}*/
.exhibition .dates h3,
.exhibition .dates p {margin: 0;}

/*
.exhib-dates {
	padding: 1em 1em 1em 4em;
	margin-left: -4em;
	background: #c64a0c; color: #fff;
}
.exhib-dates p {margin: 0;}
.exhib-dates p:first-child {font-size: 1.5em; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);}
*/

/* Temporal Styles : e.g. current exhibition / event */
.spr-exhib {
    background: url("img/dots.png") no-repeat 50px 0 transparent;
    margin-top: 2em;
    padding-top: 30px;
}
.spr-exhib img {border: 5px solid #c4ae64;}

/* Summary of Events (i.e. overview for the year) */
.exhib_summary { margin: 4em auto 4em auto; max-width: 40em; }
.exhib_summary h2 { text-align: center; background: #FEC64A; padding: 0.3em 0; }
.exhib_summary ul {margin:  auto 0;padding: 0;}
.exhib_summary li { list-style: none; margin: 0 0 1em 0; padding: 0;}
.exhib_summary li strong {display: inline-block; width: 10em; margin-right: 1em;}



/** Sitemap **/
#sitemap section h2 {color: #fff; padding-left: 0.5em;}

h2.framing {background: #2f8fbf;}
h2.gallery {background: #eaa624;}
h2.supplies {background: #567f1f;}
h2.printing {background: #f66b24;}



/* PRINT */
@media print {
	body {background: #fff;}
	header {background: transparent; border-bottom: 2px solid #000;}
	header .inner {padding: 0; background: transparent;}
	
	nav,
	footer,
	#main_strip,
	#home_side .button_compact,
	#home_side .button,
	.no_print {display: none !important;}
	
	#main {border: none; margin: 110px 0 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
	
	img.bordered,
	div.snapshots img {background: #ddd;}
	
	
	/* Home page */
	.feature_box {float: none;}
	#mining, #framing,
	box2,
	box3 {width: 95%; height: auto; min-height: 0;}
	
	#services_iconed {display: none;}
	
	#mining h3 a {text-shadow: none;}
	#mining_ticker {border: none; background: transparent; color: #000;}
	#framing {background: #fff; color: #000; border: 1px solid #bbb;}
	#main #framing a {color: #000; text-decoration: underline;}
	
	/* Contact */
	#building_photo.f_right {float: none; margin: 0 0 2em 0; padding: 0;}
	img#building {border: 1px solid #000;}
}


/** Low res Desktop / Tablet **/
@media screen and (max-width: 980px) {
	#logo {float: none;}
	header {height: auto; background: #fff;}
	nav {
		position: relative;
		border-width: 1px 0 1px 0; border-style: solid; border-color: #bbb;
		background: #f2f2f2;
		background: -webkit-linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
		background: -moz-linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
		background: -ms-linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
		background: -o-linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
		background: linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
	}
	
	#nav {overflow: hidden; /* avoid scroll bars */}
	#main {margin-top: 175px;}
}

#ie-warning {
	margin: 15px; padding: 1em 1em 0 1em; text-align: center;
	background: no-repeat #222; color: #fff; border: 2px solid #260809;
}
#ie-warning p {margin: 0 0 1em 0;}
#ie-warning a {color: #eba748;}
#ie-warning a:visited {color: #d3953d;}
#ie-warning a:hover {color: #f7cb7f;}


/** Image based "Photo Frame" home section */
#home-framing hgroup {
	max-width: 36em;
	margin: 0 auto;
	padding: 1em;
	border: none;
	text-align: center;
}
#home-framing h1 {font-weight: normal;}
#home-framing h2 {font-size: 2em;}

#home-framing ul.types {margin: 0; padding: 0;}
#home-framing li {display: inline-block; margin: 0 2em 1em 0; list-style: none;}

ul.buttons {margin: 2em auto; text-align: center;}
#home-framing ul.buttons li {list-style: none; display: inline; margin-right: 1em;}
#main ul.buttons a {
	padding: 0.7em 1.5em;
	font-weight: bold;
	color: #000;
	background: #93d4f6;
	border: 2px solid #78b2d1;
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.4s ease-in-out;
	transition: background 0.4s ease-in-out;
}

#main ul.buttons a:hover {background: #A1DEFA; border-color: #66ADBE;}


.exhib {overflow: auto; margin-bottom: 3em;  padding-bottom: 2em; border-width: 3px 0 3px 0; border-style: solid; border-color: #536772;}
section.exhib h1 {font-weight: bold;}
.exhib h2 {margin-top: 2em;}
#main .exhib a {color: #b53a19; font-weight: bold;}
#main .exhib a:hover {color: #116a8b;}

/* Social Media */
div.social {margin: 4em 0;}
p.fb-link {height: 35px; line-height: 35px; font-weight: bold; vertical-align: middle;}
.fb-link img {width: 35px; height: 35px; border: none; margin-right: 10px; vertical-align: middle;}

footer .fb-link img {width: 25px; height: 25px; border: 2px solid #fff;}
footer.gallery .fb-link img {border-color: #F7CD84;}
footer.supplies .fb-link img {border-color: #123316;}
footer.printing .fb-link img {border-color: #531F1F;}
footer.mount-laminate .fb-link img,
footer.framing .fb-link img {border-color: #0F2931;}


footer .social img {width: 24px; height: 24px; margin-right: 10px; border: none;}


/* Mailing List Subscription Forms
------------------------------------- */
article.subscribe {
	margin: 3em 0;
	padding: 1.75em;
	font-family: 'Open Sans', arial,sans-serif;
	
	max-width: 600px;
	
	background: #F1D613;
	background: -moz-linear-gradient(top, #F7E565 0%, #F7D650 100%);
	background: -ms-linear-gradient(top, #F7E565 0%, #F7D650 100%);
	background: -webkit-linear-gradient(top, #F7E565 0%, #F7D650 100%);
	background: linear-gradient(top, #F7E565 0%, #F7D650 100%);
	border-right: 1px solid #C0B1A8;
	border-bottom: 1px solid #C0B1A8;
}

article.subscribe h1,
article.subscribe h2 {text-align: center;}

article.subscribe h1 {
	font-size: 2.2em; font-weight:bold;
	margin-top: 0;
}

article.subscribe .feature {
	font-size: 1.2em;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 0.5em 0;
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, #F3E686 50%, rgba(255, 255, 255, 0) 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, #F3E686 50%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #F3E686 50%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(left, rgba(255, 255, 255, 0) 0, #F3E686 50%, rgba(255, 255, 255, 0) 100%);
	font-weight: bold;
}

.mc-field-group {
	margin: 0 auto 2em auto;
	max-width: 20em;
}

.mc-field-group label {
	display: block;
	font-weight: bold;
}

.mc-field-group input {
	background: #eee;
	padding: 6px;
	border: 1px solid #ccc;
	width: 20em;
}

#mc_embed_signup .button {
	background: #3875C4;
	color: #FFF;
	border-radius: 3px;
	border: none;
	padding: 0.5em 1em;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: background 0.2s;
	transition: background 0.2s;
}
#mc_embed_signup .button:hover {
	background: #23579B;
}

#mce-error-response {
	background: #6B6B6B;
	color: #FFF;
	border-radius: 5px;
	text-align: center;
	max-width: 20em;
	margin: 0 auto;
}

#mce-error-response li {
	list-style: none;
}

	/* "Minor" variation for inner pages */
	article.subscribe.minor {
		background: #D2EAF0;
		padding: 1em;
		border: none;
	}
	
	article.subscribe.minor h2 {
		margin: 0.3em 0 1em 0;
		text-align: left;
		padding-bottom: 1em;
		border-bottom: 1px solid #B8CEE9;
	}
		
	article.subscribe.minor .mc-field-group {margin: 0 0 1em 0; max-width: none;}
	article.subscribe.minor .mc-field-group input {background: #fff;}
	article.subscribe.minor .indicates-required {margin-top: 1.5em;}
	

/**
* Product landing pages (e.g. Canvas, Digital Printing, Gallery hanging)
*/
.price-split,
.price-horiz,
table.prices  {	font-family: arial,sans-serif; }


.product_details {max-width: 1400px; overflow: auto;}
.part1 {width: 55.9%; margin-right: 2%; float: left;}
.main {width: 42%; float: left;}

.more_photos {margin: 2em 0;}
.more_photos img {margin: 0 0.5em 0.5em 0;}


table.prices {width: 100%; margin-bottom: 3em;}

table.prices th, 
table.prices td {padding: 0.5em; font-weight: normal;}

table.prices tbody tr:nth-child(even) {
	background: #eee;
}
table.prices caption {
	padding: 0.5em;
	background: #6d450a; color: #fff;
	font-weight: bold; letter-spacing: 1px;
	text-align: left;
}

table.prices thead {background: #E7DEAB;}

.supplies table.prices caption {
	background: #1DA996;
	text-shadow: none;
}

table.prices .alt {background: #eaeaea;}


.product_details .col2 {width: 46%; margin-right: 8%;}
.product_details .last {margin-right: 0;}

	/* Disabled #order {width: 42%; margin-top: 7%; background: #f9e99d; padding: 1px 2% 2% 2%;} */


/**
 * New content & design changes Sep 2012
 */
 
dt {font-weight: bold;}
dd {margin: 0.5em 0 2em 0;}

.option-grid .cell {
	display: inline-block;
	width: 45%; margin: 0 4% 3% 0;
	vertical-align: top;
}
	@media screen and (min-width: 1400px) {
		.option-grid .cell {width: 29%;}
	}
	

#order {
	margin: 0 auto 3em auto;
	max-width: 50em;
	box-shadow: 2px 2px 12px rgba(0,0,0, 0.5);
	padding: 1px; /* for .inner margin to push off */
	background: url(img/order-bg.jpg) repeat-x #222333;
	border-top: 3px solid #bbb; border-left: 3px solid #ccc;
}

#order .inner {margin: 2em; padding: 1em 1em 1em 100px; border-bottom: 2px solid #ccc; background: url(img/order.jpg) 15px 15px no-repeat #fff;}


/* revert to one column */
@media screen and (max-width: 845px) {
	.part1 {width: auto; float: none;}
	.main {width: auto; float: none;}
	
	.product_details .col2 {width: auto; margin-right: 0; float: none;}
	/* Disabled #order {width: auto; float: none; max-width: 30em;} */
}

/**
 * Split column price tables ( Poster Printing )
 */
.price-split {
    overflow: auto;
	border-top: 2px solid #333;
	color: #555;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.price-split .main {
	font-family: arial,sans-serif;
	color:  #fff; background: #333;
	font-size: 2em; font-weight: bold;
	padding: 2%; width: 40%;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.price-split:hover {border-color: #f66b24; color: #000;}
	.price-split:hover .main {background: #f66b24;}
	
	.price-split .main span {display: block; font-size: 0.5em; text-shadow: none;}


/**
 * Horizontal Price Table
 */
.price-horiz {margin-bottom: 4em; background: #ddd; box-shadow: 0 0 4px #444;}
 
.price-horiz thead {
	color: #fff; background: #222;
	background: -webkit-linear-gradient(top, #444 0%, #222 100%);
	background: -moz-linear-gradient(top, #444 0%, #222 100%);
	background: -ms-linear-gradient(top, #444 0%, #222 100%);
	background: -o-linear-gradient(top, #444 0%, #222 100%);
	background: linear-gradient(top, #444 0%, #222 100%);
}
.price-horiz thead th {
	padding: 0.5em;
	font-size: 2em; border-right: 1px solid #666;
	-o-transition: background 0.3s;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
}
.price-horiz thead th:hover {background: #f66b24;}
.price-horiz th span {display: block; font-size: 0.5em;}
.price-horiz td,
.price-horiz tbody th {padding: 1em; border-bottom: 1px solid #ccc; border-right: 1px solid #fff;}

.price-horiz tbody th {background: #adc1ca; border-bottom-color: #9caeb6;}

	/* Colour Context (Scans) */
	.price-horiz tbody .colour1 th {background: #08A3FA; color: #fff;}
	.price-horiz tbody .colour2 th {background: #057BCA; color: #fff;}
	.price-horiz tbody .bw th {background: #c5c5c5;}

/**
* Order Now -- Call to Action
* Has large and small button format, which share a sprite as they can be on the same page
* @todo move to main style sheet (perhaps!)
*/
.cta_major {
	width: 297px; height: 106px; margin: 3em auto;
	background: url(img/order-sprite4.jpg) -371px 0 no-repeat; /* shadow surrounding <a> */
}
.cta_major a,
a.cta_small {
	display: block; position: relative; margin: 0 auto; 
	width: 264px; height: 89px;
	text-align: center; font-weight: bold;
}
.cta_major span.cover,
a.cta_small span.cover {
	display: block; width: 264px; height: 89px;
	position: absolute; top: 0; left: 0;
	background: url(img/order-sprite4.jpg) -104px 0 no-repeat;
}

.cta_major a:hover span.cover {background-position: -104px -89px;}

/* Small version changes */
a.cta_small {width: 104px; height: 35px; margin: 0;}
a.cta_small span.cover {width: 104px; height: 35px; background-position: 0 0;}
a.cta_small:hover span.cover {background-position: 0 -35px;}

/* Basic Mobile Styling
not dependant on Media Queries
reduces file size */

.mobile #frame .edge {background: transparent; display: none;}
.mobile #frame {background: #e15d04; height: auto;}
.mobile #frame .stuff {margin: 1em;}

.mobile #large_printing .col2 {width: 96%; margin-right: 0;}

.mobile #home_side {float: none; clear: both; width: auto; margin: 2%;}

