Gilbert Pellegrom 11 years ago
parent
commit
b7189cd220
6 changed files with 255 additions and 87 deletions
  1. 25 24
      docs.html
  2. 17 16
      download.html
  3. 146 0
      hosting.html
  4. 15 14
      index.html
  5. 18 17
      plugins.html
  6. 34 16
      style.css

+ 25 - 24
docs.html

@@ -49,7 +49,7 @@
 </head>
 <body class="full-layout">
 <!-- Begin Body Wrapper -->
-<div class="body-wrapper"> 
+<div class="body-wrapper">
   <!-- Begin Top Wrapper -->
   <div class="top-wrapper">
     <header>
@@ -62,6 +62,7 @@
             <li class="active"><a href="docs.html">Docs</a></li>
             <li><a href="plugins.html">Plugins</a></li>
             <li><a href="download.html">Download</a></li>
+            <li><a href="hosting.html">Hosting</a></li>
           </ul>
         </nav>
         <!-- End Menu -->
@@ -69,14 +70,14 @@
       </div>
     </header>
   </div>
-  <!-- End Top Wrapper --> 
+  <!-- End Top Wrapper -->
   <!-- Begin Light Wrapper -->
-  <div class="light-wrapper"> 
-    
+  <div class="light-wrapper">
+
     <!-- Begin Inner -->
     <div class="inner">
       <h1 class="aligncenter">Pico Documentation</h1>
-      <p class="description aligncenter">Pico is a flat file CMS, this means there is no administration backend and database to deal with. 
+      <p class="description aligncenter">Pico is a flat file CMS, this means there is no administration backend and database to deal with.
       <br />You simply create .md files in the "content" folder and that becomes a page.</p>
       <br />
       <div class="one-fourth">
@@ -113,7 +114,7 @@
 	      <h3 id="creating-content">Creating Content</h3>
 	      <p>Pico is a flat file CMS, this means there is no administration backend and database to deal with. You simply create <code>.md</code> files in the "content"
 		  folder and that becomes a page.</p>
-		  <p>If you created folder within the content folder (e.g. <code>content/sub</code>) and put an <code>index.md</code> inside it, you can access that folder at the URL 
+		  <p>If you created folder within the content folder (e.g. <code>content/sub</code>) and put an <code>index.md</code> inside it, you can access that folder at the URL
 		  <code><a href="http://yousite.com/sub">http://yousite.com/sub</a></code>. If you want another page within the sub folder, simply create a text file with the corresponding name (e.g. <code>content/sub/page.md</code>)
 		  and will be able to access it from the URL <code><a href="http://yousite.com/sub/page">http://yousite.com/sub/page</a></code>.</p>
 		  <p>Below we've shown some examples of content locations and their corresponing URL's:</p>
@@ -147,10 +148,10 @@
 		  </table>
 		  <br />
 		  <p>If a file cannot be found, the file <code>content/404.md</code> will be shown.</p>
-		  
+
 		  <h4 id="text-file-markup">Text File Markup</h4>
-		  <p>Text files are marked up using <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a>. 
-		  They can also contain regular HTML. At the top of text files you can place a block comment and specify certain attributes of the page. 
+		  <p>Text files are marked up using <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a>.
+		  They can also contain regular HTML. At the top of text files you can place a block comment and specify certain attributes of the page.
 		  For example:</p>
 		  <pre><code>/*
 Title: Welcome
@@ -219,7 +220,7 @@ Template: index (allows you to use different templates in your theme)
 		  	<li>In your template do something like this:</li>
 		  </ul>
 		  <pre>{% if is_front_page %} &lt;!-- Front page lists all blog posts --&gt;
-		
+
 	&lt;div id=&quot;posts&quot;&gt;
 	{% for page in pages %}
 		{% if page.date %} &lt;!-- Note we check for Date field (posts) here --&gt;
@@ -244,9 +245,9 @@ Template: index (allows you to use different templates in your theme)
 		  <hr>
 	      <h3 id="plugins">Plugins</h3>
 	      <p><a href="plugins.html">Plugins</a> can be created by creating a new PHP file and placing it in the "plugins" folder. Plugins can be placed
-		  in a sub folder if required. In your new plugin PHP file you need to create class with the <strong>same name</strong> as 
+		  in a sub folder if required. In your new plugin PHP file you need to create class with the <strong>same name</strong> as
 		  the file. So if you create a file called <code>my_plugin.php</code> your class needs to be called <code>My_Plugin</code>.</p>
-		  
+
 		  <p>Plugins can hook into Pico by adding functions with predefined names (hooks) to their class. For example you could
 		  add a custom template variable by adding a <code>before_render</code> hook:</p>
 		  <pre>class My_Plugin {
@@ -301,12 +302,12 @@ Layout: 2col
       </div>
       <div class="clear"></div>
     </div>
-    <!-- End Inner --> 
+    <!-- End Inner -->
   </div>
-  <!-- End Light Wrapper --> 
-  
+  <!-- End Light Wrapper -->
+
   <!-- Begin Footer Wrapper -->
-  <footer class="aligncenter"> 
+  <footer class="aligncenter">
     <!-- Begin Inner -->
     <div class="inner">
       <h1>Want to Contribute?</h1>
@@ -317,23 +318,23 @@ Layout: 2col
         <li><a href="https://www.facebook.com/dev7studios"><i class="icon-s-facebook"></i></a></li>
       </ul>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </footer>
-  <!-- End Footer Wrapper --> 
-  
+  <!-- End Footer Wrapper -->
+
   <!-- Begin Sub Footer Wrapper -->
-  <div class="subfooter-wrapper"> 
+  <div class="subfooter-wrapper">
     <!-- Begin Inner -->
     <div class="inner">
       <p>Pico was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> from <a href="http://dev7studios.com">Dev7studios</a>.
       Released under the MIT license.</p>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </div>
-  <!-- End Sub Footer Wrapper --> 
-  
+  <!-- End Sub Footer Wrapper -->
+
 </div>
-<!-- End Body Wrapper --> 
+<!-- End Body Wrapper -->
 <script type="text/javascript" src="style/js/scripts.js"></script>
 </body>
 </html>

+ 17 - 16
download.html

@@ -49,7 +49,7 @@
 </head>
 <body class="full-layout">
 <!-- Begin Body Wrapper -->
-<div class="body-wrapper"> 
+<div class="body-wrapper">
   <!-- Begin Top Wrapper -->
   <div class="top-wrapper">
     <header>
@@ -62,6 +62,7 @@
             <li><a href="docs.html">Docs</a></li>
             <li><a href="plugins.html">Plugins</a></li>
             <li class="active"><a href="download.html">Download</a></li>
+            <li><a href="hosting.html">Hosting</a></li>
           </ul>
         </nav>
         <!-- End Menu -->
@@ -69,10 +70,10 @@
       </div>
     </header>
   </div>
-  <!-- End Top Wrapper --> 
+  <!-- End Top Wrapper -->
   <!-- Begin Light Wrapper -->
-  <div class="light-wrapper"> 
-    
+  <div class="light-wrapper">
+
     <!-- Begin Inner -->
     <div class="inner">
       <h1 class="aligncenter">Download Pico</h1>
@@ -82,12 +83,12 @@
       <h3>Changelog</h3>
       <p>See the <a href="https://github.com/gilbitron/Pico/blob/master/changelog.txt">full changelog</a>.</p>
     </div>
-    <!-- End Inner --> 
+    <!-- End Inner -->
   </div>
-  <!-- End Light Wrapper --> 
-  
+  <!-- End Light Wrapper -->
+
   <!-- Begin Footer Wrapper -->
-  <footer class="aligncenter"> 
+  <footer class="aligncenter">
     <!-- Begin Inner -->
     <div class="inner">
       <h1>Want to Contribute?</h1>
@@ -98,23 +99,23 @@
         <li><a href="https://www.facebook.com/dev7studios"><i class="icon-s-facebook"></i></a></li>
       </ul>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </footer>
-  <!-- End Footer Wrapper --> 
-  
+  <!-- End Footer Wrapper -->
+
   <!-- Begin Sub Footer Wrapper -->
-  <div class="subfooter-wrapper"> 
+  <div class="subfooter-wrapper">
     <!-- Begin Inner -->
     <div class="inner">
       <p>Pico was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> from <a href="http://dev7studios.com">Dev7studios</a>.
       Released under the MIT license.</p>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </div>
-  <!-- End Sub Footer Wrapper --> 
-  
+  <!-- End Sub Footer Wrapper -->
+
 </div>
-<!-- End Body Wrapper --> 
+<!-- End Body Wrapper -->
 <script type="text/javascript" src="style/js/scripts.js"></script>
 </body>
 </html>

+ 146 - 0
hosting.html

@@ -0,0 +1,146 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<title>Hosting | Pico</title>
+<!--link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" /-->
+<link rel="stylesheet" type="text/css" href="style.css" media="all" />
+<link rel="stylesheet" type="text/css" href="style/css/color/red.css" media="all" />
+<link rel="stylesheet" type="text/css" href="style/css/media-queries.css" media="all" />
+<link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
+<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
+<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" href="style/type/fontello.css">
+<!--[if IE 8]>
+<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
+<![endif]-->
+<!--[if IE 9]>
+<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
+<![endif]-->
+<!--[if lt IE 9]>
+<script src="style/js/html5.js" type="text/javascript"></script>
+<![endif]-->
+<script type="text/javascript" src="style/js/jquery.min.js"></script>
+<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
+<script type="text/javascript" src="style/js/jquery.isotope.min.js"></script>
+<script type="text/javascript" src="style/js/selectnav.js"></script>
+<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
+<script type="text/javascript" src="style/js/jquery.easytabs.min.js"></script>
+<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
+<script type="text/javascript" src="style/js/jquery.fancybox.pack.js"></script>
+<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
+<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
+<script type="text/javascript" src="style/js/jquery.themepunch.plugins.min.js"></script>
+<script type="text/javascript" src="style/js/jquery.themepunch.revolution.min.js"></script>
+<script type="text/javascript" src="style/js/jquery.touchcarousel-1.2.min.js"></script>
+<script type="text/javascript" src="style/js/twitter.min.js"></script>
+<script type="text/javascript" src="style/js/boostrapslider.js"></script>
+<script type="text/javascript">
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-3892196-38']);
+  _gaq.push(['_trackPageview']);
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+</head>
+<body class="full-layout">
+<!-- Begin Body Wrapper -->
+<div class="body-wrapper">
+  <!-- Begin Top Wrapper -->
+  <div class="top-wrapper">
+    <header>
+      <div class="inner">
+        <div class="logo"><a href="index.html"><img src="style/images/logo.png" alt="" /></a></div>
+        <!-- Begin Menu -->
+        <nav id="menu" class="menu">
+          <ul id="tiny">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="docs.html">Docs</a></li>
+            <li><a href="plugins.html">Plugins</a></li>
+            <li><a href="download.html">Download</a></li>
+            <li class="active"><a href="hosting.html">Hosting</a></li>
+          </ul>
+        </nav>
+        <!-- End Menu -->
+        <div class="clear"></div>
+      </div>
+    </header>
+  </div>
+  <!-- End Top Wrapper -->
+  <!-- Begin Light Wrapper -->
+  <div class="light-wrapper">
+
+    <!-- Begin Inner -->
+    <div class="inner">
+      <h1 class="aligncenter">Want us to host Pico for you?</h1>
+      <p class="description aligncenter">You don't have to worry about setting up your own server or installing and configuring Pico.
+      <br />Leave that complex stuff to us and get on with creating your site.</p>
+      <br />
+      <div class="two-third">
+        <p>We're working making Pico even easier to use, but we're not quite ready yet. So if you would be interested in using a hosted
+        platform for Pico then pop your email address into the form below and we'll let you know when we're ready.</p>
+        <form action="http://dev7studios.createsend.com/t/r/s/tjikukj/" method="post" class="form">
+          <label for="fieldEmail">Email</label><br />
+          <p><input id="fieldEmail" name="cm-tjikukj-tjikukj" type="email" class="text-input" required /></p>
+          <button type="submit" class="btn-submit">Notify Me</button>
+        </form>
+      </div>
+      <div class="one-third last">
+        <div class="pricing one">
+          <div class="plan">
+            <h3>From</h3>
+            <h4 class=""><span class="amount"><span>$</span>5</span><span class="interval">per month</span></h4>
+            <div class="features">
+              <ul>
+                <li>Let us manage all your hosting needs</li>
+                <li>Set up a Pico site without touching any code</li>
+                <li>Manage content files with our secure file manager</li>
+                <li>Upload custom themes</li>
+                <li>Premium support</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="clear"></div>
+    </div>
+    <!-- End Inner -->
+  </div>
+  <!-- End Light Wrapper -->
+
+  <!-- Begin Footer Wrapper -->
+  <footer class="aligncenter">
+    <!-- Begin Inner -->
+    <div class="inner">
+      <h1>Want to Contribute?</h1>
+      <p class="description">Help make Pico better by checking out the <a href="https://github.com/gilbitron/Pico">GitHub repository</a> and submitting pull requests.<br />
+      If you find a bug please report it on the <a href="https://github.com/gilbitron/Pico/issues">issues page</a>.</p>
+      <ul class="social">
+        <li><a href="https://twitter.com/dev7studioshq"><i class="icon-s-twitter"></i></a></li>
+        <li><a href="https://www.facebook.com/dev7studios"><i class="icon-s-facebook"></i></a></li>
+      </ul>
+    </div>
+    <!-- Begin Inner -->
+  </footer>
+  <!-- End Footer Wrapper -->
+
+  <!-- Begin Sub Footer Wrapper -->
+  <div class="subfooter-wrapper">
+    <!-- Begin Inner -->
+    <div class="inner">
+      <p>Pico was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> from <a href="http://dev7studios.com">Dev7studios</a>.
+      Released under the MIT license.</p>
+    </div>
+    <!-- Begin Inner -->
+  </div>
+  <!-- End Sub Footer Wrapper -->
+
+</div>
+<!-- End Body Wrapper -->
+<script type="text/javascript" src="style/js/scripts.js"></script>
+</body>
+</html>

+ 15 - 14
index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="full-layout">
 <!-- Begin Body Wrapper -->
-<div class="body-wrapper"> 
+<div class="body-wrapper">
   <!-- Begin Top Wrapper -->
   <div class="top-wrapper">
     <header>
@@ -64,6 +64,7 @@
             <li><a href="docs.html">Docs</a></li>
             <li><a href="plugins.html">Plugins</a></li>
             <li><a href="download.html">Download</a></li>
+            <li><a href="hosting.html">Hosting</a></li>
           </ul>
         </nav>
         <!-- End Menu -->
@@ -85,9 +86,9 @@
       </div>
     </div>
   </div>
-  <!-- End Top Wrapper --> 
+  <!-- End Top Wrapper -->
   <!-- Begin Dark Wrapper -->
-  <div class="dark-wrapper"> 
+  <div class="dark-wrapper">
     <!-- Begin Inner -->
     <div class="inner">
       <div class="box-wrapper">
@@ -120,12 +121,12 @@
         <div class="clear"></div>
       </div>
     </div>
-    <!-- End Inner --> 
+    <!-- End Inner -->
   </div>
   <!-- End Dark Wrapper -->
-  
+
   <!-- Begin Footer Wrapper -->
-  <footer class="aligncenter"> 
+  <footer class="aligncenter">
     <!-- Begin Inner -->
     <div class="inner">
       <h1>Want to Contribute?</h1>
@@ -136,23 +137,23 @@
         <li><a href="https://www.facebook.com/dev7studios"><i class="icon-s-facebook"></i></a></li>
       </ul>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </footer>
-  <!-- End Footer Wrapper --> 
-  
+  <!-- End Footer Wrapper -->
+
   <!-- Begin Sub Footer Wrapper -->
-  <div class="subfooter-wrapper"> 
+  <div class="subfooter-wrapper">
     <!-- Begin Inner -->
     <div class="inner">
       <p>Pico was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> from <a href="http://dev7studios.com">Dev7studios</a>.
       Released under the MIT license.</p>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </div>
-  <!-- End Sub Footer Wrapper --> 
-  
+  <!-- End Sub Footer Wrapper -->
+
 </div>
-<!-- End Body Wrapper --> 
+<!-- End Body Wrapper -->
 <script type="text/javascript" src="style/js/scripts.js"></script>
 </body>
 </html>

+ 18 - 17
plugins.html

@@ -49,7 +49,7 @@
 </head>
 <body class="full-layout">
 <!-- Begin Body Wrapper -->
-<div class="body-wrapper"> 
+<div class="body-wrapper">
   <!-- Begin Top Wrapper -->
   <div class="top-wrapper">
     <header>
@@ -62,6 +62,7 @@
             <li><a href="docs.html">Docs</a></li>
             <li class="active"><a href="plugins.html">Plugins</a></li>
             <li><a href="download.html">Download</a></li>
+            <li><a href="hosting.html">Hosting</a></li>
           </ul>
         </nav>
         <!-- End Menu -->
@@ -69,10 +70,10 @@
       </div>
     </header>
   </div>
-  <!-- End Top Wrapper --> 
+  <!-- End Top Wrapper -->
   <!-- Begin Light Wrapper -->
-  <div class="light-wrapper"> 
-    
+  <div class="light-wrapper">
+
     <!-- Begin Inner -->
     <div class="inner">
 		<h1 class="aligncenter">Pico Plugins</h1>
@@ -149,15 +150,15 @@
 		</div>
 		<div class="clear"></div>
 		<br />
-		<p class="aligncenter">Have you created a plugin for Pico? 
+		<p class="aligncenter">Have you created a plugin for Pico?
 		<a href="https://github.com/gilbitron/Pico/wiki/Pico-Plugins">Add it to the wiki</a> and we'll put it up here.</p>
     </div>
-    <!-- End Inner --> 
+    <!-- End Inner -->
   </div>
-  <!-- End Light Wrapper --> 
-  
+  <!-- End Light Wrapper -->
+
   <!-- Begin Footer Wrapper -->
-  <footer class="aligncenter"> 
+  <footer class="aligncenter">
     <!-- Begin Inner -->
     <div class="inner">
       <h1>Want to Contribute?</h1>
@@ -168,23 +169,23 @@
         <li><a href="https://www.facebook.com/dev7studios"><i class="icon-s-facebook"></i></a></li>
       </ul>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </footer>
-  <!-- End Footer Wrapper --> 
-  
+  <!-- End Footer Wrapper -->
+
   <!-- Begin Sub Footer Wrapper -->
-  <div class="subfooter-wrapper"> 
+  <div class="subfooter-wrapper">
     <!-- Begin Inner -->
     <div class="inner">
       <p>Pico was made by <a href="http://gilbert.pellegrom.me">Gilbert Pellegrom</a> from <a href="http://dev7studios.com">Dev7studios</a>.
       Released under the MIT license.</p>
     </div>
-    <!-- Begin Inner --> 
+    <!-- Begin Inner -->
   </div>
-  <!-- End Sub Footer Wrapper --> 
-  
+  <!-- End Sub Footer Wrapper -->
+
 </div>
-<!-- End Body Wrapper --> 
+<!-- End Body Wrapper -->
 <script type="text/javascript" src="style/js/scripts.js"></script>
 </body>
 </html>

+ 34 - 16
style.css

@@ -198,6 +198,7 @@ h2.post-title a:hover {
     color: #ff6760
 }
 a.button,
+.form .btn-submit,
 .forms fieldset .btn-submit,
 .comment-form .btn-submit,
 .filter li a,
@@ -256,6 +257,7 @@ a.button.gray,
 }
 a.button:hover,
 .filter li a:hover,
+.form .btn-submit:hover,
 .forms fieldset .btn-submit:hover,
 .comment-form .btn-submit:hover,
 .page-navi ul li a:hover,
@@ -587,7 +589,7 @@ p.description {
     background-size: 30px 28px;
     -webkit-appearance: none;
 }
-@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { 
+@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
 	.selectnav {
 	    background-image: url(style/images/dropdown-arrow@2x.png)
 	}
@@ -709,7 +711,7 @@ p.description {
     opacity: 1;
     color: #ff6760;
 }
-@-webkit-keyframes moveFromBottom { 
+@-webkit-keyframes moveFromBottom {
 	from {
 	    opacity: 0;
 	    -webkit-transform: translateY(200%);
@@ -719,7 +721,7 @@ p.description {
 	    -webkit-transform: translateY(0%);
 	}
 }
-@-moz-keyframes moveFromBottom { 
+@-moz-keyframes moveFromBottom {
 	from {
 	    opacity: 0;
 	    -moz-transform: translateY(200%);
@@ -729,7 +731,7 @@ p.description {
 	    -moz-transform: translateY(0%);
 	}
 }
-@-ms-keyframes moveFromBottom { 
+@-ms-keyframes moveFromBottom {
 	from {
 	    opacity: 0;
 	    -ms-transform: translateY(200%);
@@ -739,7 +741,7 @@ p.description {
 	    -ms-transform: translateY(0%);
 	}
 }
-@-webkit-keyframes moveFromTop { 
+@-webkit-keyframes moveFromTop {
 	from {
 	    opacity: 0;
 	    -webkit-transform: translateY(-200%);
@@ -749,7 +751,7 @@ p.description {
 	    -webkit-transform: translateY(0%);
 	}
 }
-@-moz-keyframes moveFromTop { 
+@-moz-keyframes moveFromTop {
 	from {
 	    opacity: 0;
 	    -moz-transform: translateY(-200%);
@@ -759,7 +761,7 @@ p.description {
 	    -moz-transform: translateY(0%);
 	}
 }
-@-ms-keyframes moveFromTop { 
+@-ms-keyframes moveFromTop {
 	from {
 	    opacity: 0;
 	    -ms-transform: translateY(-200%);
@@ -862,7 +864,7 @@ ul.contact-info li i {
     opacity: 0.8;
 }
 /* WEBKIT FIX */
-@media screen and (-webkit-min-device-pixel-ratio:0) { 
+@media screen and (-webkit-min-device-pixel-ratio:0) {
 	.social a i {
 	    padding-left: 0
 	}
@@ -1330,6 +1332,7 @@ ul.contact-info li i {
 /*-----------------------------------------------------------------------------------*/
 /*	FORMS
 /*-----------------------------------------------------------------------------------*/
+.form,
 .forms {
     position: relative;
     padding: 0;
@@ -1357,6 +1360,8 @@ ul.contact-info li i {
 .forms li.hidden-row {
     display: none
 }
+.form .text-input,
+.form .text-area,
 .forms fieldset .text-input,
 .forms fieldset .text-area,
 .searchform input,
@@ -1371,6 +1376,8 @@ ul.contact-info li i {
     color: #616161;
     resize: none;
 }
+.form .text-input:focus,
+.form .text-area:focus,
 .forms fieldset .text-input:focus,
 .forms fieldset .text-area:focus,
 .searchform input:focus,
@@ -1391,6 +1398,7 @@ ul.contact-info li i {
 .forms li.error textarea {
     border: 1px solid #d18282
 }
+.form input.btn-submit,
 .forms input.btn-submit {
     height: 35px;
     margin-top: -5px;
@@ -1973,7 +1981,7 @@ ul.retina-icons li span {
     font-size: 15px;
 }
 /* FIREFOX FIX */
-@-moz-document url-prefix() { 
+@-moz-document url-prefix() {
 	.tparrows:before {
 	    margin-top: 7px
 	}
@@ -2007,7 +2015,7 @@ ul.retina-icons li span {
     margin-left: 1px
 }
 /* FIREFOX FIX */
-@-moz-document url-prefix() { 
+@-moz-document url-prefix() {
 	.tparrows.tp-rightarrow:before {
 	    margin-left: 2px
 	}
@@ -2092,11 +2100,11 @@ media_tag_4 {media_subcode:4}
 }
 .fullwidth .carousel-wrapper {
 	width: 100%;
-} 
+}
 .carousel-wrapper.fullwidth {
 	margin-bottom: 30px;
 	overflow: hidden;
-} 
+}
 .touchcarousel {
     position: relative;
     width: 600px;
@@ -2149,7 +2157,7 @@ media_tag_4 {media_subcode:4}
 }
 .fullwidth .touch-carousel {
 	width: 100%;
-} 
+}
 .touch-carousel .touchcarousel-item {
     margin-right: 10px;
     width: 270px;
@@ -2333,7 +2341,7 @@ media_tag_4 {media_subcode:4}
 }
 .fancybox-close:before {
     content: '\e819'
-}	
+}
 #fancybox-loading {
 	margin-top: -12px !important;
 	margin-left: -12px !important;
@@ -2383,7 +2391,7 @@ media_tag_5 {media_subcode:5}
 .animate > span:after {
     display: none
 }
-@-webkit-keyframes move { 
+@-webkit-keyframes move {
 	0% {
 	    background-position: 0 0
 	}
@@ -2407,6 +2415,7 @@ media_tag_5 {media_subcode:5}
     clear: both;
     visibility: hidden;
 }
+.pricing .plan { border: 1px solid #e9e9e9; }
 .pricing.three .plan {
     width: 31.2%;
     float: left;
@@ -2543,7 +2552,7 @@ media_tag_5 {media_subcode:5}
     margin-bottom: 10px;
 }
 .box-layout .portfolio-detail-view,
-.box-layout .portfolio-detail-view-remove	{	
+.box-layout .portfolio-detail-view-remove	{
 	 width:1230px;
 }
 .portfolio-detail-view .closebutton,
@@ -2775,4 +2784,13 @@ media_tag_5 {media_subcode:5}
 	-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
 	-moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
 	box-shadow: 0 0 3px 0 rgba(0,0,0,0.17);
+}
+
+/*-----------------------------------------------------------------------------------*/
+/*  MISC
+/*-----------------------------------------------------------------------------------*/
+.hosted-price { font-size: 20px; }
+.hosted-price span {
+    font-size: 30px;
+    font-weight: bold;
 }