html {
  max-width: 1300px;
  margin: 0 auto;
  background: url(Images/texture.jpg) repeat;
  font-family: "Lucida Sans", sans-serif;
}

* {
    box-sizing: border-box;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}






.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}



a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}




.content {
    padding: 8px;
    margin-bottom: 2px;
    background-color :#999999;
    color: #000000;
    font-size: 10pt;
    border: 3px solid #999999;
    border-radius: 6px;
    background: url(Images/background.jpg) repeat;
    text-align: center;
}


.extra-content {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#999999;
    color: #000000;
    font-size: 10pt;
    border: 3px solid #999999;
    border-radius: 6px;
    background: url(Images/background.jpg) repeat;
    text-align: center;
}

p span 
{
    color: #7c969e}


.catalogue-box-24S {
    display: inline-block;
    width: 130px;
    height: 155px;
    margin: 4px;
    border: 2px solid #999999;
    border-radius: 4px; 
 background-color: #DFDFDF;
font-size: 80%;
}

.retail-box-24S {
    display: inline-block;
    width: 230px;
    height: 200px;
    margin: 4px;
    border: 2px solid #999999;
    border-radius: 4px; 
 background-color: #DFDFDF;
font-size: 80%;
}

.gallerybox {
    display: inline-block;
    width: 116px;
    height: 164px;
    margin: 6px;
    border: 2px solid #999999;
    border-radius: 4px; 
 background-color: #DFDFDF;
font-size: 80%;
}


.gallerytitle {
    display: inline-block;
    width: 175px;
    height: 58px;
    margin: 14px;
    border: 2px solid #999999;
    border-radius: 4px; 
 background-color: #DFDFDF;
font-size: 80%;
}

.galleryreturn {
    display: inline-block;
    width: 165px;
    height: 42px;
    margin: 4px;
    border: 2px solid #999999;
    border-radius: 4px; 
 background-color: #DFDFDF;
font-size: 80%;
}

.splash {
    display: inline-block;
    width: 180px;
    height: 80px;
    margin: 6px;
   font-size: 60%;
}


.splashscreen {
text-align: center;
}

.addcart {
background: Images/addtocart.png);
}
.addcart:hover {
background: Images/viewcart.png
}



.enlarge:hover {
	transform:scale(2.0,2.0);
	transform-origin:0.5 0.5;
}

.extraenlarge:hover {
	transform:scale(3.0,3.0);
	transform-origin:0.5 0.5;
}



form {
  text-align: center;
}




a.button {
    padding: 4px;
    margin-bottom: 0px;
    background-color :#999999;
    color: #FFFFFF;
    border: 2px solid silver;
    border-radius: 4px;
    background: url(Images/backgroundblue.jpg) repeat;
    text-align: center;
    font-size: 100%;
}

a.button:hover {
    padding: 4px;
    margin-bottom: 0px;
    background-color :#999999;
    color: #FFFFFF;
    border: 2px solid silver;
    border-radius: 4px;
    background: url(Images/backgroundbluehover.jpg) repeat;
    text-align: center;
    font-size: 100%;
}


.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}



.footer {
    padding: 0px;
    margin-bottom: 0px;
    background-color :#999999;
    color: #FFFFFF;
    border: 3px solid #999999;
    border-radius: 6px;
    background: url(Images/backgroundblue.jpg) repeat;
    text-align: center;
    font-size: 80%;
}


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 820px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}

.splash {
    display: inline-block;
    width: 210px;
    height: 140px;
    margin: 6px;
   font-size: 80%;
}
}



@media only screen and (min-width: 1240px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

.splash {
    display: inline-block;
    width: 270px;
    height: 180px;
    margin: 6px;
   font-size: 100%;
}
}





/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
        text-align: justify;
        z-index: 1000;
}





/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 8px;
        align: right;
        z-index: 1000;
}

/*Style for menu links*/
li a {
	display:block;
        width: 100px;
        font-size: 100%;
	height: 44px;
	text-align: center;
	line-height: 40px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #FFFFFF;
	background: url(Images/backgroundblue.jpg) repeat;
        border: 3px solid #999999;
        border-radius: 6px;
	text-decoration: none;
        z-index: 1000;
}

/*Hover state for top level links*/
li:hover a {
	background: url(Images/backgroundbluehover.jpg) repeat;}

/*Style for dropdown links*/
li:hover ul a {
	background: #C2C2C2;
	color: #000000;
	height: 28px;
	line-height:22px;
        font-size: 80%;
        width: 170px;
        margin-top: 0px;
        z-index: 1000;    
}

ul ul {
        margin: 0px 0px 0px -35px;    
}



/*Style for 2nd level dropdown links*/
li ul li:hover ul a {
	background: #DFDFDF;
	color: #000000;
	height: 28px;
	line-height:22px;
        font-size: 80%;
        width: 170px;
        margin-top: 0px;
        z-index: 1000;
}



ul ul ul {
        margin: -28px 0px 0px 130px;    
}


/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: url(Images/backgroundbluehover.jpg) repeat;	color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}






/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}



/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}




/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 0;
	display: none;
        border: 3px #888888;
        border-radius: 6px;
        background: url(Images/backgroundblue.jpg) repeat;
        text-align: center;

}







/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 720px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li, ul ul ul{
		margin: 0px 0px 0px 0px;
	}



	/*Create vertical spacing*/
	li, ul ul{
		margin: 0px 0px 0px 0px;
	}
	



	/*Make menu links full width*/
	  ul li, ul, li a, li:hover ul a, li ul li:hover ul a{
		width: 100%;
	}

/*Make 1st level drop down links narrower*/
	   li:hover ul a{
		width: 90%;
              margin: auto;
	}


/*Make 2nd level drop down menu links narrower*/
	   li ul li:hover ul a{
             width: 80%;
              margin: auto;
	}



	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}