/* ====================== 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: 1%; padding: 0;
	font-family: comic sans ms, Verdana, Arial, sans-serif;
	color: #002157; font-size: 1.2em; text-align: justify;}

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

header {width: 100%; height: 2%; padding: 0; margin: 0;} /* No styles were assigned to header */
header p {font-size: 1em;}

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

.container {margin-left: 14%; margin-right: 2%; width: 84%; text-align: center}
    /*Total adds up to 100%. same left margin as nav width + margin left.
	Total nav width including its margins: 19.5% */

.content    {padding: 0.7%; width: 100%; display: inline-block; border: 2px solid #002157; margin: 1.7% auto 1.7% auto;}
.wrap {width: 100%; display: block; clear: both;} /*this wraps around a batch of divs, eg to keep a row together nicely. See afghans page for an example. */

/*Put each row inside a div.wrap. */
div.ninety8     {width: 98%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern6 */
div.seventy8    {width: 78%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.seventy1    {width: 71%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern7, pattern11, pattern12, kit7,  */
div.sixty6      {width: 66%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern10 */
div.sixty       {width: 60%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.fifty6      {width: 56%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern5 */
div.forty8      {width: 48%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.thirty8     {width: 38%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern4 */
div.thirty5     {width: 35%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern2 */
div.thirty1     {width: 31%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.thirty      {width: 30%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*pattern1, pattern3, pattern9, kit7,  */
div.twenty35    {width: 23.5%; margin: 0.3%; padding: 0.3%; font-size: 1em;} /*kit8,  */
div.twenty      {width: 20%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.eighteen    {width: 18%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.fifteen     {width: 15%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.twelve5     {width: 12.5%; margin: 0.3%; padding: 0.3%; font-size: 1em;}
div.eleven      {width: 11%; margin: 0.3%; padding: 0.3%; font-size: 1em;}

.about      {overflow: auto;text-align: justify; }
#footer     {min-width:100%; margin: 3.5% 0 0 0; float:left; padding:0.7% 0; clear: both; text-align: center}
.after-img  {clear:both; text-align: center;}
.iframe     {height:60px; width:100% !important; }


/* ========== 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 */
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%;}

/* =============== SYMBOLS TABLE ====================== */
.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:350px; width: 90%;}

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 20% 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; }
/* ======= TEXT STYLES ========= */

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; }
h5 {font-weight: bold;}
h6 {font-weight: bold; text-decoration: underline}


t2 {font-weight: bold;}
t3 {font-size: 0.9em;}
t4 {font-size: 1.2em;}
t5 {font-size: 0.8em;}
t6 {font-size: 0.8em; font-weight: bold;}
t7 {font-size: 0.7em;}
t8 {font-size: 0.7em; font-weight: bold;}
t9 {font-size: 1.3em;}
t9b {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 {font-size: 1.2em; color: #F67E17;}

t98 {font-size: 1.3em; 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:80%;}
a.two:visited {font-size:80%;}
a.two:hover {font-size:100%;}

a.three:hover {background:#002157; color:#FFFFFF;}
a.four:hover {font-family:monospace;}

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

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

/* =============== NAVIGATION CLASSES ============================== */
/* hides the mobile navigation */
.menubutton {display: none;}

nav{position: fixed;
	top: 0.5%;
	left: 0.5%;
	width: 13%;
	height: 100%;
	font-size: 0.8em;
	color: #002157;
	font-weight: bold;
	text-align:left;
	padding: 1% 0 1% 0;
	margin: 2% 0 2% 0;
	border: 0;}

nav a {text-decoration: none;}

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

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

nav a:link {color: #002157;}
nav a:visited {color: #002157;}
nav a:hover {color: #2998CF;}

nav li:hover {background-color: #1585BC;}

/* ------ FUNCTIONALITY: This code does the heavy lifting to make it work! ---------- */
nav li:hover ul {display:block;} /* This makes the subordinate list appear when you hover */
nav li:hover ul ul {display:none;} /* This keeps the subsub menu hidden when you hover over its grandparent */
.navsub:hover {display:block;} /* This keeps the child menu visible when you move from its parent to it */

.navsub li:hover ul {display:block;} /*This sets the same again for the subsub menu */
.navsubsub:hover {display: block;} /*This sets the same again for the subsub menu */

.navsub, .navsubsub {
	position: absolute;
	display: none; /* FUNCTIONALITY: This keeps it hidden until you hover over its parent */
	height: 100%; /* this makes it big enough that it stays "hovered over" as you move down the options */
	margin-left: 90%; /* This makes it appear to the side */
	margin-top: -11%; /* This lifts it to the same height as its parent */
	z-index: 1001;} /* This makes sure it appears above anything else */

.navsub li {background-color: #ffffff; margin: 0 0 0 2%;
			border: 1px dotted #002157; background-image: url('images/graphics/nav_background2.jpg'); background-size: contain;}
.navsub li:hover {color: #00ff00 !important;}

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

.showmore {position: absolute; right: 2%; vertical-align: middle; width: 3%;} /* arrowhead to indicate sublinks */

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

.input[type="text"], .input[type="email"], .textarea, .select {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;}


/* =============== 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%; }