Difference between revisions of "Team:Stony Brook"

m
 
(345 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Stony Brook}}
+
{{Stony Brook Header}}
<!--
+
 
Typify by TEMPLATED
+
templated.co @templatedco
+
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+
-->
+
 
<html>
 
<html>
<head>
 
<title>Typify by TEMPLATED</title>
 
<meta charset="utf-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
 
<link rel="stylesheet" href="assets/css/main.css" />
 
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
 
</head>
 
<body>
 
  
<!-- Banner -->
+
<head>
<section id="banner">
+
<style>
<h2><strong>iGEM</strong></h2>
+
<p>Stony Brook University</p>
+
<ul class="actions">
+
<li><a href="2016.igem.org/Team:Stony_Brook/Team">Get started</a></li>
+
</ul>
+
</section>
+
  
<!-- One -->
+
#sideMenu, #top_title {display:none;}
<section id="one" class="wrapper special">
+
body {background-color:B61C1D; }
<div class="inner">
+
#content { padding:0px; width:100%; margin-top:0px; margin-left:0px;}
<header class="major">
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
<h2>Lorem ipsum feugiat tempus</h2>
+
</header>
+
<div class="features">
+
<div class="feature">
+
<i class="fa fa-diamond"></i>
+
<h3>Etiam consequat</h3>
+
<p>Sed tempus feugiat adipiscing nisl cursus aliquam dolore.</p>
+
</div>
+
<div class="feature">
+
<i class="fa fa-copy"></i>
+
<h3>Sed adipiscing</h3>
+
<p>Sed tempus feugiat adipiscing nisl cursus aliquam dolore.</p>
+
</div>
+
<div class="feature">
+
<i class="fa fa-paper-plane-o"></i>
+
<h3>Feugiat nullam</h3>
+
<p>Sed tempus feugiat adipiscing nisl cursus aliquam dolore.</p>
+
</div>
+
<div class="feature">
+
<i class="fa fa-save"></i>
+
<h3>Amet imperdiet</h3>
+
<p>Sed tempus feugiat adipiscing nisl cursus aliquam dolore.</p>
+
</div>
+
<div class="feature">
+
<i class="fa fa-envelope-o"></i>
+
<h3>Tempus lorem</h3>
+
<p>Sed tempus feugiat adipiscing nisl cursus aliquam dolore.</p>
+
</div>
+
</div>
+
</div>
+
</section>
+
  
<!-- Two -->
+
#Plswork { text-align: center;
<section id="two" class="wrapper style2 special">
+
position: absolute;
<div class="inner narrow">
+
margin-left: 400px;
<header>
+
margin-top: 16px;
<h2>Get in touch</h2>
+
}
</header>
+
h1 {color:#B61C1D;
<form class="grid-form" method="post" action="#">
+
font-size: 350%
<div class="form-control narrow">
+
<label for="name">Name</label>
+
<input name="name" id="name" type="text">
+
</div>
+
<div class="form-control narrow">
+
<label for="email">Email</label>
+
<input name="email" id="email" type="email">
+
</div>
+
<div class="form-control">
+
<label for="message">Message</label>
+
<textarea name="message" id="message" rows="4"></textarea>
+
</div>
+
<ul class="actions">
+
<li><input value="Send Message" type="submit"></li>
+
</ul>
+
</form>
+
</div>
+
</section>
+
 
+
<!-- Three -->
+
<!--
+
<section id="three" class="wrapper">
+
<div class="inner">
+
 
+
<h2 id="content">Sample Content</h2>
+
<p>Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing.</p>
+
<div class="row">
+
<div class="6u 12u$(small)">
+
<h3>Sem turpis amet semper</h3>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
</div>
+
<div class="6u$ 12u$(small)">
+
<h3>Magna odio tempus commodo</h3>
+
<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>
+
</div>
+
<div class="4u 12u$(medium)">
+
<h3>Interdum sapien gravida</h3>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
</div>
+
<div class="4u 12u$(medium)">
+
<h3>Faucibus consequat lorem</h3>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
</div>
+
<div class="4u$ 12u$(medium)">
+
<h3>Accumsan montes viverra</h3>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
</div>
+
</div>
+
 
+
<hr class="major" />
+
 
+
<h2 id="elements">Elements</h2>
+
<div class="row 200%">
+
<div class="6u 12u$(medium)">
+
 
+
<h3>Text</h3>
+
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
+
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
+
Finally, this is a <a href="#">link</a>.</p>
+
<hr />
+
<h2>Heading Level 2</h2>
+
<h3>Heading Level 3</h3>
+
<h4>Heading Level 4</h4>
+
<h5>Heading Level 5</h5>
+
<h6>Heading Level 6</h6>
+
<hr />
+
<header>
+
<h2>Heading with a Subtitle</h2>
+
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
+
</header>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
<header>
+
<h3>Heading with a Subtitle</h3>
+
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
+
</header>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
<header>
+
<h4>Heading with a Subtitle</h4>
+
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
+
</header>
+
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
+
 
+
<h3>Lists</h3>
+
<div class="row">
+
<div class="6u 12u$(small)">
+
 
+
<h4>Unordered</h4>
+
<ul>
+
<li>Dolor pulvinar etiam magna etiam.</li>
+
<li>Sagittis adipiscing lorem eleifend.</li>
+
<li>Felis enim feugiat dolore viverra.</li>
+
</ul>
+
 
+
<h4>Alternate</h4>
+
<ul class="alt">
+
<li>Dolor pulvinar etiam magna etiam.</li>
+
<li>Sagittis adipiscing lorem eleifend.</li>
+
<li>Felis enim feugiat dolore viverra.</li>
+
</ul>
+
 
+
</div>
+
<div class="6u$ 12u$(small)">
+
 
+
<h4>Ordered</h4>
+
<ol>
+
<li>Dolor pulvinar etiam magna etiam.</li>
+
<li>Etiam vel felis at lorem sed viverra.</li>
+
<li>Felis enim feugiat dolore viverra.</li>
+
<li>Dolor pulvinar etiam magna etiam.</li>
+
<li>Etiam vel felis at lorem sed viverra.</li>
+
<li>Felis enim feugiat dolore viverra.</li>
+
</ol>
+
 
+
<h4>Icons</h4>
+
<ul class="icons">
+
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
+
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
+
<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
+
</ul>
+
 
+
</div>
+
</div>
+
<h4>Definition</h4>
+
<dl>
+
<dt>Item 1</dt>
+
<dd>
+
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
+
</dd>
+
<dt>Item 2</dt>
+
<dd>
+
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
+
</dd>
+
<dt>Item 3</dt>
+
<dd>
+
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
+
</dd>
+
</dl>
+
 
+
<h4>Actions</h4>
+
<ul class="actions">
+
<li><a href="#" class="button special">Default</a></li>
+
<li><a href="#" class="button">Default</a></li>
+
<li><a href="#" class="button alt">Default</a></li>
+
</ul>
+
<ul class="actions small">
+
<li><a href="#" class="button special small">Small</a></li>
+
<li><a href="#" class="button small">Small</a></li>
+
<li><a href="#" class="button alt small">Small</a></li>
+
</ul>
+
<div class="row">
+
<div class="3u 12u$(small)">
+
<ul class="actions vertical">
+
<li><a href="#" class="button special">Default</a></li>
+
<li><a href="#" class="button">Default</a></li>
+
<li><a href="#" class="button alt">Default</a></li>
+
</ul>
+
</div>
+
<div class="3u 12u$(small)">
+
<ul class="actions vertical small">
+
<li><a href="#" class="button special small">Small</a></li>
+
<li><a href="#" class="button small">Small</a></li>
+
<li><a href="#" class="button alt small">Small</a></li>
+
</ul>
+
</div>
+
<div class="3u 12u$(small)">
+
<ul class="actions vertical">
+
<li><a href="#" class="button special fit">Default</a></li>
+
<li><a href="#" class="button fit">Default</a></li>
+
<li><a href="#" class="button alt fit">Default</a></li>
+
</ul>
+
</div>
+
<div class="3u$ 12u$(small)">
+
<ul class="actions vertical small">
+
<li><a href="#" class="button special small fit">Small</a></li>
+
<li><a href="#" class="button small fit">Small</a></li>
+
<li><a href="#" class="button alt small fit">Small</a></li>
+
</ul>
+
</div>
+
</div>
+
 
+
<h3>Blockquote</h3>
+
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.</blockquote>
+
 
+
<h3>Table</h3>
+
<h4>Default</h4>
+
<div class="table-wrapper">
+
<table>
+
<thead>
+
<tr>
+
<th>Name</th>
+
<th>Description</th>
+
<th>Price</th>
+
</tr>
+
</thead>
+
<tbody>
+
<tr>
+
<td>Item 1</td>
+
<td>Ante turpis integer aliquet porttitor.</td>
+
<td>29.99</td>
+
</tr>
+
<tr>
+
<td>Item 2</td>
+
<td>Vis ac commodo adipiscing arcu aliquet.</td>
+
<td>19.99</td>
+
</tr>
+
<tr>
+
<td>Item 3</td>
+
<td> Morbi faucibus arcu accumsan lorem.</td>
+
<td>29.99</td>
+
</tr>
+
<tr>
+
<td>Item 4</td>
+
<td>Vitae integer tempus condimentum.</td>
+
<td>19.99</td>
+
</tr>
+
<tr>
+
<td>Item 5</td>
+
<td>Ante turpis integer aliquet porttitor.</td>
+
<td>29.99</td>
+
</tr>
+
</tbody>
+
<tfoot>
+
<tr>
+
<td colspan="2"></td>
+
<td>100.00</td>
+
</tr>
+
</tfoot>
+
</table>
+
</div>
+
 
+
<h4>Alternate</h4>
+
<div class="table-wrapper">
+
<table class="alt">
+
<thead>
+
<tr>
+
<th>Name</th>
+
<th>Description</th>
+
<th>Price</th>
+
</tr>
+
</thead>
+
<tbody>
+
<tr>
+
<td>Item 1</td>
+
<td>Ante turpis integer aliquet porttitor.</td>
+
<td>29.99</td>
+
</tr>
+
<tr>
+
<td>Item 2</td>
+
<td>Vis ac commodo adipiscing arcu aliquet.</td>
+
<td>19.99</td>
+
</tr>
+
<tr>
+
<td>Item 3</td>
+
<td> Morbi faucibus arcu accumsan lorem.</td>
+
<td>29.99</td>
+
</tr>
+
<tr>
+
<td>Item 4</td>
+
<td>Vitae integer tempus condimentum.</td>
+
<td>19.99</td>
+
</tr>
+
<tr>
+
<td>Item 5</td>
+
<td>Ante turpis integer aliquet porttitor.</td>
+
<td>29.99</td>
+
</tr>
+
</tbody>
+
<tfoot>
+
<tr>
+
<td colspan="2"></td>
+
<td>100.00</td>
+
</tr>
+
</tfoot>
+
</table>
+
</div>
+
 
+
</div>
+
<div class="6u$ 12u$(medium)">
+
 
+
<h3>Buttons</h3>
+
<ul class="actions">
+
<li><a href="#" class="button special">Special</a></li>
+
<li><a href="#" class="button">Default</a></li>
+
<li><a href="#" class="button alt">Alternate</a></li>
+
</ul>
+
<ul class="actions">
+
<li><a href="#" class="button special big">Big</a></li>
+
<li><a href="#" class="button">Default</a></li>
+
<li><a href="#" class="button alt small">Small</a></li>
+
</ul>
+
<ul class="actions fit">
+
<li><a href="#" class="button special fit">Fit</a></li>
+
<li><a href="#" class="button fit">Fit</a></li>
+
<li><a href="#" class="button alt fit">Fit</a></li>
+
</ul>
+
<ul class="actions fit small">
+
<li><a href="#" class="button special fit small">Fit + Small</a></li>
+
<li><a href="#" class="button fit small">Fit + Small</a></li>
+
<li><a href="#" class="button alt fit small">Fit + Small</a></li>
+
</ul>
+
<ul class="actions">
+
<li><a href="#" class="button special icon fa-search">Icon</a></li>
+
<li><a href="#" class="button icon fa-download">Icon</a></li>
+
<li><a href="#" class="button alt icon fa-check">Icon</a></li>
+
</ul>
+
<ul class="actions">
+
<li><span class="button special disabled">Special</span></li>
+
<li><span class="button disabled">Default</span></li>
+
<li><span class="button alt disabled">Alternate</span></li>
+
</ul>
+
 
+
<h3>Form</h3>
+
<form method="post" action="#">
+
<div class="row uniform">
+
<div class="6u 12u$(xsmall)">
+
<input type="text" name="name" id="name" value="" placeholder="Name" />
+
</div>
+
<div class="6u$ 12u$(xsmall)">
+
<input type="email" name="email" id="email" value="" placeholder="Email" />
+
</div>
+
<div class="12u$">
+
<div class="select-wrapper">
+
<select name="category" id="category">
+
<option value="">- Category -</option>
+
<option value="1">Manufacturing</option>
+
<option value="1">Shipping</option>
+
<option value="1">Administration</option>
+
<option value="1">Human Resources</option>
+
</select>
+
</div>
+
</div>
+
<div class="4u 12u$(small)">
+
<input type="radio" id="priority-low" name="priority" checked>
+
<label for="priority-low">Low Priority</label>
+
</div>
+
<div class="4u 12u$(small)">
+
<input type="radio" id="priority-normal" name="priority">
+
<label for="priority-normal">Normal Priority</label>
+
</div>
+
<div class="4u$ 12u$(small)">
+
<input type="radio" id="priority-high" name="priority">
+
<label for="priority-high">High Priority</label>
+
</div>
+
<div class="6u 12u$(small)">
+
<input type="checkbox" id="copy" name="copy">
+
<label for="copy">Email me a copy of this message</label>
+
</div>
+
<div class="6u$ 12u$(small)">
+
<input type="checkbox" id="human" name="human" checked>
+
<label for="human">I am a human and not a robot</label>
+
</div>
+
<div class="12u$">
+
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
+
</div>
+
<div class="12u$">
+
<ul class="actions">
+
<li><input type="submit" value="Send Message" /></li>
+
<li><input type="reset" value="Reset" class="alt" /></li>
+
</ul>
+
</div>
+
</div>
+
</form>
+
 
+
<hr />
+
 
+
<form method="post" action="#">
+
<div class="row uniform">
+
<div class="9u 12u$(small)">
+
<input type="text" name="query" id="query" value="" placeholder="Query" />
+
</div>
+
<div class="3u$ 12u$(small)">
+
<input type="submit" value="Search" class="fit" />
+
</div>
+
</div>
+
</form>
+
 
+
<h3>Image</h3>
+
<h4>Fit</h4>
+
<span class="image fit"><img src="images/pic01.jpg" alt="" /></span>
+
<div class="box alt">
+
<div class="row 50% uniform">
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u$"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u$"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
<div class="4u$"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
+
</div>
+
</div>
+
 
+
<h4>Left &amp; Right</h4>
+
<p><span class="image left"><img src="images/pic02.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.</p>
+
<p><span class="image right"><img src="images/pic02.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.</p>
+
 
+
<h3>Box</h3>
+
<div class="box">
+
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
+
</div>
+
 
+
<h3>Preformatted</h3>
+
<pre><code>i = 0;
+
 
+
while (!deck.isInOrder()) {
+
    print 'Iteration ' + i;
+
    deck.shuffle();
+
    i++;
+
 
}
 
}
 +
h2 {color: #B61C1D;
 +
font-size: 200%}
  
print 'It took ' + i + ' iterations to sort the deck.';
+
</style>
</code></pre>
+
</head>
  
</div>
+
<body>
</div>
+
<div id= "Plswork">
 +
<h1 style="font-family: Georgia; -webkit-text-stroke: 0.5px white;
 +
  color: ;#B61C1D
 +
  text-shadow:
 +
      3px 3px 0 #FFFFFF,
 +
    -1px -1px 0 #FFFFFF, 
 +
      1px -1px 0 #FFFFFF,
 +
      -1px 1px 0 #FFFFFF,
 +
      1px 1px 0 #FFFFFF;" <!--- border:2px; border-style:solid; border-color:#FFFFFF; padding: 1em;" --!> <strong> Stony Brook University
 +
<br>
 +
<br>
 +
<br> iGEM </strong></h1>
 +
</div>
 +
<div id = "img-back-header">
  
</div>
+
<img src="https://static.igem.org/mediawiki/2016/d/d8/T--Stony_Brook--YoSimonsWeLit.jpeg" style="width:100%">
</section>
+
<!---
-->
+
<img src="https://static.igem.org/mediawiki/2016/a/a6/T--Stony_Brook--SbuYasssslayyyyy.jpeg" style="width:100%">
 +
<img src = "https://static.igem.org/mediawiki/2014/a/a5/Stony_brook_home_background.png" style = "width:100%">
 +
<img src= "https://static.igem.org/mediawiki/2016/d/d7/T--Stony_Brook--SBUGOESFARBEYOND.jpeg" style="width:100%">
 +
--!>
  
<!-- Footer -->
+
</div>
<footer id="footer">
+
<div class="copyright">
+
&copy; Untitled. Design: <a href="http://templated.co/">TEMPLATED</a>.
+
</div>
+
</footer>
+
  
<!-- Scripts -->
+
<div class= "footer">
<script src="assets/js/jquery.min.js"></script>
+
<a href= "https://twitter.com/igemsbu"><img src= "https://static.igem.org/mediawiki/2016/7/72/T--Stony_Brook--Twitter_Square_.png" width= 100px</a>  
<script src="assets/js/skel.min.js"></script>
+
<script src="assets/js/util.js"></script>
+
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
+
<script src="assets/js/main.js"></script>
+
  
</body>
+
<a href = "https://www.facebook.com/iGEMatstonybrook/"><img src= "https://static.igem.org/mediawiki/2016/f/fa/T--Stony_Brook--Facebook_Logo_.png"</a>
<style> /*
+
Typify by TEMPLATED
+
templated.co @templatedco
+
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
+
*/
+
  
/* Reset */
+
<a href = "http://igem.today/"><img src= "https://static.igem.org/mediawiki/2016/0/04/T--Stony_Brook--WEWORKWITHOTHERHUMANSWOO.jpeg" width="60" height="60" </a>
  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 
margin: 0;
 
padding: 0;
 
border: 0;
 
font-size: 100%;
 
font: inherit;
 
vertical-align: baseline;
 
}
 
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
</div>
display: block;
+
}
+
  
body {
 
line-height: 1;
 
}
 
  
ol, ul {
 
list-style: none;
 
}
 
  
blockquote, q {
+
</body>
quotes: none;
+
}
+
 
+
blockquote:before, blockquote:after, q:before, q:after {
+
content: '';
+
content: none;
+
}
+
 
+
table {
+
border-collapse: collapse;
+
border-spacing: 0;
+
}
+
 
+
body {
+
-webkit-text-size-adjust: none;
+
}
+
 
+
/* Box Model */
+
 
+
*, *:before, *:after {
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
/* Containers */
+
 
+
.container {
+
margin-left: auto;
+
margin-right: auto;
+
}
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 100em;
+
min-width: 80em;
+
}
+
 
+
.container.\37 5\25 {
+
width: 60em;
+
}
+
 
+
.container.\35 0\25 {
+
width: 40em;
+
}
+
 
+
.container.\32 5\25 {
+
width: 20em;
+
}
+
 
+
.container {
+
width: 80em;
+
}
+
 
+
@media screen and (max-width: 1680px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 100em;
+
min-width: 80em;
+
}
+
 
+
.container.\37 5\25 {
+
width: 60em;
+
}
+
 
+
.container.\35 0\25 {
+
width: 40em;
+
}
+
 
+
.container.\32 5\25 {
+
width: 20em;
+
}
+
 
+
.container {
+
width: 80em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 81.25em;
+
min-width: 65em;
+
}
+
 
+
.container.\37 5\25 {
+
width: 48.75em;
+
}
+
 
+
.container.\35 0\25 {
+
width: 32.5em;
+
}
+
 
+
.container.\32 5\25 {
+
width: 16.25em;
+
}
+
 
+
.container {
+
width: 65em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 112.5%;
+
min-width: 90%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 67.5%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 45%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 22.5%;
+
}
+
 
+
.container {
+
width: 90%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 112.5%;
+
min-width: 90%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 67.5%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 45%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 22.5%;
+
}
+
 
+
.container {
+
width: 90%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
.container.\31 25\25 {
+
width: 100%;
+
max-width: 112.5%;
+
min-width: 90%;
+
}
+
 
+
.container.\37 5\25 {
+
width: 67.5%;
+
}
+
 
+
.container.\35 0\25 {
+
width: 45%;
+
}
+
 
+
.container.\32 5\25 {
+
width: 22.5%;
+
}
+
 
+
.container {
+
width: 90%;
+
}
+
 
+
}
+
 
+
/* Grid */
+
 
+
.row {
+
border-bottom: solid 1px transparent;
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
.row > * {
+
float: left;
+
-moz-box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
}
+
 
+
.row:after, .row:before {
+
content: '';
+
display: block;
+
clear: both;
+
height: 0;
+
}
+
 
+
.row.uniform > * > :first-child {
+
margin-top: 0;
+
}
+
 
+
.row.uniform > * > :last-child {
+
margin-bottom: 0;
+
}
+
 
+
.row.\30 \25 > * {
+
padding: 0 0 0 0em;
+
}
+
 
+
.row.\30 \25 {
+
margin: 0 0 -1px 0em;
+
}
+
 
+
.row.uniform.\30 \25 > * {
+
padding: 0em 0 0 0em;
+
}
+
 
+
.row.uniform.\30 \25 {
+
margin: 0em 0 -1px 0em;
+
}
+
 
+
.row > * {
+
padding: 0 0 0 2em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -2em;
+
}
+
 
+
.row.uniform > * {
+
padding: 2em 0 0 2em;
+
}
+
 
+
.row.uniform {
+
margin: -2em 0 -1px -2em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 4em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -4em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 4em 0 0 4em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -4em 0 -1px -4em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 3em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -3em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 3em 0 0 3em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -3em 0 -1px -3em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 1em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -1em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 1em 0 0 1em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -1em 0 -1px -1em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.5em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.5em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.5em 0 0 0.5em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.5em 0 -1px -0.5em;
+
}
+
 
+
.\31 2u, .\31 2u\24 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u, .\31 1u\24 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u, .\31 0u\24 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u, .\39 u\24 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u, .\38 u\24 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u, .\37 u\24 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u, .\36 u\24 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u, .\35 u\24 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u, .\34 u\24 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u, .\33 u\24 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u, .\32 u\24 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u, .\31 u\24 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24 + *,
+
.\31 1u\24 + *,
+
.\31 0u\24 + *,
+
.\39 u\24 + *,
+
.\38 u\24 + *,
+
.\37 u\24 + *,
+
.\36 u\24 + *,
+
.\35 u\24 + *,
+
.\34 u\24 + *,
+
.\33 u\24 + *,
+
.\32 u\24 + *,
+
.\31 u\24 + * {
+
clear: left;
+
}
+
 
+
.\-11u {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u {
+
margin-left: 75%;
+
}
+
 
+
.\-8u {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u {
+
margin-left: 50%;
+
}
+
 
+
.\-5u {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u {
+
margin-left: 25%;
+
}
+
 
+
.\-2u {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u {
+
margin-left: 8.33333%;
+
}
+
 
+
@media screen and (max-width: 1680px) {
+
 
+
.row > * {
+
padding: 0 0 0 2em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -2em;
+
}
+
 
+
.row.uniform > * {
+
padding: 2em 0 0 2em;
+
}
+
 
+
.row.uniform {
+
margin: -2em 0 -1px -2em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 4em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -4em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 4em 0 0 4em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -4em 0 -1px -4em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 3em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -3em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 3em 0 0 3em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -3em 0 -1px -3em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 1em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -1em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 1em 0 0 1em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -1em 0 -1px -1em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.5em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.5em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.5em 0 0 0.5em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.5em 0 -1px -0.5em;
+
}
+
 
+
.\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28xlarge\29, .\39 u\24\28xlarge\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28xlarge\29, .\38 u\24\28xlarge\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28xlarge\29, .\37 u\24\28xlarge\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28xlarge\29, .\36 u\24\28xlarge\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28xlarge\29, .\35 u\24\28xlarge\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28xlarge\29, .\34 u\24\28xlarge\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28xlarge\29, .\33 u\24\28xlarge\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28xlarge\29, .\32 u\24\28xlarge\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28xlarge\29, .\31 u\24\28xlarge\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28xlarge\29 + *,
+
.\31 1u\24\28xlarge\29 + *,
+
.\31 0u\24\28xlarge\29 + *,
+
.\39 u\24\28xlarge\29 + *,
+
.\38 u\24\28xlarge\29 + *,
+
.\37 u\24\28xlarge\29 + *,
+
.\36 u\24\28xlarge\29 + *,
+
.\35 u\24\28xlarge\29 + *,
+
.\34 u\24\28xlarge\29 + *,
+
.\33 u\24\28xlarge\29 + *,
+
.\32 u\24\28xlarge\29 + *,
+
.\31 u\24\28xlarge\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28xlarge\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28xlarge\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28xlarge\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28xlarge\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28xlarge\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28xlarge\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28xlarge\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28xlarge\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28xlarge\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28xlarge\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28xlarge\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
.row > * {
+
padding: 0 0 0 1.5em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -1.5em;
+
}
+
 
+
.row.uniform > * {
+
padding: 1.5em 0 0 1.5em;
+
}
+
 
+
.row.uniform {
+
margin: -1.5em 0 -1px -1.5em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 3em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -3em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 3em 0 0 3em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -3em 0 -1px -3em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 2.25em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -2.25em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 2.25em 0 0 2.25em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -2.25em 0 -1px -2.25em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 0.75em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -0.75em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 0.75em 0 0 0.75em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -0.75em 0 -1px -0.75em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.375em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.375em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.375em 0 0 0.375em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.375em 0 -1px -0.375em;
+
}
+
 
+
.\31 2u\28large\29, .\31 2u\24\28large\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28large\29, .\31 1u\24\28large\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28large\29, .\31 0u\24\28large\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28large\29, .\39 u\24\28large\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28large\29, .\38 u\24\28large\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28large\29, .\37 u\24\28large\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28large\29, .\36 u\24\28large\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28large\29, .\35 u\24\28large\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28large\29, .\34 u\24\28large\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28large\29, .\33 u\24\28large\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28large\29, .\32 u\24\28large\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28large\29, .\31 u\24\28large\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28large\29 + *,
+
.\31 1u\24\28large\29 + *,
+
.\31 0u\24\28large\29 + *,
+
.\39 u\24\28large\29 + *,
+
.\38 u\24\28large\29 + *,
+
.\37 u\24\28large\29 + *,
+
.\36 u\24\28large\29 + *,
+
.\35 u\24\28large\29 + *,
+
.\34 u\24\28large\29 + *,
+
.\33 u\24\28large\29 + *,
+
.\32 u\24\28large\29 + *,
+
.\31 u\24\28large\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28large\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28large\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28large\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28large\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28large\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28large\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28large\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28large\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28large\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28large\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28large\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
.row > * {
+
padding: 0 0 0 1.5em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -1.5em;
+
}
+
 
+
.row.uniform > * {
+
padding: 1.5em 0 0 1.5em;
+
}
+
 
+
.row.uniform {
+
margin: -1.5em 0 -1px -1.5em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 3em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -3em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 3em 0 0 3em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -3em 0 -1px -3em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 2.25em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -2.25em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 2.25em 0 0 2.25em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -2.25em 0 -1px -2.25em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 0.75em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -0.75em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 0.75em 0 0 0.75em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -0.75em 0 -1px -0.75em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.375em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.375em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.375em 0 0 0.375em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.375em 0 -1px -0.375em;
+
}
+
 
+
.\31 2u\28medium\29, .\31 2u\24\28medium\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28medium\29, .\31 1u\24\28medium\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28medium\29, .\31 0u\24\28medium\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28medium\29, .\39 u\24\28medium\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28medium\29, .\38 u\24\28medium\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28medium\29, .\37 u\24\28medium\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28medium\29, .\36 u\24\28medium\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28medium\29, .\35 u\24\28medium\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28medium\29, .\34 u\24\28medium\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28medium\29, .\33 u\24\28medium\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28medium\29, .\32 u\24\28medium\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28medium\29, .\31 u\24\28medium\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28medium\29 + *,
+
.\31 1u\24\28medium\29 + *,
+
.\31 0u\24\28medium\29 + *,
+
.\39 u\24\28medium\29 + *,
+
.\38 u\24\28medium\29 + *,
+
.\37 u\24\28medium\29 + *,
+
.\36 u\24\28medium\29 + *,
+
.\35 u\24\28medium\29 + *,
+
.\34 u\24\28medium\29 + *,
+
.\33 u\24\28medium\29 + *,
+
.\32 u\24\28medium\29 + *,
+
.\31 u\24\28medium\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28medium\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28medium\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28medium\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28medium\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28medium\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28medium\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28medium\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28medium\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28medium\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28medium\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28medium\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.row > * {
+
padding: 0 0 0 1.25em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -1.25em;
+
}
+
 
+
.row.uniform > * {
+
padding: 1.25em 0 0 1.25em;
+
}
+
 
+
.row.uniform {
+
margin: -1.25em 0 -1px -1.25em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 2.5em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -2.5em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 2.5em 0 0 2.5em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -2.5em 0 -1px -2.5em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 1.875em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -1.875em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 1.875em 0 0 1.875em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -1.875em 0 -1px -1.875em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 0.625em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -0.625em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 0.625em 0 0 0.625em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -0.625em 0 -1px -0.625em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.3125em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.3125em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.3125em 0 0 0.3125em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.3125em 0 -1px -0.3125em;
+
}
+
 
+
.\31 2u\28small\29, .\31 2u\24\28small\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28small\29, .\31 1u\24\28small\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28small\29, .\31 0u\24\28small\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28small\29, .\39 u\24\28small\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28small\29, .\38 u\24\28small\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28small\29, .\37 u\24\28small\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28small\29, .\36 u\24\28small\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28small\29, .\35 u\24\28small\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28small\29, .\34 u\24\28small\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28small\29, .\33 u\24\28small\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28small\29, .\32 u\24\28small\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28small\29, .\31 u\24\28small\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28small\29 + *,
+
.\31 1u\24\28small\29 + *,
+
.\31 0u\24\28small\29 + *,
+
.\39 u\24\28small\29 + *,
+
.\38 u\24\28small\29 + *,
+
.\37 u\24\28small\29 + *,
+
.\36 u\24\28small\29 + *,
+
.\35 u\24\28small\29 + *,
+
.\34 u\24\28small\29 + *,
+
.\33 u\24\28small\29 + *,
+
.\32 u\24\28small\29 + *,
+
.\31 u\24\28small\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28small\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28small\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28small\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28small\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28small\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28small\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28small\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28small\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28small\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28small\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28small\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
.row > * {
+
padding: 0 0 0 1.25em;
+
}
+
 
+
.row {
+
margin: 0 0 -1px -1.25em;
+
}
+
 
+
.row.uniform > * {
+
padding: 1.25em 0 0 1.25em;
+
}
+
 
+
.row.uniform {
+
margin: -1.25em 0 -1px -1.25em;
+
}
+
 
+
.row.\32 00\25 > * {
+
padding: 0 0 0 2.5em;
+
}
+
 
+
.row.\32 00\25 {
+
margin: 0 0 -1px -2.5em;
+
}
+
 
+
.row.uniform.\32 00\25 > * {
+
padding: 2.5em 0 0 2.5em;
+
}
+
 
+
.row.uniform.\32 00\25 {
+
margin: -2.5em 0 -1px -2.5em;
+
}
+
 
+
.row.\31 50\25 > * {
+
padding: 0 0 0 1.875em;
+
}
+
 
+
.row.\31 50\25 {
+
margin: 0 0 -1px -1.875em;
+
}
+
 
+
.row.uniform.\31 50\25 > * {
+
padding: 1.875em 0 0 1.875em;
+
}
+
 
+
.row.uniform.\31 50\25 {
+
margin: -1.875em 0 -1px -1.875em;
+
}
+
 
+
.row.\35 0\25 > * {
+
padding: 0 0 0 0.625em;
+
}
+
 
+
.row.\35 0\25 {
+
margin: 0 0 -1px -0.625em;
+
}
+
 
+
.row.uniform.\35 0\25 > * {
+
padding: 0.625em 0 0 0.625em;
+
}
+
 
+
.row.uniform.\35 0\25 {
+
margin: -0.625em 0 -1px -0.625em;
+
}
+
 
+
.row.\32 5\25 > * {
+
padding: 0 0 0 0.3125em;
+
}
+
 
+
.row.\32 5\25 {
+
margin: 0 0 -1px -0.3125em;
+
}
+
 
+
.row.uniform.\32 5\25 > * {
+
padding: 0.3125em 0 0 0.3125em;
+
}
+
 
+
.row.uniform.\32 5\25 {
+
margin: -0.3125em 0 -1px -0.3125em;
+
}
+
 
+
.\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 {
+
width: 100%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 {
+
width: 91.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 {
+
width: 83.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\39 u\28xsmall\29, .\39 u\24\28xsmall\29 {
+
width: 75%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\38 u\28xsmall\29, .\38 u\24\28xsmall\29 {
+
width: 66.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\37 u\28xsmall\29, .\37 u\24\28xsmall\29 {
+
width: 58.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\36 u\28xsmall\29, .\36 u\24\28xsmall\29 {
+
width: 50%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\35 u\28xsmall\29, .\35 u\24\28xsmall\29 {
+
width: 41.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\34 u\28xsmall\29, .\34 u\24\28xsmall\29 {
+
width: 33.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\33 u\28xsmall\29, .\33 u\24\28xsmall\29 {
+
width: 25%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\32 u\28xsmall\29, .\32 u\24\28xsmall\29 {
+
width: 16.6666666667%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 u\28xsmall\29, .\31 u\24\28xsmall\29 {
+
width: 8.3333333333%;
+
clear: none;
+
margin-left: 0;
+
}
+
 
+
.\31 2u\24\28xsmall\29 + *,
+
.\31 1u\24\28xsmall\29 + *,
+
.\31 0u\24\28xsmall\29 + *,
+
.\39 u\24\28xsmall\29 + *,
+
.\38 u\24\28xsmall\29 + *,
+
.\37 u\24\28xsmall\29 + *,
+
.\36 u\24\28xsmall\29 + *,
+
.\35 u\24\28xsmall\29 + *,
+
.\34 u\24\28xsmall\29 + *,
+
.\33 u\24\28xsmall\29 + *,
+
.\32 u\24\28xsmall\29 + *,
+
.\31 u\24\28xsmall\29 + * {
+
clear: left;
+
}
+
 
+
.\-11u\28xsmall\29 {
+
margin-left: 91.66667%;
+
}
+
 
+
.\-10u\28xsmall\29 {
+
margin-left: 83.33333%;
+
}
+
 
+
.\-9u\28xsmall\29 {
+
margin-left: 75%;
+
}
+
 
+
.\-8u\28xsmall\29 {
+
margin-left: 66.66667%;
+
}
+
 
+
.\-7u\28xsmall\29 {
+
margin-left: 58.33333%;
+
}
+
 
+
.\-6u\28xsmall\29 {
+
margin-left: 50%;
+
}
+
 
+
.\-5u\28xsmall\29 {
+
margin-left: 41.66667%;
+
}
+
 
+
.\-4u\28xsmall\29 {
+
margin-left: 33.33333%;
+
}
+
 
+
.\-3u\28xsmall\29 {
+
margin-left: 25%;
+
}
+
 
+
.\-2u\28xsmall\29 {
+
margin-left: 16.66667%;
+
}
+
 
+
.\-1u\28xsmall\29 {
+
margin-left: 8.33333%;
+
}
+
 
+
}
+
 
+
/* Basic */
+
 
+
@-ms-viewport {
+
width: device-width;
+
}
+
 
+
body {
+
-ms-overflow-style: scrollbar;
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
html, body {
+
min-width: 320px;
+
}
+
 
+
}
+
 
+
body {
+
background: #fff;
+
}
+
 
+
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
+
-moz-animation: none !important;
+
-webkit-animation: none !important;
+
-ms-animation: none !important;
+
animation: none !important;
+
-moz-transition: none !important;
+
-webkit-transition: none !important;
+
-ms-transition: none !important;
+
transition: none !important;
+
}
+
 
+
/* Type */
+
 
+
body {
+
background-color: #fff;
+
color: #444;
+
}
+
 
+
body, input, select, textarea {
+
font-family: "Raleway", Arial, Helvetica, sans-serif;
+
font-size: 14pt;
+
font-weight: 300;
+
letter-spacing: 0.09em;
+
line-height: 1.65em;
+
}
+
 
+
@media screen and (max-width: 1680px) {
+
 
+
body, input, select, textarea {
+
font-size: 12pt;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
body, input, select, textarea {
+
font-size: 12pt;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
body, input, select, textarea {
+
font-size: 12pt;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
body, input, select, textarea {
+
font-size: 11pt;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
body, input, select, textarea {
+
font-size: 11pt;
+
}
+
 
+
}
+
 
+
a {
+
text-decoration: underline;
+
}
+
 
+
a:hover {
+
text-decoration: none;
+
}
+
 
+
strong, b {
+
font-weight: 700;
+
}
+
 
+
em, i {
+
font-style: italic;
+
}
+
 
+
p {
+
margin: 0 0 2em 0;
+
}
+
 
+
h1, h2, h3, h4, h5, h6 {
+
font-weight: 300;
+
line-height: 1em;
+
margin: 0 0 1em 0;
+
text-transform: uppercase;
+
}
+
 
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+
color: inherit;
+
text-decoration: none;
+
}
+
 
+
h2 {
+
font-size: 1.6em;
+
line-height: 1.5em;
+
}
+
 
+
h3 {
+
font-size: 1.2em;
+
line-height: 1.5em;
+
}
+
 
+
h4 {
+
font-size: 1em;
+
line-height: 1.5em;
+
}
+
 
+
h5 {
+
font-size: 0.9em;
+
line-height: 1.5em;
+
}
+
 
+
h6 {
+
font-size: 0.7em;
+
line-height: 1.5em;
+
}
+
 
+
sub {
+
font-size: 0.8em;
+
position: relative;
+
top: 0.5em;
+
}
+
 
+
sup {
+
font-size: 0.8em;
+
position: relative;
+
top: -0.5em;
+
}
+
 
+
blockquote {
+
border-left: solid 4px;
+
font-style: italic;
+
margin: 0 0 2em 0;
+
padding: 0.5em 0 0.5em 2em;
+
}
+
 
+
code {
+
border-radius: 0;
+
border: solid 1px;
+
font-family: "Courier New", monospace;
+
font-size: 0.9em;
+
margin: 0 0.25em;
+
padding: 0.25em 0.65em;
+
}
+
 
+
pre {
+
-webkit-overflow-scrolling: touch;
+
font-family: "Courier New", monospace;
+
font-size: 0.9em;
+
margin: 0 0 2em 0;
+
}
+
 
+
pre code {
+
display: block;
+
line-height: 1.75em;
+
padding: 1em 1.5em;
+
overflow-x: auto;
+
}
+
 
+
hr {
+
border: 0;
+
border-bottom: solid 1px;
+
margin: 2em 0;
+
}
+
 
+
hr.major {
+
margin: 3em 0;
+
}
+
 
+
.align-left {
+
text-align: left;
+
}
+
 
+
.align-center {
+
text-align: center;
+
}
+
 
+
.align-right {
+
text-align: right;
+
}
+
 
+
input, select, textarea {
+
color: #555;
+
}
+
 
+
a {
+
color: #00cdcf;
+
}
+
 
+
strong, b {
+
color: #555;
+
}
+
 
+
h1, h2, h3, h4, h5, h6 {
+
color: #555;
+
}
+
 
+
blockquote {
+
border-left-color: #e3e3e3;
+
}
+
 
+
code {
+
background: rgba(144, 144, 144, 0.075);
+
border-color: #e3e3e3;
+
}
+
 
+
hr {
+
border-bottom-color: #e3e3e3;
+
}
+
 
+
/* Box */
+
 
+
.box {
+
border-radius: 0;
+
border: solid 1px;
+
margin-bottom: 2em;
+
padding: 1.5em;
+
}
+
 
+
.box > :last-child,
+
.box > :last-child > :last-child,
+
.box > :last-child > :last-child > :last-child {
+
margin-bottom: 0;
+
}
+
 
+
.box.alt {
+
border: 0;
+
border-radius: 0;
+
padding: 0;
+
}
+
 
+
.box {
+
border-color: #e3e3e3;
+
}
+
 
+
/* Button */
+
 
+
input[type="submit"],
+
input[type="reset"],
+
input[type="button"],
+
button,
+
.button {
+
-moz-appearance: none;
+
-webkit-appearance: none;
+
-ms-appearance: none;
+
appearance: none;
+
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
border-radius: 0;
+
border: 0;
+
cursor: pointer;
+
display: inline-block;
+
height: 2.85em;
+
line-height: 2.95em;
+
padding: 0 1.5em;
+
text-align: center;
+
text-decoration: none;
+
text-transform: uppercase;
+
white-space: nowrap;
+
}
+
 
+
input[type="submit"].icon,
+
input[type="reset"].icon,
+
input[type="button"].icon,
+
button.icon,
+
.button.icon {
+
padding-left: 1.35em;
+
}
+
 
+
input[type="submit"].icon:before,
+
input[type="reset"].icon:before,
+
input[type="button"].icon:before,
+
button.icon:before,
+
.button.icon:before {
+
margin-right: 0.5em;
+
}
+
 
+
input[type="submit"].fit,
+
input[type="reset"].fit,
+
input[type="button"].fit,
+
button.fit,
+
.button.fit {
+
display: block;
+
margin: 0 0 1em 0;
+
width: 100%;
+
}
+
 
+
input[type="submit"].small,
+
input[type="reset"].small,
+
input[type="button"].small,
+
button.small,
+
.button.small {
+
font-size: 0.8em;
+
}
+
 
+
input[type="submit"].big,
+
input[type="reset"].big,
+
input[type="button"].big,
+
button.big,
+
.button.big {
+
font-size: 1.35em;
+
}
+
 
+
input[type="submit"].disabled, input[type="submit"]:disabled,
+
input[type="reset"].disabled,
+
input[type="reset"]:disabled,
+
input[type="button"].disabled,
+
input[type="button"]:disabled,
+
button.disabled,
+
button:disabled,
+
.button.disabled,
+
.button:disabled {
+
-moz-pointer-events: none;
+
-webkit-pointer-events: none;
+
-ms-pointer-events: none;
+
pointer-events: none;
+
opacity: 0.25;
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
input[type="submit"],
+
input[type="reset"],
+
input[type="button"],
+
button,
+
.button {
+
padding: 0;
+
}
+
 
+
}
+
 
+
input[type="submit"],
+
input[type="reset"],
+
input[type="button"],
+
button,
+
.button {
+
background-color: #f7f7f7;
+
color: #555 !important;
+
}
+
 
+
input[type="submit"]:hover,
+
input[type="reset"]:hover,
+
input[type="button"]:hover,
+
button:hover,
+
.button:hover {
+
background-color: white;
+
}
+
 
+
input[type="submit"]:active,
+
input[type="reset"]:active,
+
input[type="button"]:active,
+
button:active,
+
.button:active {
+
background-color: #eaeaea;
+
}
+
 
+
input[type="submit"].alt,
+
input[type="reset"].alt,
+
input[type="button"].alt,
+
button.alt,
+
.button.alt {
+
background-color: transparent;
+
box-shadow: inset 0 0 0 2px #e3e3e3;
+
color: #555 !important;
+
}
+
 
+
input[type="submit"].alt:hover,
+
input[type="reset"].alt:hover,
+
input[type="button"].alt:hover,
+
button.alt:hover,
+
.button.alt:hover {
+
background-color: rgba(144, 144, 144, 0.075);
+
}
+
 
+
input[type="submit"].alt:active,
+
input[type="reset"].alt:active,
+
input[type="button"].alt:active,
+
button.alt:active,
+
.button.alt:active {
+
background-color: rgba(144, 144, 144, 0.2);
+
}
+
 
+
input[type="submit"].alt.icon:before,
+
input[type="reset"].alt.icon:before,
+
input[type="button"].alt.icon:before,
+
button.alt.icon:before,
+
.button.alt.icon:before {
+
color: #bbb;
+
}
+
 
+
input[type="submit"].special,
+
input[type="reset"].special,
+
input[type="button"].special,
+
button.special,
+
.button.special {
+
background-color: #00cdcf;
+
color: #ffffff !important;
+
}
+
 
+
input[type="submit"].special:hover,
+
input[type="reset"].special:hover,
+
input[type="button"].special:hover,
+
button.special:hover,
+
.button.special:hover {
+
background-color: #00e6e9;
+
}
+
 
+
input[type="submit"].special:active,
+
input[type="reset"].special:active,
+
input[type="button"].special:active,
+
button.special:active,
+
.button.special:active {
+
background-color: #00b4b5;
+
}
+
 
+
/* Form */
+
 
+
form {
+
margin: 0 0 2em 0;
+
}
+
 
+
.grid-form {
+
display: -moz-flex;
+
display: -webkit-flex;
+
display: -ms-flex;
+
display: flex;
+
-moz-justify-content: space-between;
+
-webkit-justify-content: space-between;
+
-ms-justify-content: space-between;
+
justify-content: space-between;
+
-moz-flex-wrap: wrap;
+
-webkit-flex-wrap: wrap;
+
-ms-flex-wrap: wrap;
+
flex-wrap: wrap;
+
}
+
 
+
.grid-form .form-control {
+
width: 100%;
+
margin-bottom: 2em;
+
}
+
 
+
.grid-form .form-control.narrow {
+
width: 47%;
+
}
+
 
+
.grid-form .actions {
+
margin-bottom: 0;
+
width: 100%;
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.grid-form .form-control.narrow {
+
margin-bottom: 1em;
+
width: 100%;
+
}
+
 
+
}
+
 
+
label {
+
display: block;
+
font-size: 0.9em;
+
margin: 0 0 0.2em 0;
+
text-transform: uppercase;
+
}
+
 
+
input[type="text"],
+
input[type="password"],
+
input[type="email"],
+
select,
+
textarea {
+
-moz-appearance: none;
+
-webkit-appearance: none;
+
-ms-appearance: none;
+
appearance: none;
+
border-radius: 0;
+
border: none;
+
border: solid 1px;
+
color: inherit;
+
display: block;
+
outline: 0;
+
padding: 0 1em;
+
text-decoration: none;
+
width: 100%;
+
}
+
 
+
input[type="text"]:invalid,
+
input[type="password"]:invalid,
+
input[type="email"]:invalid,
+
select:invalid,
+
textarea:invalid {
+
box-shadow: none;
+
}
+
 
+
.select-wrapper {
+
text-decoration: none;
+
display: block;
+
position: relative;
+
}
+
 
+
.select-wrapper:before {
+
-moz-osx-font-smoothing: grayscale;
+
-webkit-font-smoothing: antialiased;
+
font-family: FontAwesome;
+
font-style: normal;
+
font-weight: normal;
+
text-transform: none !important;
+
}
+
 
+
.select-wrapper:before {
+
content: '\f078';
+
display: block;
+
height: 2.75em;
+
line-height: 2.75em;
+
pointer-events: none;
+
position: absolute;
+
right: 0;
+
text-align: center;
+
top: 0;
+
width: 2.75em;
+
}
+
 
+
.select-wrapper select::-ms-expand {
+
display: none;
+
}
+
 
+
input[type="text"],
+
input[type="password"],
+
input[type="email"],
+
select {
+
height: 2.75em;
+
}
+
 
+
textarea {
+
padding: 0.75em 1em;
+
}
+
 
+
input[type="checkbox"],
+
input[type="radio"] {
+
-moz-appearance: none;
+
-webkit-appearance: none;
+
-ms-appearance: none;
+
appearance: none;
+
display: block;
+
float: left;
+
margin-right: -2em;
+
opacity: 0;
+
width: 1em;
+
z-index: -1;
+
}
+
 
+
input[type="checkbox"] + label,
+
input[type="radio"] + label {
+
text-decoration: none;
+
cursor: pointer;
+
display: inline-block;
+
font-size: 1em;
+
font-weight: 300;
+
padding-left: 2.4em;
+
padding-right: 0.75em;
+
position: relative;
+
}
+
 
+
input[type="checkbox"] + label:before,
+
input[type="radio"] + label:before {
+
-moz-osx-font-smoothing: grayscale;
+
-webkit-font-smoothing: antialiased;
+
font-family: FontAwesome;
+
font-style: normal;
+
font-weight: normal;
+
text-transform: none !important;
+
}
+
 
+
input[type="checkbox"] + label:before,
+
input[type="radio"] + label:before {
+
border-radius: 0;
+
border: solid 1px;
+
content: '';
+
display: inline-block;
+
height: 1.65em;
+
left: 0;
+
line-height: 1.58125em;
+
position: absolute;
+
text-align: center;
+
top: 0;
+
width: 1.65em;
+
}
+
 
+
input[type="checkbox"]:checked + label:before,
+
input[type="radio"]:checked + label:before {
+
content: '\f00c';
+
}
+
 
+
input[type="checkbox"] + label:before {
+
border-radius: 0;
+
}
+
 
+
input[type="radio"] + label:before {
+
border-radius: 100%;
+
}
+
 
+
::-webkit-input-placeholder {
+
opacity: 1.0;
+
}
+
 
+
:-moz-placeholder {
+
opacity: 1.0;
+
}
+
 
+
::-moz-placeholder {
+
opacity: 1.0;
+
}
+
 
+
:-ms-input-placeholder {
+
opacity: 1.0;
+
}
+
 
+
.formerize-placeholder {
+
opacity: 1.0;
+
}
+
 
+
label {
+
color: #555;
+
}
+
 
+
input[type="text"],
+
input[type="password"],
+
input[type="email"],
+
select,
+
textarea {
+
background: rgba(144, 144, 144, 0.075);
+
border-color: #e3e3e3;
+
}
+
 
+
input[type="text"]:focus,
+
input[type="password"]:focus,
+
input[type="email"]:focus,
+
select:focus,
+
textarea:focus {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.select-wrapper:before {
+
color: #e3e3e3;
+
}
+
 
+
input[type="checkbox"] + label,
+
input[type="radio"] + label {
+
color: #444;
+
}
+
 
+
input[type="checkbox"] + label:before,
+
input[type="radio"] + label:before {
+
background: rgba(144, 144, 144, 0.075);
+
border-color: #e3e3e3;
+
}
+
 
+
input[type="checkbox"]:checked + label:before,
+
input[type="radio"]:checked + label:before {
+
background-color: #00cdcf;
+
border-color: #00cdcf;
+
color: #ffffff;
+
}
+
 
+
input[type="checkbox"]:focus + label:before,
+
input[type="radio"]:focus + label:before {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
::-webkit-input-placeholder {
+
color: #bbb !important;
+
}
+
 
+
:-moz-placeholder {
+
color: #bbb !important;
+
}
+
 
+
::-moz-placeholder {
+
color: #bbb !important;
+
}
+
 
+
:-ms-input-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.formerize-placeholder {
+
color: #bbb !important;
+
}
+
 
+
/* Icon */
+
 
+
.icon {
+
text-decoration: none;
+
border-bottom: none;
+
position: relative;
+
}
+
 
+
.icon:before {
+
-moz-osx-font-smoothing: grayscale;
+
-webkit-font-smoothing: antialiased;
+
font-family: FontAwesome;
+
font-style: normal;
+
font-weight: normal;
+
text-transform: none !important;
+
}
+
 
+
.icon > .label {
+
display: none;
+
}
+
 
+
/* Image */
+
 
+
.image {
+
border-radius: 0;
+
border: 0;
+
display: inline-block;
+
position: relative;
+
}
+
 
+
.image img {
+
border-radius: 0;
+
display: block;
+
}
+
 
+
.image.left, .image.right {
+
max-width: 40%;
+
}
+
 
+
.image.left img, .image.right img {
+
width: 100%;
+
}
+
 
+
.image.left {
+
float: left;
+
margin: 0 1.5em 1em 0;
+
top: 0.25em;
+
}
+
 
+
.image.right {
+
float: right;
+
margin: 0 0 1em 1.5em;
+
top: 0.25em;
+
}
+
 
+
.image.fit {
+
display: block;
+
margin: 0 0 2em 0;
+
width: 100%;
+
}
+
 
+
.image.fit img {
+
width: 100%;
+
}
+
 
+
.image.main {
+
display: block;
+
margin: 0 0 3em 0;
+
width: 100%;
+
}
+
 
+
.image.main img {
+
width: 100%;
+
}
+
 
+
/* List */
+
 
+
ol {
+
list-style: decimal;
+
margin: 0 0 2em 0;
+
padding-left: 1.25em;
+
}
+
 
+
ol li {
+
padding-left: 0.25em;
+
}
+
 
+
ul {
+
list-style: disc;
+
margin: 0 0 2em 0;
+
padding-left: 1em;
+
}
+
 
+
ul li {
+
padding-left: 0.5em;
+
}
+
 
+
ul.alt {
+
list-style: none;
+
padding-left: 0;
+
}
+
 
+
ul.alt li {
+
border-top: solid 1px;
+
padding: 0.5em 0;
+
}
+
 
+
ul.alt li:first-child {
+
border-top: 0;
+
padding-top: 0;
+
}
+
 
+
ul.icons {
+
cursor: default;
+
list-style: none;
+
padding-left: 0;
+
}
+
 
+
ul.icons li {
+
display: inline-block;
+
padding: 0 1em 0 0;
+
}
+
 
+
ul.icons li:last-child {
+
padding-right: 0;
+
}
+
 
+
ul.icons li .icon:before {
+
font-size: 2em;
+
}
+
 
+
ul.actions {
+
cursor: default;
+
list-style: none;
+
padding-left: 0;
+
}
+
 
+
ul.actions li {
+
display: inline-block;
+
padding: 0 1em 0 0;
+
vertical-align: middle;
+
}
+
 
+
ul.actions li:last-child {
+
padding-right: 0;
+
}
+
 
+
ul.actions.small li {
+
padding: 0 0.5em 0 0;
+
}
+
 
+
ul.actions.vertical li {
+
display: block;
+
padding: 1em 0 0 0;
+
}
+
 
+
ul.actions.vertical li:first-child {
+
padding-top: 0;
+
}
+
 
+
ul.actions.vertical li > * {
+
margin-bottom: 0;
+
}
+
 
+
ul.actions.vertical.small li {
+
padding: 0.5em 0 0 0;
+
}
+
 
+
ul.actions.vertical.small li:first-child {
+
padding-top: 0;
+
}
+
 
+
ul.actions.fit {
+
display: table;
+
margin-left: -1em;
+
padding: 0;
+
table-layout: fixed;
+
width: calc(100% + 1em);
+
}
+
 
+
ul.actions.fit li {
+
display: table-cell;
+
padding: 0 0 0 1em;
+
}
+
 
+
ul.actions.fit li > * {
+
margin-bottom: 0;
+
}
+
 
+
ul.actions.fit.small {
+
margin-left: -0.5em;
+
width: calc(100% + 0.5em);
+
}
+
 
+
ul.actions.fit.small li {
+
padding: 0 0 0 0.5em;
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
ul.actions {
+
margin: 0 0 2em 0;
+
}
+
 
+
ul.actions li {
+
padding: 1em 0 0 0;
+
display: block;
+
text-align: center;
+
width: 100%;
+
}
+
 
+
ul.actions li:first-child {
+
padding-top: 0;
+
}
+
 
+
ul.actions li > * {
+
width: 100%;
+
margin: 0 !important;
+
}
+
 
+
ul.actions li > *.icon:before {
+
margin-left: -2em;
+
}
+
 
+
ul.actions.small li {
+
padding: 0.5em 0 0 0;
+
}
+
 
+
ul.actions.small li:first-child {
+
padding-top: 0;
+
}
+
 
+
}
+
 
+
dl {
+
margin: 0 0 2em 0;
+
}
+
 
+
dl dt {
+
display: block;
+
font-weight: 700;
+
margin: 0 0 1em 0;
+
}
+
 
+
dl dd {
+
margin-left: 2em;
+
}
+
 
+
ul.alt li {
+
border-top-color: #e3e3e3;
+
}
+
 
+
/* Section/Article */
+
 
+
section.special, article.special, header.special {
+
text-align: center;
+
}
+
 
+
header {
+
margin-bottom: 1em;
+
}
+
 
+
header p {
+
position: relative;
+
margin: 0 0 1.5em 0;
+
text-transform: uppercase;
+
}
+
 
+
header h2, header h3 {
+
display: inline-block;
+
padding-bottom: 0.4em;
+
border-bottom-style: double;
+
border-bottom-width: 4px;
+
}
+
 
+
header h2 + p {
+
font-size: 1.25em;
+
margin-top: -0.5em;
+
line-height: 1.5em;
+
}
+
 
+
header h3 + p {
+
font-size: 1.1em;
+
line-height: 1.5em;
+
}
+
 
+
header h4 + p,
+
header h5 + p,
+
header h6 + p {
+
font-size: 0.9em;
+
line-height: 1.5em;
+
}
+
 
+
header.major {
+
margin-bottom: 4em;
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
header.major {
+
margin-bottom: 2em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
header.major {
+
margin-bottom: 1.5em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
header.major {
+
margin-bottom: 1em;
+
}
+
 
+
}
+
 
+
header h2, header h3 {
+
border-bottom-color: #e3e3e3;
+
}
+
 
+
header p {
+
color: #bbb;
+
}
+
 
+
/* Table */
+
 
+
.table-wrapper {
+
-webkit-overflow-scrolling: touch;
+
overflow-x: auto;
+
}
+
 
+
table {
+
margin: 0 0 2em 0;
+
width: 100%;
+
}
+
 
+
table tbody tr {
+
border: solid 1px;
+
border-left: 0;
+
border-right: 0;
+
}
+
 
+
table td {
+
padding: 0.75em 0.75em;
+
}
+
 
+
table th {
+
font-size: 0.9em;
+
font-weight: 700;
+
padding: 0 0.75em 0.75em 0.75em;
+
text-align: left;
+
}
+
 
+
table thead {
+
border-bottom: solid 2px;
+
}
+
 
+
table tfoot {
+
border-top: solid 2px;
+
}
+
 
+
table.alt {
+
border-collapse: separate;
+
}
+
 
+
table.alt tbody tr td {
+
border: solid 1px;
+
border-left-width: 0;
+
border-top-width: 0;
+
}
+
 
+
table.alt tbody tr td:first-child {
+
border-left-width: 1px;
+
}
+
 
+
table.alt tbody tr:first-child td {
+
border-top-width: 1px;
+
}
+
 
+
table.alt thead {
+
border-bottom: 0;
+
}
+
 
+
table.alt tfoot {
+
border-top: 0;
+
}
+
 
+
table tbody tr {
+
border-color: #e3e3e3;
+
}
+
 
+
table tbody tr:nth-child(2n + 1) {
+
background-color: rgba(144, 144, 144, 0.075);
+
}
+
 
+
table th {
+
color: #555;
+
}
+
 
+
table thead {
+
border-bottom-color: #e3e3e3;
+
}
+
 
+
table tfoot {
+
border-top-color: #e3e3e3;
+
}
+
 
+
table.alt tbody tr td {
+
border-color: #e3e3e3;
+
}
+
 
+
/* Feature */
+
 
+
.features {
+
display: -moz-flex;
+
display: -webkit-flex;
+
display: -ms-flex;
+
display: flex;
+
-moz-flex-wrap: wrap;
+
-webkit-flex-wrap: wrap;
+
-ms-flex-wrap: wrap;
+
flex-wrap: wrap;
+
-moz-justify-content: center;
+
-webkit-justify-content: center;
+
-ms-justify-content: center;
+
justify-content: center;
+
margin-bottom: 2em;
+
}
+
 
+
.feature {
+
padding: 2em 2em 0.1em 2em;
+
border-style: solid;
+
border-width: 1px;
+
margin-left: -1px;
+
margin-top: -1px;
+
width: 33.33333%;
+
}
+
 
+
.feature .fa {
+
font-size: 2.8em;
+
margin-bottom: 0.7em;
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
.feature {
+
padding: 2em 1.5em 0.1em 1.5em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.feature {
+
padding: 2em 1em 0.1em 1em;
+
width: 50%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
.feature {
+
padding: 2em 0.5em 0.1em 0.5em;
+
width: 100%;
+
}
+
 
+
}
+
 
+
.feature {
+
border-color: #e3e3e3;
+
}
+
 
+
.feature .fa {
+
color: #00cdcf;
+
}
+
 
+
/* Wrapper */
+
 
+
.wrapper {
+
padding: 6em 0 4em 0;
+
position: relative;
+
}
+
 
+
.wrapper > .inner {
+
margin: 0 auto;
+
width: 65em;
+
}
+
 
+
.wrapper > .inner.narrow {
+
width: 35em;
+
}
+
 
+
.wrapper.style1 {
+
background-color: #00cdcf;
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 input, .wrapper.style1 select, .wrapper.style1 textarea {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 a {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style1 strong, .wrapper.style1 b {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 blockquote {
+
border-left-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 code {
+
background: rgba(255, 255, 255, 0.075);
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 hr {
+
border-bottom-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 .box {
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 input[type="submit"],
+
.wrapper.style1 input[type="reset"],
+
.wrapper.style1 input[type="button"],
+
.wrapper.style1 button,
+
.wrapper.style1 .button {
+
background-color: #f7f7f7;
+
color: #555 !important;
+
}
+
 
+
.wrapper.style1 input[type="submit"]:hover,
+
.wrapper.style1 input[type="reset"]:hover,
+
.wrapper.style1 input[type="button"]:hover,
+
.wrapper.style1 button:hover,
+
.wrapper.style1 .button:hover {
+
background-color: white;
+
}
+
 
+
.wrapper.style1 input[type="submit"]:active,
+
.wrapper.style1 input[type="reset"]:active,
+
.wrapper.style1 input[type="button"]:active,
+
.wrapper.style1 button:active,
+
.wrapper.style1 .button:active {
+
background-color: #eaeaea;
+
}
+
 
+
.wrapper.style1 input[type="submit"].alt,
+
.wrapper.style1 input[type="reset"].alt,
+
.wrapper.style1 input[type="button"].alt,
+
.wrapper.style1 button.alt,
+
.wrapper.style1 .button.alt {
+
background-color: transparent;
+
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
+
color: #ffffff !important;
+
}
+
 
+
.wrapper.style1 input[type="submit"].alt:hover,
+
.wrapper.style1 input[type="reset"].alt:hover,
+
.wrapper.style1 input[type="button"].alt:hover,
+
.wrapper.style1 button.alt:hover,
+
.wrapper.style1 .button.alt:hover {
+
background-color: rgba(255, 255, 255, 0.075);
+
}
+
 
+
.wrapper.style1 input[type="submit"].alt:active,
+
.wrapper.style1 input[type="reset"].alt:active,
+
.wrapper.style1 input[type="button"].alt:active,
+
.wrapper.style1 button.alt:active,
+
.wrapper.style1 .button.alt:active {
+
background-color: rgba(255, 255, 255, 0.2);
+
}
+
 
+
.wrapper.style1 input[type="submit"].alt.icon:before,
+
.wrapper.style1 input[type="reset"].alt.icon:before,
+
.wrapper.style1 input[type="button"].alt.icon:before,
+
.wrapper.style1 button.alt.icon:before,
+
.wrapper.style1 .button.alt.icon:before {
+
color: #99ebeb;
+
}
+
 
+
.wrapper.style1 input[type="submit"].special,
+
.wrapper.style1 input[type="reset"].special,
+
.wrapper.style1 input[type="button"].special,
+
.wrapper.style1 button.special,
+
.wrapper.style1 .button.special {
+
background-color: #009a9c;
+
color: #fff !important;
+
}
+
 
+
.wrapper.style1 input[type="submit"].special:hover,
+
.wrapper.style1 input[type="reset"].special:hover,
+
.wrapper.style1 input[type="button"].special:hover,
+
.wrapper.style1 button.special:hover,
+
.wrapper.style1 .button.special:hover {
+
background-color: #00b4b5;
+
}
+
 
+
.wrapper.style1 input[type="submit"].special:active,
+
.wrapper.style1 input[type="reset"].special:active,
+
.wrapper.style1 input[type="button"].special:active,
+
.wrapper.style1 button.special:active,
+
.wrapper.style1 .button.special:active {
+
background-color: #008183;
+
}
+
 
+
.wrapper.style1 label {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 input[type="text"],
+
.wrapper.style1 input[type="password"],
+
.wrapper.style1 input[type="email"],
+
.wrapper.style1 select,
+
.wrapper.style1 textarea {
+
background: rgba(255, 255, 255, 0.075);
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 input[type="text"]:focus,
+
.wrapper.style1 input[type="password"]:focus,
+
.wrapper.style1 input[type="email"]:focus,
+
.wrapper.style1 select:focus,
+
.wrapper.style1 textarea:focus {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style1 .select-wrapper:before {
+
color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 input[type="checkbox"] + label,
+
.wrapper.style1 input[type="radio"] + label {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 input[type="checkbox"] + label:before,
+
.wrapper.style1 input[type="radio"] + label:before {
+
background: rgba(255, 255, 255, 0.075);
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 input[type="checkbox"]:checked + label:before,
+
.wrapper.style1 input[type="radio"]:checked + label:before {
+
background-color: #00cdcf;
+
border-color: #00cdcf;
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 input[type="checkbox"]:focus + label:before,
+
.wrapper.style1 input[type="radio"]:focus + label:before {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style1 ::-webkit-input-placeholder {
+
color: #99ebeb !important;
+
}
+
 
+
.wrapper.style1 :-moz-placeholder {
+
color: #99ebeb !important;
+
}
+
 
+
.wrapper.style1 ::-moz-placeholder {
+
color: #99ebeb !important;
+
}
+
 
+
.wrapper.style1 :-ms-input-placeholder {
+
color: #99ebeb !important;
+
}
+
 
+
.wrapper.style1 .formerize-placeholder {
+
color: #99ebeb !important;
+
}
+
 
+
.wrapper.style1 ul.alt li {
+
border-top-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 header h2, .wrapper.style1 header h3 {
+
border-bottom-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 header p {
+
color: #99ebeb;
+
}
+
 
+
.wrapper.style1 table tbody tr {
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 table tbody tr:nth-child(2n + 1) {
+
background-color: rgba(255, 255, 255, 0.075);
+
}
+
 
+
.wrapper.style1 table th {
+
color: #ffffff;
+
}
+
 
+
.wrapper.style1 table thead {
+
border-bottom-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 table tfoot {
+
border-top-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 table.alt tbody tr td {
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 .feature {
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
.wrapper.style1 .feature .fa {
+
color: #009a9c;
+
}
+
 
+
.wrapper.style2 {
+
background-color: #f7f7f7;
+
color: #444;
+
}
+
 
+
.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
+
color: #555;
+
}
+
 
+
.wrapper.style2 a {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style2 strong, .wrapper.style2 b {
+
color: #555;
+
}
+
 
+
.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
+
color: #555;
+
}
+
 
+
.wrapper.style2 blockquote {
+
border-left-color: #ddd;
+
}
+
 
+
.wrapper.style2 code {
+
background: #fff;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 hr {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style2 .box {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 input[type="submit"],
+
.wrapper.style2 input[type="reset"],
+
.wrapper.style2 input[type="button"],
+
.wrapper.style2 button,
+
.wrapper.style2 .button {
+
background-color: #555;
+
color: #f7f7f7 !important;
+
}
+
 
+
.wrapper.style2 input[type="submit"].alt,
+
.wrapper.style2 input[type="reset"].alt,
+
.wrapper.style2 input[type="button"].alt,
+
.wrapper.style2 button.alt,
+
.wrapper.style2 .button.alt {
+
background-color: transparent;
+
box-shadow: inset 0 0 0 2px #ddd;
+
color: #555 !important;
+
}
+
 
+
.wrapper.style2 input[type="submit"].alt:hover,
+
.wrapper.style2 input[type="reset"].alt:hover,
+
.wrapper.style2 input[type="button"].alt:hover,
+
.wrapper.style2 button.alt:hover,
+
.wrapper.style2 .button.alt:hover {
+
background-color: #fff;
+
}
+
 
+
.wrapper.style2 input[type="submit"].alt:active,
+
.wrapper.style2 input[type="reset"].alt:active,
+
.wrapper.style2 input[type="button"].alt:active,
+
.wrapper.style2 button.alt:active,
+
.wrapper.style2 .button.alt:active {
+
background-color: rgba(144, 144, 144, 0.2);
+
}
+
 
+
.wrapper.style2 input[type="submit"].alt.icon:before,
+
.wrapper.style2 input[type="reset"].alt.icon:before,
+
.wrapper.style2 input[type="button"].alt.icon:before,
+
.wrapper.style2 button.alt.icon:before,
+
.wrapper.style2 .button.alt.icon:before {
+
color: #bbb;
+
}
+
 
+
.wrapper.style2 input[type="submit"].special,
+
.wrapper.style2 input[type="reset"].special,
+
.wrapper.style2 input[type="button"].special,
+
.wrapper.style2 button.special,
+
.wrapper.style2 .button.special {
+
background-color: #00cdcf;
+
color: #ffffff !important;
+
}
+
 
+
.wrapper.style2 input[type="submit"].special:hover,
+
.wrapper.style2 input[type="reset"].special:hover,
+
.wrapper.style2 input[type="button"].special:hover,
+
.wrapper.style2 button.special:hover,
+
.wrapper.style2 .button.special:hover {
+
background-color: #00e6e9;
+
}
+
 
+
.wrapper.style2 input[type="submit"].special:active,
+
.wrapper.style2 input[type="reset"].special:active,
+
.wrapper.style2 input[type="button"].special:active,
+
.wrapper.style2 button.special:active,
+
.wrapper.style2 .button.special:active {
+
background-color: #00b4b5;
+
}
+
 
+
.wrapper.style2 label {
+
color: #555;
+
}
+
 
+
.wrapper.style2 input[type="text"],
+
.wrapper.style2 input[type="password"],
+
.wrapper.style2 input[type="email"],
+
.wrapper.style2 select,
+
.wrapper.style2 textarea {
+
background: #fff;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 input[type="text"]:focus,
+
.wrapper.style2 input[type="password"]:focus,
+
.wrapper.style2 input[type="email"]:focus,
+
.wrapper.style2 select:focus,
+
.wrapper.style2 textarea:focus {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style2 .select-wrapper:before {
+
color: #ddd;
+
}
+
 
+
.wrapper.style2 input[type="checkbox"] + label,
+
.wrapper.style2 input[type="radio"] + label {
+
color: #444;
+
}
+
 
+
.wrapper.style2 input[type="checkbox"] + label:before,
+
.wrapper.style2 input[type="radio"] + label:before {
+
background: #fff;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 input[type="checkbox"]:checked + label:before,
+
.wrapper.style2 input[type="radio"]:checked + label:before {
+
background-color: #00cdcf;
+
border-color: #00cdcf;
+
color: #ffffff;
+
}
+
 
+
.wrapper.style2 input[type="checkbox"]:focus + label:before,
+
.wrapper.style2 input[type="radio"]:focus + label:before {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style2 ::-webkit-input-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.wrapper.style2 :-moz-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.wrapper.style2 ::-moz-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.wrapper.style2 :-ms-input-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.wrapper.style2 .formerize-placeholder {
+
color: #bbb !important;
+
}
+
 
+
.wrapper.style2 ul.alt li {
+
border-top-color: #ddd;
+
}
+
 
+
.wrapper.style2 header h2, .wrapper.style2 header h3 {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style2 header p {
+
color: #bbb;
+
}
+
 
+
.wrapper.style2 table tbody tr {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 table tbody tr:nth-child(2n + 1) {
+
background-color: #fff;
+
}
+
 
+
.wrapper.style2 table th {
+
color: #555;
+
}
+
 
+
.wrapper.style2 table thead {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style2 table tfoot {
+
border-top-color: #ddd;
+
}
+
 
+
.wrapper.style2 table.alt tbody tr td {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 .feature {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style2 .feature .fa {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style3 {
+
background-color: #009a9c;
+
color: #ddd;
+
}
+
 
+
.wrapper.style3 input, .wrapper.style3 select, .wrapper.style3 textarea {
+
color: #fff;
+
}
+
 
+
.wrapper.style3 a {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style3 strong, .wrapper.style3 b {
+
color: #fff;
+
}
+
 
+
.wrapper.style3 h1, .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
+
color: #fff;
+
}
+
 
+
.wrapper.style3 blockquote {
+
border-left-color: #ddd;
+
}
+
 
+
.wrapper.style3 code {
+
background: #00b4b5;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 hr {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style3 .box {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 input[type="submit"],
+
.wrapper.style3 input[type="reset"],
+
.wrapper.style3 input[type="button"],
+
.wrapper.style3 button,
+
.wrapper.style3 .button {
+
background-color: #f7f7f7;
+
color: #555 !important;
+
}
+
 
+
.wrapper.style3 input[type="submit"]:hover,
+
.wrapper.style3 input[type="reset"]:hover,
+
.wrapper.style3 input[type="button"]:hover,
+
.wrapper.style3 button:hover,
+
.wrapper.style3 .button:hover {
+
background-color: white;
+
}
+
 
+
.wrapper.style3 input[type="submit"]:active,
+
.wrapper.style3 input[type="reset"]:active,
+
.wrapper.style3 input[type="button"]:active,
+
.wrapper.style3 button:active,
+
.wrapper.style3 .button:active {
+
background-color: #eaeaea;
+
}
+
 
+
.wrapper.style3 input[type="submit"].alt,
+
.wrapper.style3 input[type="reset"].alt,
+
.wrapper.style3 input[type="button"].alt,
+
.wrapper.style3 button.alt,
+
.wrapper.style3 .button.alt {
+
background-color: transparent;
+
box-shadow: inset 0 0 0 2px #ddd;
+
color: #fff !important;
+
}
+
 
+
.wrapper.style3 input[type="submit"].alt:hover,
+
.wrapper.style3 input[type="reset"].alt:hover,
+
.wrapper.style3 input[type="button"].alt:hover,
+
.wrapper.style3 button.alt:hover,
+
.wrapper.style3 .button.alt:hover {
+
background-color: #00b4b5;
+
}
+
 
+
.wrapper.style3 input[type="submit"].alt:active,
+
.wrapper.style3 input[type="reset"].alt:active,
+
.wrapper.style3 input[type="button"].alt:active,
+
.wrapper.style3 button.alt:active,
+
.wrapper.style3 .button.alt:active {
+
background-color: rgba(144, 144, 144, 0.2);
+
}
+
 
+
.wrapper.style3 input[type="submit"].alt.icon:before,
+
.wrapper.style3 input[type="reset"].alt.icon:before,
+
.wrapper.style3 input[type="button"].alt.icon:before,
+
.wrapper.style3 button.alt.icon:before,
+
.wrapper.style3 .button.alt.icon:before {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style3 input[type="submit"].special,
+
.wrapper.style3 input[type="reset"].special,
+
.wrapper.style3 input[type="button"].special,
+
.wrapper.style3 button.special,
+
.wrapper.style3 .button.special {
+
background-color: #00cdcf;
+
color: #ffffff !important;
+
}
+
 
+
.wrapper.style3 input[type="submit"].special:hover,
+
.wrapper.style3 input[type="reset"].special:hover,
+
.wrapper.style3 input[type="button"].special:hover,
+
.wrapper.style3 button.special:hover,
+
.wrapper.style3 .button.special:hover {
+
background-color: #00e6e9;
+
}
+
 
+
.wrapper.style3 input[type="submit"].special:active,
+
.wrapper.style3 input[type="reset"].special:active,
+
.wrapper.style3 input[type="button"].special:active,
+
.wrapper.style3 button.special:active,
+
.wrapper.style3 .button.special:active {
+
background-color: #00b4b5;
+
}
+
 
+
.wrapper.style3 label {
+
color: #fff;
+
}
+
 
+
.wrapper.style3 input[type="text"],
+
.wrapper.style3 input[type="password"],
+
.wrapper.style3 input[type="email"],
+
.wrapper.style3 select,
+
.wrapper.style3 textarea {
+
background: #00b4b5;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 input[type="text"]:focus,
+
.wrapper.style3 input[type="password"]:focus,
+
.wrapper.style3 input[type="email"]:focus,
+
.wrapper.style3 select:focus,
+
.wrapper.style3 textarea:focus {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style3 .select-wrapper:before {
+
color: #ddd;
+
}
+
 
+
.wrapper.style3 input[type="checkbox"] + label,
+
.wrapper.style3 input[type="radio"] + label {
+
color: #ddd;
+
}
+
 
+
.wrapper.style3 input[type="checkbox"] + label:before,
+
.wrapper.style3 input[type="radio"] + label:before {
+
background: #00b4b5;
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 input[type="checkbox"]:checked + label:before,
+
.wrapper.style3 input[type="radio"]:checked + label:before {
+
background-color: #00cdcf;
+
border-color: #00cdcf;
+
color: #ffffff;
+
}
+
 
+
.wrapper.style3 input[type="checkbox"]:focus + label:before,
+
.wrapper.style3 input[type="radio"]:focus + label:before {
+
border-color: #00cdcf;
+
box-shadow: 0 0 0 1px #00cdcf;
+
}
+
 
+
.wrapper.style3 ::-webkit-input-placeholder {
+
color: #00cdcf !important;
+
}
+
 
+
.wrapper.style3 :-moz-placeholder {
+
color: #00cdcf !important;
+
}
+
 
+
.wrapper.style3 ::-moz-placeholder {
+
color: #00cdcf !important;
+
}
+
 
+
.wrapper.style3 :-ms-input-placeholder {
+
color: #00cdcf !important;
+
}
+
 
+
.wrapper.style3 .formerize-placeholder {
+
color: #00cdcf !important;
+
}
+
 
+
.wrapper.style3 ul.alt li {
+
border-top-color: #ddd;
+
}
+
 
+
.wrapper.style3 header h2, .wrapper.style3 header h3 {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style3 header p {
+
color: #00cdcf;
+
}
+
 
+
.wrapper.style3 table tbody tr {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 table tbody tr:nth-child(2n + 1) {
+
background-color: #00b4b5;
+
}
+
 
+
.wrapper.style3 table th {
+
color: #fff;
+
}
+
 
+
.wrapper.style3 table thead {
+
border-bottom-color: #ddd;
+
}
+
 
+
.wrapper.style3 table tfoot {
+
border-top-color: #ddd;
+
}
+
 
+
.wrapper.style3 table.alt tbody tr td {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 .feature {
+
border-color: #ddd;
+
}
+
 
+
.wrapper.style3 .feature .fa {
+
color: #00cdcf;
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
.wrapper {
+
padding: 5em 0 3em 0;
+
}
+
 
+
.wrapper > .inner {
+
width: 60em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
.wrapper {
+
padding: 4em 2em 2em 2em;
+
}
+
 
+
.wrapper > .inner {
+
width: 100%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
.wrapper {
+
padding: 3em 1.5em 1em 1.5em;
+
}
+
 
+
.wrapper > .inner.narrow {
+
width: 80%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
.wrapper {
+
padding: 2em 1em 0.1em 1em;
+
}
+
 
+
.wrapper > .inner.narrow {
+
width: 100%;
+
}
+
 
+
}
+
 
+
/* Banner */
+
 
+
#banner {
+
background-color: #00cdcf;
+
color: #ffffff;
+
padding: 8em 0 6em 0;
+
text-align: center;
+
}
+
 
+
#banner input, #banner select, #banner textarea {
+
color: #ffffff;
+
}
+
 
+
#banner a {
+
color: #00cdcf;
+
}
+
 
+
#banner strong, #banner b {
+
color: #ffffff;
+
}
+
 
+
#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
+
color: #ffffff;
+
}
+
 
+
#banner blockquote {
+
border-left-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
#banner code {
+
background: rgba(255, 255, 255, 0.075);
+
border-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
#banner hr {
+
border-bottom-color: rgba(255, 255, 255, 0.25);
+
}
+
 
+
#banner input[type="submit"],
+
#banner input[type="reset"],
+
#banner input[type="button"],
+
#banner button,
+
#banner .button {
+
background-color: #f7f7f7;
+
color: #555 !important;
+
}
+
 
+
#banner input[type="submit"]:hover,
+
#banner input[type="reset"]:hover,
+
#banner input[type="button"]:hover,
+
#banner button:hover,
+
#banner .button:hover {
+
background-color: white;
+
}
+
 
+
#banner input[type="submit"]:active,
+
#banner input[type="reset"]:active,
+
#banner input[type="button"]:active,
+
#banner button:active,
+
#banner .button:active {
+
background-color: #eaeaea;
+
}
+
 
+
#banner input[type="submit"].alt,
+
#banner input[type="reset"].alt,
+
#banner input[type="button"].alt,
+
#banner button.alt,
+
#banner .button.alt {
+
background-color: transparent;
+
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
+
color: #ffffff !important;
+
}
+
 
+
#banner input[type="submit"].alt:hover,
+
#banner input[type="reset"].alt:hover,
+
#banner input[type="button"].alt:hover,
+
#banner button.alt:hover,
+
#banner .button.alt:hover {
+
background-color: rgba(255, 255, 255, 0.075);
+
}
+
 
+
#banner input[type="submit"].alt:active,
+
#banner input[type="reset"].alt:active,
+
#banner input[type="button"].alt:active,
+
#banner button.alt:active,
+
#banner .button.alt:active {
+
background-color: rgba(255, 255, 255, 0.2);
+
}
+
 
+
#banner input[type="submit"].alt.icon:before,
+
#banner input[type="reset"].alt.icon:before,
+
#banner input[type="button"].alt.icon:before,
+
#banner button.alt.icon:before,
+
#banner .button.alt.icon:before {
+
color: #99ebeb;
+
}
+
 
+
#banner input[type="submit"].special,
+
#banner input[type="reset"].special,
+
#banner input[type="button"].special,
+
#banner button.special,
+
#banner .button.special {
+
background-color: #009a9c;
+
color: #fff !important;
+
}
+
 
+
#banner input[type="submit"].special:hover,
+
#banner input[type="reset"].special:hover,
+
#banner input[type="button"].special:hover,
+
#banner button.special:hover,
+
#banner .button.special:hover {
+
background-color: #00b4b5;
+
}
+
 
+
#banner input[type="submit"].special:active,
+
#banner input[type="reset"].special:active,
+
#banner input[type="button"].special:active,
+
#banner button.special:active,
+
#banner .button.special:active {
+
background-color: #008183;
+
}
+
 
+
#banner h2 {
+
border-style: double solid;
+
border-width: 4px 1px;
+
font-size: 2.4em;
+
line-height: 1.35em;
+
margin: 0 auto 1em;
+
padding: 1.1em;
+
position: relative;
+
width: 40%;
+
}
+
 
+
#banner p {
+
font-size: 1.5em;
+
text-transform: uppercase;
+
}
+
 
+
@media screen and (max-width: 1680px) {
+
 
+
#banner {
+
padding: 8em 0 6em 0;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
#banner {
+
padding: 6em 0 4em 0;
+
}
+
 
+
#banner h2 {
+
width: 50%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
#banner {
+
padding: 4em 2em 2em 2em;
+
}
+
 
+
#banner h2 {
+
width: 75%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
#banner {
+
padding: 3em 1.5em 1em 1.5em;
+
}
+
 
+
#banner h2 {
+
font-size: 2em;
+
}
+
 
+
#banner p {
+
font-size: 1.25em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
#banner {
+
padding: 3em 1em 1em 1em;
+
}
+
 
+
#banner h2 {
+
font-size: 1.65em;
+
width: 100%;
+
}
+
 
+
}
+
 
+
/* Main */
+
 
+
#main {
+
padding: 4em 0 2em 0;
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
#main {
+
padding: 3em 0 1em 0;
+
}
+
 
+
}
+
 
+
/* Footer */
+
 
+
#footer {
+
background-color: #f7f7f7;
+
color: #444;
+
padding: 5em 0 4em 0;
+
position: relative;
+
}
+
 
+
#footer input, #footer select, #footer textarea {
+
color: #555;
+
}
+
 
+
#footer a {
+
color: #00cdcf;
+
}
+
 
+
#footer strong, #footer b {
+
color: #555;
+
}
+
 
+
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
+
color: #555;
+
}
+
 
+
#footer blockquote {
+
border-left-color: #ddd;
+
}
+
 
+
#footer code {
+
background: #fff;
+
border-color: #ddd;
+
}
+
 
+
#footer hr {
+
border-bottom-color: #ddd;
+
}
+
 
+
#footer:before {
+
background-color: #ddd;
+
content: '';
+
height: 1px;
+
left: 30%;
+
position: absolute;
+
top: 0;
+
width: 40%;
+
}
+
 
+
#footer .copyright {
+
color: #bbb;
+
font-size: 0.9em;
+
margin: 0 0 2em 0;
+
padding: 0;
+
text-align: center;
+
text-transform: uppercase;
+
}
+
 
+
#footer .copyright li {
+
border-left: solid 1px #e3e3e3;
+
display: inline-block;
+
list-style: none;
+
margin-left: 1.5em;
+
padding-left: 1.5em;
+
}
+
 
+
#footer .copyright li:first-child {
+
border-left: 0;
+
margin-left: 0;
+
padding-left: 0;
+
}
+
 
+
@media screen and (max-width: 1280px) {
+
 
+
#footer {
+
padding: 4em 2em 3em 2em;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 980px) {
+
 
+
#footer {
+
padding: 3em 2em 2em 2em;
+
}
+
 
+
#footer:before {
+
width: 75%;
+
left: 12.5%;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 736px) {
+
 
+
#footer {
+
padding: 3em 2em 1em 2em;
+
}
+
 
+
#footer:before {
+
width: 85%;
+
left: 7.5%;
+
}
+
 
+
#footer .copyright li {
+
display: block;
+
border-left: 0;
+
margin-left: 0;
+
padding-left: 0;
+
}
+
 
+
}
+
 
+
@media screen and (max-width: 480px) {
+
 
+
#footer {
+
padding: 2em 1em 0.1em 1em;
+
}
+
 
+
}
+
 
+
</style>
+
 
</html>
 
</html>

Latest revision as of 16:19, 19 October 2016

Stony Brook University


iGEM