@import "style.css";

/* floats */

.left { float: left }
.right { float: right }
/* text alignment */

.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
/* alerts & notices */
.help, .info, .error, .success {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cecece;
}
.help {
    border-color: #E0C618;
    background: #EBE16F;
}

.info {
    border-color: #92cae4;
    background: #d5edf8;
}

.error {
    border-color: #fbc2c4;
    background: #fbe3e4;
}

.success {
    border-color: #c6d880;
    background: #e6efc2;
}

body {
    font-family: 'Courier New', Courier, monospace, mono-space;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
}

html, body { height: 100% }

div { position: relative }

h1, h2, h3, h4, h5, h6, .whatever {
    font-size: 150%;
    text-transform: uppercase;
    letter-spacing: .3em;
}

p {
	margin-bottom:1em;
}

.headfont {
    font-family:  Helvetica, Arial, sans-serif;
    font-size: 2em;
}

a, a:visited {
    text-decoration: none;
    color: #000;
}

a:hover { text-decoration: underline }

.collection { margin: 10px 0 0 10px; }

    .collection .title {
        font-family:  Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: .3em;
    }

    .collection .product {
		    width: 144px;
        height: auto;
        overflow: hidden;
        margin: 0 10px 10px 0;
  		  outline: 1px solid black;
        line-height:0;
    }

	.indicator {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		background-color: transparent;
		/* opacity: .7;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);	*/
	}
	.unavail .indicator {
		/* background-color: red; */
		background-image: url('redcross-f.png');
		background-color: rgba(255,255,255,.7);
		background-repeat: no-repeat;
		background-position: center center;
	}

	.collection .product:nth-child(4n+1){
		background-color: red;
	}
	.collection .product:nth-child(4n+2){
		background-color: blue;
	}
	.collection .product:nth-child(4n+3){
		background-color: magenta;
	}
	.collection .product:nth-child(4n+4){
		background-color: green;
	}

        .collection .product img {
  width: 100%;
  height: 100%;
			outline: 1px solid black;
        }


.title-store-images .collection .product img {
 	min-height: 160px;
    min-width: 160px;
  height: auto;
  width: auto;
}

        .collection .product img:hover { border-color: #949388 }

#logo {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 42px;
	font-weight: bold;
}

#container { min-height: 100% }

/*#main { padding-top: 120px }*/

#main {
    overflow: auto;
    padding-bottom: 80px;
    background-color:#fff;
    margin-top: 20px;
}

#footer {
    position: relative;
    margin: -60px 5px 0 5px;
    height: 60px;
    clear: both;
}
#footer a {
	white-space: nowrap;
}

body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

#header {
    z-index: 100000;
    /*position: fixed;
    height: 110px;*/
    top: 0;
    background-color: rgba(255,255,255,.9);
    -x-min-width:820px;
    border-bottom:2px solid white;
    text-align: left;
	padding: 0 10px;
	/*height:120px;*/
}
.nav {
	line-height:1.6em;
}
#header a, .nav a {
	text-transform: uppercase;
	white-space:nowrap;
}
.altlinks a:nth-child(4n+1) {
	color:red;
}
.altlinks a:nth-child(4n+2) {
	color:blue;
}
.altlinks a:nth-child(4n+3) {
	color:magenta;
}
.altlinks a:nth-child(4n+4) {
	color:green;
}

.no-rgba #header {
    background-color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
}


#header img {
    text-align: center;
    margin: 10px;
}

#breadcrumb {
    -x-width: 960px;
    font-size: 1em;
    margin: 0 10px;
}


#productpage, #cart, #page, .article {
    max-width: 1000px;
    margin: 10px 0 20px 0;
    padding:0 9px;
}

#cart {
  width: 715px;
}

img { border: 0px solid #000000 }

button, input, select, textarea {
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    padding: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 300;
}

.remove img { border: none }

.type-product #productpage > div {
    width: 480px;
    margin: 0;
    padding: 0;
    float: left;
    clear: none;
}

.type-product #productpage img {border: 1px solid black; }

.type-product #productpage #productdetails .description { margin-bottom: 1em }

.type-product #productpage #productdetails #add { border: none; font-size: 110%; background-color:red; color:white !important;}

.large-img { clear: both; width:400px; background-color: fuchsia;}

#cart {
	margin-top:40px;
}

#cart .prodimage img { border:1px solid black;}

#productpage > #productdetails {
	margin-bottom: 3em;
}


#logoc {
	float:left;
	-x-width:200px;
	padding:5px 0;
	margin-left:-3px;
}

#extral {
	float:left;
	width:150px;
	padding:10px 5px;
}

#searchbox {
	position: fixed;
	right:5px;
    top: 5px;
	text-align:right;
  z-index:2000;
	-x-width:150px;
	padding:0;
	-x-margin-right:5px;
}
#searchbox input, #footer input {
	font-size: 12px;
	border: 0;
  background: yellow;
  color: #000;
	font-family:Courier;
  padding: 5px;
}

.searchresults .product img {
	width:200px;
	height:200px;
	background-color:blue;
}

.searchresults.collection .product {
	height: 240px;
	width:200px;
  background-color:transparent;
  line-height: inherit;
}

::-moz-selection{ background: red; color:#fff; text-shadow: none; }
::selection { background: red; color:#fff; text-shadow: none; }

.type-page .article {
	//margin-top: 2em;
}

.collection .description {
	-x-height:154px; -x-width:154px; -x-overflow:hidden; margin: 0 10px 10px 0; padding: 0px; -x-outline:1px solid black;
}
.collection .description div {
	font-size: 11px;
	line-height:12px;
}
.collection .description div a {
	text-transform: uppercase;
	color: red;
}

a.chigh {
	color:white !important;
	background-color:red;
	font-weight: bold;
	padding: 2px 5px;
}

a.red {
	color:red;
}
a.green {
	color:green;
}
a.blue {
	color:blue;
}
a.magenta {
	color:magenta;
}

table.cart td {
	margin:5px 5px;
	padding:5px 12px;
}
table.cart td.table-header {
	margin-bottom:10px;
}
table.cart .table-header td {
	text-transform:uppercase;
	margin:10px;
}

table.cart .table-header td span{
	-x-background-color: red;
	-x-color: #fff;
	margin:25px 0px;
	text-decoration:underline;
}

table.cart img {
	width:100px;
	height:100px;
}

.cart-row {
 white-space: nowrap;
  margin-bottom: 10px;
}


.cart-row-image {
  width: 100px;
  height: 100px;
}

.cart-row-image img {
  width: 100%;
  height: 100%;
}

.cart-row > div {
  display: inline-block;
  vertical-align: top;
}

.cart-row > div > div {
  vertical-align: top;
  display: inline-block;
  white-space: normal;
  margin-right: 5px;
  width: 90px;
}

.cart-row > div > div.cart-row-title {
 	width: 250px;
}


.cart-row > div > div.cart-row-quantity {
 width: 60px;
}

.cart-row > div > div.cart-row-quantity input {
 width: 40px;
}

.social_buttons > div {
	width:auto;
	margin:0 1px;
	float: left;
}

#productimages img {
	margin:0 10px 10px 0;
	float: left;
	background-color: blue;
}
.productimage-small {
	margin:0;
	padding:0;
	background-color: black;
	display:block;
}
.thumbnail-img {
	width:91px;
	height:91px;
	background-color: red;
}
.thumbnail-img.cur {
	opacity:.3;
}

.cloud-zoom-big {
	outline:1px solid #000;
}

.avail-false {
	text-decoration:line-through;
}

.avail-true input {
  margin: 0 5px;
}


div.svpply_button.boxed {
	margin: 2px;
}
.tumblr_button a{
	display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;
}

.splash {
	margin: 10px;
	border-bottom: 1px solid blue;
}
.product.noimg {
	display:none;
}

.p404 {

	margin:100px auto;
}



.collection.abbreviated {
	float:left; width:288px; height:450px; border:1px solid black; padding:10px 0 10px 10px;
}

.collection.abbreviated .product.left {
	width:86px; height:86px;margin:0 10px 10px 0;
}


a.tumblr2 {
	display:inline-block; text-indent:-9999px; overflow:hidden; width:62px; height:20px; background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent;
}
#social_stuff > * {float:left; margin-right:5px;}



body.cart-active #container {
  margin-top:1.2em;
}


#search::-webkit-input-placeholder {color:green}
#search::-moz-placeholder {color:green }
#search:-ms-placeholder {color:green;}

/* Smartphones (portrait and landscape) ----------- */
@media screen
/*and (min-device-width : 320px) */
and/*!*/(max-device-width : 1024px) {
/* Styles */
	body {
		font-size:100%;
	}
	.dev {
		color:blue !important;
	}
	h1, h2, h3, h4, h5, h6, .whatever {
		letter-spacing: 0;
	}
	#header {
		position: relative;
	}
	#productdetails, #productpager, #productimages {
      width: auto !important; // can remove all of these !important's once there are no more inline styles
    }
    #productimages .large-img {
    width: 300px;
    margin-right: 0;
  }
  .article p img { width: 100%; }
	.type-index .collection { height: 550px; }
  #footer input[type=email] { margin-top: 5px !important }


  #cart {
   width: auto;
  }
  #cart .cart-row {
	position: relative;
  }
  #cart .cart-row > div {
	position: static;   // because there's a style that makes all divs relative
  }
  #cart .cart-row > div > div {
  	display: block;
    margin-bottom: 8px;
    width: auto;
  }
  #cart .cart-row > div > div.cart-row-quantity {
    position: absolute;
    top: 0;
    right: 0;
  }
  #cart .cart-row > div > div.cart-row-title {
    width: 100px; // to not bleed into the amount box
  }

  #cart .cart-row > div > div.cart-row-total {
	display: none;
  }

  #cart .cart-row > div > div.cart-row-remove {
	position: absolute;
    top: 35px;
    right: 0;
    font-size: 0.75em;
  }

  #cart #note {
   width: 90%;
    margin-top: 5px;
  }



}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
/* iPhone 5  */ @media only screen and (max-width : 320px) { .collection .product { width: 144px;} }
/* iPhone 6  */ @media only screen and (max-width : 375px) { .collection .product { width: 172px;} }
/* iPhone 6+ */ @media only screen and (max-width : 414px) { .collection .product { width: 192px;} }

@media print {
	body {font-size:90%;}
	nav, #footer, #searchbox, #productpager, .addtocart, #logoc a { display: none;}
	a:after {content : '';}
	a#logo {display: inline;}
	#header {position:relative; height: 50px; padding:.5; margin:1px; width:100%; float:none; clear:both; border: 1px solid red;}
	#main, .frontproducts, .collection { padding:0; margin: 0;}
	@page { margin: 0.5cm;}
	#productpage > div { width: 400px !important; font-size: 80%;}
	* {border:none;}
	img {border: none !important;}
}