/* RESET */
* { margin: 0; padding: 0; }
header, section, footer, aside, nav, article, figure, figcaption { display: block; }
a { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }
ul,li { list-style-type: none; }
img { border: none; }

/* MAIN STUFF */
body { color: #666; margin: 0 auto; max-width: 960px; width: 95%; font-family: 'Muli', arial, helvetica, sans-serif; }
img { max-width: 100%; }

/* FORM ELEMENTS */
input,select { font-size: 11px; }
input[type="submit"] { border: solid 1px #ccc; background: #fff; text-transform: uppercase; }
input[type="text"] { border: solid 1px #ccc; background: #fff; font-size: 11px; padding: 3px 0 2px 5px; } 
select { border: solid 1px #000; font-family: arial, helvetica, sans-serif; }
/*article nav select { width: 130px; }*/
.select-replace { color: #000; padding: 0.2em .5em; border: solid 1px #ccc; background: #fff url('../images/icon-dropdown.png') 98% 52% no-repeat;}


/* HEADER */
body > header { margin: 30px 0 20px 0; color: #999; font-family: 'Muli'; letter-spacing: .1em; } 
body > header a { color: #999; }
div#logo { float: left; }
div#stuff { float: right; margin-top: 10px; font-size: 12px; }
div#phone { float: left; margin: 3px 30px 0 0; } 
div#search { float: left; margin: 0 10px 0 0; }
div#cart { float: left; margin: 3px 0 0 0; padding-left: 18px; background: #fff url('../images/icon-cart.png') left 0px no-repeat; }

/* HOME */
div#home-blurb img { border: solid 1px #e6e6e6; padding: 7px; } 
div#home-blurb a { color: #ff6633; } 
div#home-blurb p { font-size: .8em; } 

/* FRAMES */
article#frames { display: table; width: 100%; border: solid 1px #e6e6e6; }
article#frames section#nav { display: table-cell; width: 20%; vertical-align: top; }
article#frames section#nav nav {  color: #666; width: 120px; margin: 0 auto; }
article#frames section#nav nav li { padding: 0 0 .4em 0; }
article#frames section#nav nav h2 { margin: 0 0 -.1em .1em; font-weight: normal; }
article#frames section#nav nav select { width: 120px; }
article#frames section#list { display: table-cell; vertical-align: top; width: 80%; color: #666; text-transform: uppercase; }	
article#frames section#list header { text-align: right; margin: 10px 10px 0 0; }	
article#frames section#list header li { display: inline; padding: 0 0 0 3%; }	
article#frames section#list section { }
article#frames section#list span { border: solid 1px #ccc; padding: 3px 10px; }
article#frames section#list span.current { background: #eee; }
article#frames section#list figure { float: left; width: 33.333333%;  margin-bottom: 2%; min-height: 200px; } 
article#frames section#list figure img { width: 95%; float: right; } 
article#frames section#list figure figcaption { padding-left: 5%; }
article#frames section#list figure figcaption h2 { font-weight: normal; text-align: left; font-size: 12px; }
article#frames section#list figure figcaption p { font-size: 12px; }
article#frames section#list footer { text-align: right; margin: 3% 0 2% 0; }	
article#frames section#list footer li { display: inline; padding: 0 0 0 3%; }
article#frames section#list footer nav { margin: 0 10px 0 0; }

/* FRAME DETAIL */
article#frame { width: 100%; border: solid 1px #e6e6e6; padding-bottom: 20px; }
article#frame h1 { text-transform: uppercase; font-size: 15px; }
article#frame h2 { font-size: 15px; margin }
article#frame section#tags { width: 15%; float: right; margin-top: 30px; }
article#frame section#tags li { text-transform: lowercase; font-size: 11px; padding: 0 0 3px 0; }
article#frame section#tags h3 { font-size: 12px; margin: 0 0 3px 0; }
article#frame section#pic { width: 53%; float: left; }
article#frame section#pic nav { margin: 0 0 0 10px; }
article#frame section#chooser { width: 29%; padding-right: 3%; float: left; margin-top: 30px; font-size: 12px; }
article#frame section#chooser select { width: 120px; }
article#frame section#chooser input#add { font-size: 13px; padding: 5px 25px; cursor: pointer; font-family: 'Muli'; color: #666; margin: 10px 0 0 0; -webkit-transition: background 0.15s ease, color 0.15s ease; -moz-transition: background 0.15s ease, color 0.15s ease; }
article#frame section#chooser input#add:hover { background: #666; color: #fff; border: solid 1px #666; }
article#frame section#chooser > table { border-collapse:collapse; border: solid 1px #000; margin: 10px 0px; }
article#frame section#chooser > table th:first-of-type { text-align: left; }
article#frame section#chooser > table th { border: solid 1px #ccc; text-align: center; padding: 2px; background: #eee; }
article#frame section#chooser > table td { border: solid 1px #ccc; text-align: center; padding: 2px; }
article#frame section#chooser > table td:first-of-type { text-align: left; font-weight: bold; }
article#frame section#chooser > form > ul { text-transform: lowercase; }

dl { margin: 10px 0; }
dt { text-transform: lowercase; }
dt, dd { display: inline; margin: 0; }
dt { font-weight: bold; }
dd:after {
	content: '\A';
	white-space: pre;
}

/* SEARCH */
article#search { width: 93%; border: solid 1px #e6e6e6; padding: 3.5%; text-transform: uppercase; }
article#search h1 { font-size: 15px; margin: 0 0 20px 0; }
article#search section#results figure { float: left; width: 33.333333%;  margin-bottom: 2%; min-height: 220px; } 
article#search section#results figure img { width: 95%; float: right; } 
article#search section#results figure figcaption { padding-left: 5%; }
article#search section#results figure figcaption h2 { font-weight: normal; text-align: left; font-size: 12px; }
article#search section#results figure figcaption p { font-size: 12px; }
article#search footer { text-align: right; margin: 3% 0 2% 0; }	
article#search footer li { display: inline; padding: 0 0 0 3%; }
article#search footer nav { margin: 0 10px 0 0; }
article#search span { border: solid 1px #ccc; padding: 3px 10px; }
article#search span.current { background: #eee; }


/* CART */
article#cart { width: 93%; border: solid 1px #e6e6e6; padding: 3.5%; }
article#cart h1 { text-transform: uppercase; font-size: 15px; margin: 0 0 20px 0; }
table#cart { width: 100%; }
table#cart th { border-bottom: solid 1px #e6e6e6; }
table#cart td { text-align: center; }
input#quantity { font-family: 'Muli'; font-size: 15px; width: 20px; color: #666; padding: 6px 0 4px 10px; }
table#cart td.delete img { opacity:.3; }
table#cart td.delete img:hover { opacity:.6; }
table#cart span { font-size: 20px; font-weight: bold; }
table#cart td#total { font-size: 20px; text-align: right; height: 100px; font-weight: bold; }
table#cart td#sum { border-bottom: solid 1px #e6e6e6; }
input.update { opacity:.4; }
input.update:hover { opacity:.6; }
input#checkout { font-size: 15px; padding: 10px 15px; cursor: pointer; font-family: 'Muli'; color: #666; -webkit-transition: background 0.15s ease, color 0.15s ease; -moz-transition: background 0.15s ease, color 0.15s ease; }
input#checkout:hover { background: #666; color: #fff; border: solid 1px #666; }
article#cart > p > a { color: #333; font-weight: bold; }

/* PAGES */
article#page { width: 93%; border: solid 1px #e6e6e6; padding: 3.5%; }
article#page h1 { text-transform: uppercase; font-size: 15px; margin: 0 0 15px 0; }
article#page p { font-size: 14px; line-height: 19px; margin: 0 0 20px 0; }
article#page p:last-of-type { margin: 0; }
/*article#page a { color: #333; font-weight: bold; }*/
article#page a { color: #f90; font-weight: bold; }


/* FOOTER */	
body > footer { margin: 3% 0 1% 0; text-align: center; line-height: 1em; color: #666; font-size: 12px; } 
body > footer h4 { text-transform: uppercase; color: #f63; margin: 0 0 .5em 0; font-size: 14px; } 
body > footer li { padding: 0 0 .6em 0; } 
body > footer nav { float: left; text-align: left; }
body > footer nav:nth-child(1) { width: 10%; }
body > footer nav:nth-child(2) { width: 12%; }
body > footer nav:nth-child(3) { width: 18%; }
body > footer nav:nth-child(4) { width: 22%; }
body > footer nav:nth-child(5) { width: 18%; }
/*body > footer nav:nth-child(5) img { border: solid 1px #ddd; }*/
body > footer nav:nth-child(6) { width: 20%; }
body > footer nav:nth-child(6) p { margin-bottom: .1em; }
body > footer nav:nth-child(6) > aside { margin: 18px 0 0 0; }
body > footer nav:nth-child(6) > aside img { opacity:.6; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; }
body > footer nav:nth-child(6) > aside img:hover { opacity:.9; }

	
.clear:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}	
	
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

	
	
	
/* !!!!!!!!!!!!!!!!!!!!!!!!! QUERIES !!!!!!!!!!!!!!!!!!!!!!! */	
@media (max-width: 768px) { 

/* FRAMES */
article#frames section#list figure { width: 50%; }
article#frames section#list figure:nth-child(odd) { clear: left; }

/* FRAME DETAIL */
article#frame section#pic { width: 70%; }
article#frame section#chooser { clear: both; width: 99%; }
article#frame section#nav { width: 30%; }
#pic nav ul li {
display: inline-block;
}
/* FOOTER */
body > footer nav { width: 33.333333% !important; }
body > footer nav:nth-child(4) { clear: left; }

}		

	
@media (max-width: 600px) {

/* FRAMES */
article#frames section#list figure { width: 100%; }

/* FRAME DETAIL */
article#frame { width: 100%; }
article#frame section#pic { width: 100%; }
article#frame section#chooser { clear: both; width: 99%; }
article#frame section#tags { float: none; width: 100% }
article#frame section#tags li { display: inline; }
article#frame section#tags li:after { content: " | "; }
article#frame section#tags li:last-child:after { content: ""; }

/* FOOTER */
body > footer nav { width: 100% !important; }
	
}	

