/*This is for garry m html5 style sheet*/




/*BODY*/

body {
background-color: #7e777f;
color: #7d7d7d;
font-family: copperplate, copperplate gothic light, sans-serif;
font-size: 1em;
font-weight: 100;
letter-spacing: 1px;
text-align: left;
line-height: 1 em;
margin: 0;
padding: 0;
border: 0;
 }




/*IDs*/

/*CONTAINER*/
#container { 
/*this next is for centering*/
margin: 20px auto;
padding: 18px;
background-color: #e9f7ed;
border-radius: 2px;
width: 904px;

/*this next is to animate the backg colour*/
-webkit-animation: mymove 35s infinite; /* Chrome, Safari, Opera */
    animation: mymove 35s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {background-color: #f7f7f7}
}

/* Standard syntax */
@keyframes mymove {
    50% {background-color: #f7f7f7}

}



/*CONTENT*/
#content {
margin: 0px auto;
border-radius: 5px;
z-index: 1;

}



/*SELL*/
#sell {
float: left;
margin-top: 12px;
margin-left: 0px;
margin-bottom: 30px;
width: 100%;
font-size: 155%;
text-align: center;
color: #55352a;
border-right: solid 0px #c8d3cb;
}




/*products*/
#products {
margin-top: 12px;
margin-left: 0px;
margin-bottom: 30px;

}




/*These following are for FULL WIDTH COLUMN*/

#columnfull {
float:left;
width: 894px;  
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
border-radius: 0px;
}





/*These following are for 2 COLUMN*/

#columnleftwider {
float:left;
width: 530px;  
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
border-radius: 0px;
}

#columnrightnarrower {
float:right;
width: 333px;
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
border-radius: 0px;  
}

#columnleftnarrower {
float:left;
width: 333px;  
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
border-radius: 0px;
}

#columnrightwider {
float:right;
width: 530px;
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
border-radius: 0px;  
}

#aboutrightnarrower {
float:right;
width: 333px;
border-left: 1px #acacac solid;
border-top: 1px #acacac solid;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
border-radius: 0px;  
}

#divencloser1 {
float:left;
width: 333px;  
}

#divencloser2 {
float:left;
width: 530px;  
}

#stitchingbox {
float:left;
width: 343px;
margin-top: 112px;  
border-left: 0px #acacac solid;
padding-left: 0px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 0px;
}

#stockistsbox {
float:left;
width: 530px;
margin-top: 125px;  
border-left: 0px #acacac solid;
padding-left: 0px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 0px;
}









/*These following are for 3 COLUMN*/

#columna {
float:left;
width: 278px;  
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;
}

#next2columns {
float:right;
width: 601px;  

}

#columnb {
float:left;
width: 283px;
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;  
}

#columnc {
float:right;
width: 283px;
border-left: 1px #acacac solid;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #c8d3cb;  
}







#between {
float: left;
margin-bottom: 20px;
width: 100%;
}





/*These following are for WORKSHOP BOX*/

#forworkshopbox {
float:left;
width: 894px;  
border-left: 0px #acacac solid;
padding-left: 21px;
padding-top: 0px;
padding-bottom: 0px;
}




/*These following are for WORKSHOP PAGE*/


/*workshop*/
#workshopspage {
margin-top: 12px;
margin-left: 0px;
margin-bottom: 30px;
padding-bottom: 30px;

}




#workshopsLeft {
float:left;
width: 420px;  
border-left: 0px #acacac solid;
padding-left: 3px;
padding-top: 0px;
padding-bottom: 0px;
}


#workshopsRight {
float:right;
width: 420px;  
border-left: 0px #acacac solid;
padding-left: 21px;
padding-top: 0px;
padding-bottom: 0px;
}





/*HEADINGS*/

/*Not used here*/
h1 {
/*This next counteracts the margins most browsers put above an h1*/
margin-top: 0px;
/*This next counteracts the margins most browsers put below an h1*/
margin-bottom: 0px;
font-size: 100%;
font-weight: bold;
color: #044476;
}


/*Not used here*/
h2 {
font-size: 150%;
text-decoration: underline; 
}




/*CLASSES*/

.productname {     
    font-size: 200%;
    font-weight: bold;
    color: #7a97b9;
}
    
.description {     
    font-size: 120%;
    font-weight: bold;
    color: #55352a;
}
    
.material {     
    font-size: 100%;
    font-weight: bold;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.cost {     
    font-size: 130%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    color: #e9f7ed;
}

.buyetsy {     
    font-size: 100%;
    font-weight: bold;
    line-height: 1em;
    color: #7a97b9;
}
    
.sellsmall {     
    font-size: 90%;
    color: #7d7d7d;
}

.boxhead {     
    font-size: 200%;
    font-weight: bold;
    color: #55352a;
}

.boxcopy {     
    font-size: 100%;
    font-family: copperplate, copperplate gothic light, sans-serif;
    color: #21618c;
}

.stockistscopy {     
    font-size: 130%;
    font-family: copperplate, copperplate gothic light, sans-serif;
    color: #21618c;
}

.workshopspagetitle {     
    font-size: 200%;
    font-weight: bold;
    line-height: 70%;
    color: #7a97b9;
}

.workshopspagecopy {     
    font-size: 120%;
    font-family: helvetica, sans-serif;
}

.browncopy {     
    font-weight: bold;
    color: #73565a;
}








/*PARAGRAPHS*/

/*This next counteracts the margins most browsers put above a para*/
p {
margin-top: 0px;
}

/*This is just in case any browsers put margin below a para*/
p {
margin-bottom: 0px;
}

/*This is a class to make a para ranged right*/
p.rangedright {
text-align: right;
}




    








/*FOR IMAGES*/

/*These are instructions for any floating pics also known as drop pics*/

img.floatLeft {     
    float: left;
    margin-top: 10px;     
    margin-right: 10px; 
    margin-left: 0px;
}
    

img.floatRight { 
    float: right; 
    margin-top: 5px;
    margin-bottom: 8px;
    margin-right: 10px;
    margin-left: 10px; }

}














/*This is a TABLE*/

#tablez {
float:left;
width: 70%;
font-size: 90%;
padding: 0px;
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;  
}






/*Keep this to make the BOTTOM stretchy*/

#bottom {
clear:both;
height: 56px;
}







/*These are instructions for DROP CAPS*/

img.dropcap {     
    float: left; 
    margin-top: 4px;    
    margin-right: 3px; }







/*FOR HORIZONTAL RULES*/

hr {
border: none;
/*Put the colour in twice to accomodate old IE*/
background-color: #000000;
color: #000000;
height: 7px;
}







/*These are the main instructions for LINKS (anchors)*/

a:link {
color: #7d7d7d;
text-decoration: none;
background-color: #c8d3cb;
z-index: 2;
 }

a:visited {
color: #7d7d7d; 
text-decoration: none; 
}

a:hover {
color: #4681a8;
font-size: 140%;
font-weight: bold;
background-color: #fbf832; 
}

/*This gives hovered images a line at the bottom*/
a:hover img {
    border-bottom: 0px solid #fbf832;
}

a:active {
background-color: #000000; 
}


/*Website*/