/* ORDER OF CONTENTS:
		Global Styles
		Positioning Divs
		Container Divs & misc divs
		Image classes
		Text styles
		Navigation classes
/*

/* ====================== GLOBAL STYLES ========================== */

/* This sets styles that will be the same across the website. They can be overriden by classes, eg to change the font size for a heading. */
body {
	background-image: url('http://www.enfys.me.uk/images/graphics/bkgdp.jpg');
	margin: 3%;
	padding: 0;
	font-family: comic sans ms, Verdana, Arial, sans-serif;
	color: #002157;
	font-size: 2em;} /* no text justification for very small screens: creates unreadable spacing */

a:link, a:visited {color: #002157;}

header {width: 100%; padding: 0; margin: 0; display: block;}
footer {font-size: 0.3em !important;} /* header font sizes are set in t3 and t20 */

/* ====================== POSITIONING DIVS ========================== */

.container {margin: 0; width: 100%; display: block; text-align: center}

.content {padding: 0.7%; width: 95%; overflow: auto; display: block; border: 5px solid #002157; margin: 1.7% auto 1.7% auto; text-align: center}
.content1 {padding: 0.7%; width: auto; display: inline-block; border: 0;}

.wrap {} /*this wraps around a batch of divs. DOES NOT CLEAR, so one-fifth divs will work in sets of 2 */
.mobilewrap {clear: both;} /*used for things that need a wrap in mobile version but not in computer version */

div.ninety8     {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern6 */
div.seventy1    {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern7, pattern11, pattern12, kit7,  */
div.sixty6      {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern10 */
div.sixty       {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.fifty6      {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern5 */
div.forty8      {width: 90%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.thirty8     {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern4 */
div.thirty5     {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern2 */
div.thirty1     {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.thirty      {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern1, pattern3, pattern9, kit7,  */
div.twenty35    {width: 95%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*kit8,  */
div.twenty      {width: 41%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.eighteen    {width: 41%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.fifteen     {width: 41%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.twelve5     {width: 41%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.eleven      {width: 41%; margin: 0.3%; padding: 0.3%; font-size: 1em;}

/*All these have borders. Put each row inside a div.wrap. */
div.twothirds, div.third,  {width: 91%; margin: 2%; padding: 2%; border: 3px solid #002157; text-align: center; }
div.quarter, div.fifth, div.half, div.tut {width: 41%; margin: 2%; padding: 2%; border: 3px solid #002157; font-size: 2.em; text-align: center;}
div.sixth  div.seventh, div.eighth  {width: 28%; margin: 2%; padding: 2%; border: 3px solid #002157; font-size: 2.em; text-align: center;}

div.twothirds {width: 91%; float: left; margin: 2%; padding: 2%; border: 3px solid #002157; text-align: center; }
div.onequarter, div.onefifth, div.half, div.halfleft, div.halfright, div.onethird, div.tut {width: 41%; float: left; margin: 2%; padding: 2%; border: 3px solid #002157; font-size: 2.em; text-align: center;}
div.onesixth  div.oneseventh  {width: 28%; float: right; margin: 2%; padding: 2%; border: 3px solid #002157; font-size: 2.em; text-align: center;}
div.puppetthird, div.puppethalf {width: 95%; float: left; margin: 2%; padding: 2%; border: 3px solid #002157; font-size: 2.em; text-align: center;}
/* used in tutorial pages, rows of 4 boxes */
/* div.tut {margin: 0.5%; padding: 0.5%; border: 5px solid #002157; min-height: 80px; width: 22%; float: left; text-align: center;} */

/*All these have NO borders */
div.index1 {margin: 0.5%; padding: 0.5%; border: 0; height: auto; width: 20%; float: left;} /* only in Index & Contact info pages */
div.index2 {margin: 0.5%; padding: 0.5; border: 0; height: auto; width: 60%; float: left;}
div.index3 {margin: 0.5%; padding: 0.5%; border: 0; height: auto; width: 15%; float: right;} /* only in Index & Contact info pages */
div.halfwidth {margin: 0.5%; padding: 0.5%; border: 0; height: auto; width: 48%; float: left; text-align: center} /*renamed from index4. Only 3 of these in whole site: index pages and basic-stitches tutorial. This + right replaces index5.*/
div.index6 {margin: 0.5%; padding: 0.5%; border: 5px solid #002157; height: auto; width: auto; clear: both; overflow: auto;}
div.index7 {margin: 0.5%; padding: 0.5%; border: 0; height: auto; width: auto; float: center; clear: both;}
#footer {float:left; padding:0.7% 0; min-width:100%; margin: 3.5% 0 0 0; clear: both; text-align: center}

/* BOLT-ON DIVS. BOLT ON DIVS: These can be added to any div, to change just the bit specified. eg <div class="onethird noborder">
The order is important: the override must come AFTER. */
.justify    {}
.right      {float: right;}
.left       {float: left;}
.center     {float: center;}
.noborder   {border: 0 !important;}
.border1    {border: 1px solid #002157;}
.border2    {border: 2px solid #002157;}
.tleft      {text-align: left}
.tright     {text-align: right;}
.tcenter    {text-align: center;}
.about1     {margin: 0 1% 0% 0%;}
.about2     {margin: 0 0% 0% 1%;}
.middle     {vertical-align:middle;}
.flagright  {float: right; margin: 0 0 0.1% 0.1%; padding: 0.3%;}
.flagleft   {float: left; margin: 0 0.1% 0.1% 0; padding: 0.3%;}

div.pattern1 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: left;} /*used in crochet techniques & with tools */
div.pattern2 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: left;} /*used in crochet techniques & with tools */
div.pattern3 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: right;}
div.pattern4 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: left;} /*used very widely, mostly to hold pattern pictures */
div.pattern5 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: right;}
div.pattern6 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: auto; float: center; clear: both; text-align: left;}
div.pattern7 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 70%; float: left; text-align: left; font-size: 2.5em; font-weight: bold;}
div.pattern8 {margin: 1% 0.3% 0.3% 0.3%; padding: 0.3%; border: 0; height: auto; width: 25%; float: right; text-align: right;} /*used to hold the buy-now buttons */
div.pattern9 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 48%; float: left;} /* 9 & 10 used together in free patterns */
div.pattern10 {border: 0; display: inline;} /* This is now set to wrap around the picture in pattern9 */
div.pattern11 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 70%; float: right;}
div.pattern12 {margin: 0.3%; padding: 0.3%; border: 0;  height: auto; width: 70%; float: right;}

div.kit7 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 40%; float: left; text-align: left; font-size: 2.5em; font-weight: bold;}
div.kit8 {margin: 1% 0.3% 0.3% 0.3%; padding: 0.3%; border: 0; height: auto; width: 25%; float: right; text-align: right;} /*used to hold the buy-now buttons */

div.supplies1 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: left;}
div.supplies2 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: right; }
div.yarn1 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: left;}
div.yarn2 {margin: 0.3%; padding: 0.3%; border: 0; height: auto; width: 100%; float: right;}

/* =============== CONTAINER DIVS ====================== */

/* These do very little, but they hold content separate, which is useful. */
div.desc1 {text-align: center;  width: auto; margin: 1.5%;}
div.desc2 {text-align: center; font-size: 1.em; width: auto; margin: 1% 5% 1% 5%;  border: 2px solid #002157; }
div.desc4 {text-align: center;  width: auto; margin: 0.02%; overflow: hidden;}
div.desc6 {text-align: center;  width: auto; margin: 0.02%;}

/* used as a container for the rainbow line, right across the page body */
div.desc7 {text-align: center; width: auto; margin: 1%; clear: both;}

/*used to put text to the right of a picture, inside pattern10. */
div.desc10 {text-align: left;  width: auto; margin: 0 5% 5% 5%;}

/* Used for a full-width block of text, eg on hints and terms-and-conditions */
.contentj {padding: 1%; width: 95%; display: inline-block; border: 5px solid #002157; margin: 2.5% 0 2.5% 0; text-align: justify}

.about {overflow: auto; }

/* used in links page only, to hold sets of images together */
.columns2 {width: 100; }
.columns2 img {border: 5px solid #002157;}

.after-img {clear:both; text-align: center}

.symbol {border-collapse:collapse;
  margin: 15px 0;
  border: 1px solid #002157;
  table-layout: fixed;
  width: 100%;} /* must have this set */
.symbol th, td {border: 1px solid #002157; padding: 10px;} /*ok for this to stay as px */
.symbol td:nth-child(1) { width: 12%; }
.sturdy td:nth-child(2) { width: 12%; }
.symbol td:nth-child(3) { width: 12%; }
.symbol td:nth-child(4) { width: 64%; }

.terms {border-collapse:collapse; }

#freeeindex-widget {height:300px; width: 100%;}

div.p1 {padding-left: 1.5em; text-indent:-1.5em; }

/* ========== FORMS ================== */

form {width: 100%;  margin: 0 auto;}
label, input {display: inline-block;} /* in order to define widths */
label {width: 30%;  text-align: right;}  /* positions the label text beside the input */
label + input {width: 30%; margin: 0 30% 0 4%;} /* large margin-right to force the next element to the new-line and margin-left to create a gutter between the label and input */

ul { list-style:none;}

.mergeRow { padding:0 0 6px 0 !important; clear:both; }

.button {
    background-color: #250F95;
    border: none;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    margin: 4px 2px;
}

/* Groups, checkboxes, radio buttons */
ul.interestgroup_field,
ul.interestgroup_field li,
ul.unsub-options,
ul.unsub-options li,
.interestgroup_row { display:block; padding:0; margin:0; list-style:none; }
label.checkbox, label.radio { font-weight:normal; position:relative; line-height:24px; }
.checkbox input, .radio input { width:auto !important; display:inline-block; margin-right:5px; padding:0; border:none; background-color:transparent;}

/* ========== IMAGE CLASSES ================== */

img {width: 90%;} /* overides an image's size setting UNLESS it has a class setting or its parent div has image style set */

/* ------- IMAGES SET AS PERCENTAGES ------------- */
.img75      {width: 75% !important;} /* imagethreequarter */
.img60      {width: 60% !important;} /* homepageTitle */
.img48      {width: 48% !important;} /* imagehalf */
.img40      {width: 40% !important;}
.img32      {width: 32% !important;} /* imagethird */
.img30      {width: 30% !important;} /* titleimage */
.img2305    {width: 23.5% !important;} /* imagequarter */
.img19      {width: 19% !important;} /* fivewide, imagefifth */
.img16      {width: 16% !important;} /* sixwide patternmini */
.img13      {width: 13% !important;} /*sevenwide */
.img12      {width: 12% !important;} /* patternmicro eightwide */
.img11      {width: 11% !important;} /* kitmicro */
.img1005    {width: 10.5% !important;} /* ninewide, smallcloud, smallcloud2,  */
.img905     {width: 9.5% !important;} /* tenwide */
.img9       {width: 9% !important;} /* colour */
.img7       {width: 7% !important;}
.img5       {width: 5% !important;} /* socialmedia */
.img4       {width: 4% !important;} /* flags*/

/* img classes with additional settings */
.dividerline {width:100%; height:7px;}

/* BOLT-ON DIVS. BOLT ON DIVS: These can be added to any div, to change just the bit specified. eg <div class="onethird noborder">
The order is important: the override must come AFTER. */
.justify    {display: inline-block; text-align: justify !important;}
.right      {float: right;}
.left       {float: left;}
.center     {float: center;}
.noborder   {border: 0 !important;}
.border1    {border: 1px solid #002157;}
.border2    {border: 2px solid #002157;}
.tleft      {text-align: left}
.tright     {text-align: right;}
.tcenter    {text-align: center;}
.about1     {margin: 0 1% 0% 0%;}
.about2     {margin: 0 0% 0% 1%;}
.middle     {vertical-align:middle;}
.flagright  {float: right; margin: 0 0 0.1% 0.1%; padding: 0.3%;}
.flagleft   {float: left; margin: 0 0.1% 0.1% 0; padding: 0.3%;}

/* ------- IMAGES WITHIN SPECIFIC DIVS ------------- */
div.halfwidth img {width:50%; margin: 2% auto 2% auto;} /* div is half total width, and image is half of that width */
div.half img {margin: 2% auto 2% auto;} /* centre */
div.onethird img {margin: 2% auto 2% auto;} /* div is half total width, and image is half of that width */
div.pattern8 img {max-width: 260px !important;} /* View cart and Add to cart buttons */
div.onequarter img {max-width: 260px !important;} /*  View cart and Add to cart buttons */
div.desc1 img {max-width: 260px !important;} /*  View cart and Add to cart buttons */
div.pattern4 img {width: 90%;} /*This div is used exclusively to hold large pattern pictures. */
div.addtocart img {max-width: 130px !important;}  /*View cart and Add to cart buttons outside pattern8 */

/* ------- IMAGES SET AS PERCENTAGES ------------- */
.imagehalf{width: 48% !important;} /* leaves a few percentage for margins */
.imagehalfright{width: 50%; float: right;} /* pic of Helen on home page */
.imagethird{width: 32% !important;}
.imagequarter{width: 48% !important;} /* quarter too small for visibility in most divs */
.imagefifth{width: 32% !important;} /*used in About enfys and Antique */
.imagethreequarter{width: 75%;}
.homepageTitle{width: 60%;} /*very large cloud */
.fivewide{width: 23% !important;}
.sixwide{width: 23% !important;}
.sevenwide{width: 16% !important;}
.eightwide{width: 16% !important;}
.ninewide{width: 16% !important;}
.tenwide{width: 16% !important;}
.patternmini{width: 23% !important;} /* Small patterns buttons at the bottom of the page, plus anything else originally 150px x 150 px */
.patternmicro{width: 16% !important;} /* navigation images */
.kitmicro{width: 15% !important;}
.colour{width: 12% !important;}
.imgleftlarge{width:30%; float:left;} /* large usually square pictures with text to the right, used in patterns. Might not be necc with pattern4 set. */
.titleimage {width:50%;} /*all rainbow titles at the tops of pages */
.patternsimilar{width: 10%;} /* Other patterns like this, plus anything else originally 50px x 50 px */
.paypal{width: 90%;} /*PayPal buttons */

/*Bolt-on divs for images; can also be used for other things */
.imageleft {float: left; margin-right: 2%}
.imageright {float: right; margin-left: 2%}

/* ------- IMAGES SET TO SPECIFIC MAX-PIXELS ------------- */
/* double the computer-browser size, for most */
.imgicon {max-width: 16px !important;}
.socialmedia{width: 15% !important;} /* Crocheted twitter, fb, etc buttons at the bottom of the page, plus anything else that size */
.cartbutton{max-width: 15%;} /* Square Cart button, plus anything else that size */
.emailme {max-width: 75px;}
.emailmelarge {max-width: 250px;} /* only used on Contact page */
.emailmeverylarge {width: 20%;}
.smallcloud2 {width: 40%; vertical-align:middle;} /* Enfys original patterns */
.smallcloud {max-width:260px; vertical-align:middle;} /* used in footer */
.workshopcloud {max-width: 300px;} /*used on main Workshos page */
/* Flags in header adjust width to percent after image sizes stripped */
.flagright {float: right; margin: 0 0 0.1% 0.1%; padding: 0.3%; width:80px;}
.flagleft {float: left; margin: 0 0.1% 0.1% 0; padding: 0.3%; width:80px;}
.flaginline {width: 80px !important;}
.tunisianneedle {width: 40px !important;}
.kitimage {width: 100%; max-width: 300px;} /* small images floating in centre of large div, eg kit */

/* img classes with additional settings */
.dividerline {width:100%; height:7px;}

.VIRTUALFORM img {min-width: 180px;}

/* ======= TEXT STYLES ========= */

.center { text-align: center;}

h1 {font-size: 2.5em; font-weight: bold; text-align: center;}
h2 {font-size: 2em; font-weight: bold;}
h3 {font-size: 1.5em; font-weight: bold;}
h4 {font-size: 1.2em; font-weight: bold; text-decoration: underline}
h5 { font-weight: bold;}
h6 { font-weight: bold; text-decoration: underline}

/* Font sizes below 1.2 em are removed, as too small to read on a small screen. Default size applies instead. */
t2 { font-weight: bold;}
t3 {font-size: 0.3em !important;} /* set in header p */
t4 {font-size: 1.2em;}
t5 {}
t6 { font-weight: bold;}
t7 {}
t8 {font-weight: bold;}
t9 {font-size: 1.3em; font-weight: bold;}
t10 {font-size: 2em; font-weight: bold;}
t11 {font-size: 2.5em; font-weight: bold;}
t12 {font-size: 48pt; font-weight: bold;}
t13 {text-align: right}
t20 {color: #F67E17; font-size: 0.3em !important;}

t98 {font-size: 0.6em; font-weight: bold;}
t99 {font-size: 1.2em; font-weight: bold; color: #C90808;}
t100 {font-size: 2em; font-weight: bold; color: #C90808;}

a.two:link {font-size:50%;}
a.two:hover {font-size:80%;}

a.five:link { text-decoration:none;}
a.five:visited { text-decoration:none;}

a.six:link {font-size: 1.2em; color:#F67E17;}
a.six:visited {font-size: 1.2em; color:#F67E17;}



/* =============== NAVIGATION CLASSES ============================== */

/* ------ FUNCTIONALITY: This code does the heavy lifting to make it work! ---------- */

/* mobile navigation (hidden in non-mobile version) */
.menubutton{ /* This is the menu bar along the top, with the menubutton */
	display: block;
	text-align: right;
	margin: 0 auto 4% auto;
	padding: 0.5% 2% 0% 2%;
	background-color: #002157;
	width: 96%;
	font-size: 150%;}
	
.menubutton a{color: #ffffff !important; height: 10%! important; text-decoration: none;}

.menubutton img {
	width: 10%;
	display: inline;
	vertical-align: middle;
	margin-bottom: 0.5%;}

.menubuttonON{z-index: 1000;}
.menubuttonOFF {z-index: 1001;} /*This puts it ON TOP OF the "on" button when it's shown */
	
.showmore {display: none;} /* sideways arrowhead to indicate sublinks, for non-mobile navigation */

nav{display: none; /*hides nav bar until it's targeted */
	float: left; top: 8%; width: 90%;	 
	color: #002157; font-weight: bold; text-align:left;
	padding: 1% 0 1% 0; margin: 2% 0 2% 0; border: 0;}

.navsub, .navsubsub {float: left; width: 95%; color: #002157; font-weight: bold; text-align:left;
	padding: 1% 0 1% 0; margin: 0; border: 0;}

/*Displays navigation menu when the menu button is tapped */
nav:target {display: block !important;}

/* ------ STYLING: The rest is just how things look. ---------- */

nav a {text-decoration: none;}

nav ul{
  list-style:none;
  margin:0;
  padding: 0;
  width: 100%;
  line-height:100%;}

nav li{
	list-style:none;
	width: 100%;
	background-color: #ffffff;
	padding: 3%;
	margin: 2% 2% 0 2%;
	border: 5px solid #002157; background-image: url('images/graphics/nav_background2.jpg'); background-size: contain; overflow: hidden;}

nav a:link {color: #002157;}
nav a:visited {color: #002157;}

.navsub li {background-color: #ffffff; margin: 2% 0 0 0; width: 98%;
			border: 5px solid #002157; background-image: none;
			font-style: italic;}

nav ul ul ul li {background-image: url('images/graphics/nav_background2.jpg') !important; background-size: contain;} /* subsub menu gets the background back */

.navsub li a:link {color: #002157;}
.navsub li a:visited {color: #002157;}

/* =============== IFRAMES ============================== */

.youtube { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */}
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }