﻿@charset "UTF-8";
/******************************************************************
Site Name: Charities Services
Author: Sophie Taylor

Stylesheet: Main Stylesheet

1. Grid
2. Colour Palette
3. Typography
4. Linking Conventions
5. Tables
6. Forms

*******************************************************************/
/* 
==========================================================================
1. Grid
==========================================================================*/
.grid .header {
  width: 100%; }

.grid .home .col-1 {
  width: 248px;
  margin-right: 6px; }

.grid .home .col-2 {
  width: 248px;
  margin-right: 6px; }

.grid .home .col-3 {
  width: 248px;
  margin-right: 6px; }

.grid .home .col-4 {
  width: 248px;
  margin-right: 0; }

.grid .content .col-1 {
  margin: 0 6px 0 0;
  width: 764px; }

.grid .content .col-2 {
  width: 248px;
  margin-right: 0; }

/* 
==========================================================================
2. Colour palette
==========================================================================*/
/*Background*/
body {
  background: #edece2; }

/* 
==========================================================================
3. Typography
==========================================================================*/
@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-Light.eot");
  src: local("Fira Sans Light"), url("../fonts/Fira/eot/FiraSans-Light.eot") format("embedded-opentype"), url("../fonts/Fira/ttf/FiraSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-LightItalic.eot");
  src: local("Fira Sans Light Italic"), url("../fonts/Fira/eot/FiraSans-LightItalic.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-LightItalic.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-Regular.eot");
  src: local("Fira Sans Regular"), url("../fonts/Fira/eot/FiraSans-Regular.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-Regular.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-RegularItalic.eot");
  src: local("Fira Sans Regular Italic"), url("../fonts/Fira/eot/FiraSans-RegularItalic.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-RegularItalic.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-Medium.eot");
  src: local("Fira Sans Medium"), url("../fonts/Fira/eot/FiraSans-Medium.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-Medium.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-MediumItalic.eot");
  src: local("Fira Sans Medium Italic"), url("../fonts/Fira/eot/FiraSans-MediumItalic.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-MediumItalic.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-Bold.eot");
  src: local("Fira Sans Bold"), url("../fonts/Fira/eot/FiraSans-Bold.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-Bold.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("../fonts/Fira/eot/FiraSans-BoldItalic.eot");
  src: local("Fira Sans Bold Italic"), url("../fonts/Fira/eot/FiraSans-BoldItalic.eot") format("embedded-opentype"), url("../fonts/Fira/woff/FiraSans-BoldItalic.woff") format("woff"), url("../fonts/Fira/ttf/FiraSans-BoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: 'polyregular';
  src: url("../fonts/Poly/poly-regular-webfont.eot");
  src: url("../fonts/Poly/poly-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Poly/poly-regular-webfont.woff") format("woff"), url("../fonts/Poly/poly-regular-webfont.ttf") format("truetype"), url("../fonts/Poly/poly-regular-webfont.svg#polyregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'loraitalic';
  src: url("../fonts/Lora/lora-italic-webfont.eot");
  src: url("../fonts/Lora/lora-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Lora/lora-italic-webfont.woff") format("woff"), url("../fonts/Lora/lora-italic-webfont.ttf") format("truetype"), url("../fonts/Lora/lora-italic-webfont.svg#loraitalic") format("svg");
  font-weight: normal;
  font-style: italic; }

h1, h2, h3, h4, h5 {
  color: #6c6a6b;
  font-weight: 600;
  font-family: 'Fira Sans', sans-serif; }

h1 {
  font-size: 44px;
  line-height: 1.2; }

h2 {
  font-size: 30px;
  line-height: 1.2; }

h3 {
  font-size: 25px;
  line-height: 1.2; }

h4 {
  font-size: 18px;
  line-height: 1.2; }

h5 {
  font-size: 14px;
  line-height: 1.2; }

p, li {
  color: #6c6a6b;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 25px 0; }

.typeface-1 {
  margin-top: 30px; }

.typeface-2 {
  font-family: 'polyregular';
  font-weight: normal;
  font-style: normal; }

.typeface-3 {
  font-family: 'loraitalic';
  font-weight: normal;
  font-style: italic; }

.intro-text {
  font-size: 23px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: #58595B; }

.quote {
  font-size: 23px;
  font-weight: 300;
  font-style: italic;
  background: #f3f3f3;
  padding: 20px; }

ol li, ul li {
  margin-bottom: 8px; }

bold 
{
    font-weight: bold;
}

/* 
==========================================================================
4. Linking Conventions
==========================================================================*/
a {
  color: #706d6e;
  cursor: pointer; }

.SearchLink 
{
  color: #706d6e;
  cursor: pointer    
}

a:hover 
{
  text-decoration: underline;
  color: #969394; }

.primary-button {
  background: #edece2;
  padding: 10px;
  color: #706d6e;
  text-decoration: none;
  border-left: 10px solid #EAB752; }

.primary-button:hover {
  background: #f6f6f2; }

.secondary-button {
  background: #008ec0;
  padding: 10px 25px;
  text-decoration: none;
  color: white; }

.secondary-button:hover {
  background: #00a1da;
  color: white; }
 


/* 
==========================================================================
5. Tables
==========================================================================*/
tr {
  border: 1px solid #DCDCDC;
  display: block;
  padding: 12px 8px; }

tr.first {
  border: 1px solid #DCDCDC; }

th.table-header-border {
    border: 1px solid #DCDCDC;
    padding: 2px 2px 2px 2px;
    color: #007d57;
}
  
th.table-header-center
{
    text-align: center;
    border: 1px solid #DCDCDC;  
    color: #007d57;
}

td {
  vertical-align: top;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #706d6e;
  min-width: 100px;
   border: 1px solid #DCDCDC;  
   padding: 2px 2px 2px 2px;
}

th.table-center {
    text-align: center;
}

td.table-center {
    text-align: center;
}

/* 
==========================================================================
6. Forms
==========================================================================*/
select {
  border: 1px solid #afadae;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #706d6e;
  resize: none; }

input[type=text], #textarea {
  border: 1px solid #afadae;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #706d6e;
  resize: none; }

    .AnnualReturnNumerical
    {
        width: 100px;
    }

    .Dollar
    {
        text-align: right;
    }


input[type=password] {
  border: 1px solid #afadae;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #706d6e;
  resize: none; }

input[type=submit] {
  font-size: 14px;
  border: none;
  /*margin-top: 30px; INT change REMOVED */
  cursor: pointer; }

form {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #706d6e;
  /*padding-bottom: 40px; INT change REMOVED */
  }

.col-1 label {
  display: block;
  margin: 15px 0 3px 0; }

.col-2 label {
  margin-right: 15px; }

/* 
==========================================================================
7. Progress Bar
==========================================================================*/
.disableMeOnClick
{
    margin: 5px;
}  

div.fourCols
{
    width: 25%;
    height: 70px;
} 

div.fiveCols
{
    width: 20%;
    height: 70px;
}  
 
div.sixCols
{
    width: 16.66%;
    height: 70px;
}  

/* 
==========================================================================
8. Summary
==========================================================================*/
div.SummaryColumn.leftColumn {
    width: 48%;
    margin-right: 2%;
    padding-right: 2%;
    float: left;
    font-size: 13px;
    border-right: 1px solid #cdcdcd;
}

div.SummaryColumn.rightColumn {
    width: 48%;
    margin-left: 2%;
    float: left;
    font-size: 13px;
}

div.SummaryColumn h3 {
    padding: 15px 0 10px 0;
}

div.SummaryColumn h4 {
    padding: 15px 0 10px 0;
}

div.SummaryColumn p {
    margin: 0;
}

div.SummaryColumn dt {
    float: left;
    width: 50%;
    margin: 3px 0;
    font-weight: normal;
}

div.SummaryColumn dd {
    margin: 3px 0;
    float: left;
    width: 50%;
}

div.SummaryColumn dt.subheading {
    width: 100%;
    font-weight: bold;
    margin-top: 20px;
}


#documentsSuccess {
    color: green;
    width: 100%;
    float: left;    
}

.documentsError {
    margin: 10px 0px;
    font-size: 1.2em;
}


/**********************************************************************/
/*Template Styles – In theory you can ignore everthing from here down*/
body {
  margin: 0;
  font-family: sans-serif;
  font-weight: normal; }

.header-container {
  width: 1100px;
  margin-left: auto;
  margin-right: auto; }

header {
  background: #c5c2a4;
  margin: 0; }
  header h1 {
    margin: 0;
    color: white; }
  header h4 {
    margin: 0 0 0 8px;
    color: white;
    opacity: 0.7; }

.wrap {
  width: 1100px;
  margin-left: auto;
  margin-right: auto; }

section {
  margin-top: 50px;
  background: white; }

section h3.template {
  background: #969394;
  margin: 0;
  padding: 12px 35px;
  color: white; }

.section-inner {
  padding: 20px 35px 30px 35px; }

.last {
  margin-bottom: 40px; }

.border {
  border-top: 1px dotted #DCDCDC;
  padding-top: 25px; }

/*Grid – Template styles*/
.grid .section-inner {
  margin-top: 2%; }

.grid-inner {
  width: 1024px; }

.grid .header, .grid .home .col-1, .grid .home .col-2, .grid .home .col-3, .grid .home .col-4, .grid .content .col-1, .grid .content .col-2 {
  padding: 4% 0;
  background: #706d6e;
  color: white;
  text-align: left;
  display: inline-block; }

.grid .header {
  padding: 2% 0; }

/*Colour Palette - Template*/
.colour-palette ul {
  width: 45%;
  float: left;
  padding: 0 40px 0 0;
  list-style-type: none; }
.colour-palette li {
  margin-bottom: 12px; }
.colour-palette .colour {
  padding: 12px 12px;
  color: white;
  font-weight: 400;
  font-size: 16px; }
.colour-palette .colour-1 {
  background: #d39919; }
.colour-palette .colour-2 {
  background: #706d6e; }
.colour-palette .colour-3 {
  background: #a7a375; }
.colour-palette .colour-4 {
  background: #3db185; }
.colour-palette .colour-5 {
  background: #008ec0; }
.colour-palette .colour-6 {
  background: #d73458; }

.hex-code {
  float: right; }

/*Typography – Template*/
.typeface {
  font-size: 40px; }

.typography .label {
  margin-bottom: 40px; }
.typography h1 {
  margin: 0; }
.typography h2, .typography h3, .typography h4, .typography h5 {
  margin: 0; }

/*Tables*/
table {
  margin: 10px 0 10px 0; /*INT Update - Change from 40px to 10px bottom.*/
  width: 800px; }

/*Forms*/
.linking .col-1, .linking .col-2, .forms .col-1, .forms .col-2 {
  float: left;
  width: 45%;
  margin-right: 40px; }
.linking .col-2 p, .forms .col-2 p {
  display: inline-block;
  margin: 0 5px 30px 0; }
.linking .check-boxes, .forms .check-boxes {
  margin-top: 40px; }

/*Linking Conventions*/
.icon-text {
  margin-right: 45px; }

.iconography {
  font-size: 70px;
  color: #706d6e; }
  .iconography .section-inner {
    padding-top: 35px; }

/*Iconography*/
@font-face {
  font-family: "example-icon-font";
  src: url("../fonts/Charities-Icon-Font/icon-font.eot");
  src: url("../fonts/Charities-Icon-Font/icon-font.eot?#iefix") format("embedded-opentype"), url("../fonts/Charities-Icon-Font/icon-font.ttf") format("truetype"), url("../fonts/Charities-Icon-Font/icon-font.svg#example-icon-font") format("svg"), url("../fonts/Charities-Icon-Font/icon-font.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

[data-icon]:after {
  font-family: "example-icon-font";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "example-icon-font";
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

/*Clearfix*/
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.cf:after {
  clear: both; }
