diff --git a/.gitignore b/.gitignore index 432ea75..4a1cc02 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store .sass-cache *.css.map +*.scssc \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d82581..07ff969 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +## Caramel 1.4 - 15 July, 2015 +#### New: +- Sass Compiler +- Added 'Clean' Style +- Added CSS Overrides + +#### Changed: +- Changed Default Font +- Changed Typography +- Adjusted Navigation, Button, Form, and Progress Bar Padding +- Fixed Whitespace + +--- + ## Caramel 1.3 — 18 April, 2015 #### New: - Fixed Navbar @@ -8,5 +22,3 @@ - Adjusted Core Colours - Adjusted Progress Bar Colours - Adjusted Button Padding - ---- diff --git a/LICENSE.md b/LICENSE.md old mode 100755 new mode 100644 diff --git a/README.md b/README.md old mode 100755 new mode 100644 index 3024b5a..fa92ce0 --- a/README.md +++ b/README.md @@ -7,44 +7,31 @@ Caramel is a simple, beautiful, modern website framework. Caramel is mobile comp - Clone the repo: ```git clone https://github.com/kurisubrooks/caramel.git``` ## Documentation -Need help? We've got you covered! Go on over to our [GitHub Wiki](https://github.com/kurisubrooks/caramel/wiki) page to take a look at Code Usage and Examples! +Need help? We've got you covered! Go on over to our [GitHub Wiki](https://github.com/kurisubrooks/caramel/wiki) page to take a look at Code Usage and Examples! Need further help? Pop into ```#caramel``` on ```irc.esper.net``` and state your question. We may take a while to answer your question (as we're not always available), so make sure to hang around until we're able to give you a reply! ## Modification -Modifying Caramel is easy with Sass, and our Compiling Script. Make your changes to Caramel, then run our Compiling Script to recompile your new code into CSS. +Modifying Caramel is easy with Sass, and our Compiling Script. Make your changes to Caramel, then run our Compiling Script to recompile your new code back into CSS. -**Please Note:** The Compiling Script only works on Linux and Mac OS X. Additionally, [Ruby](https://www.ruby-lang.org/) and [Sass Command Line](http://sass-lang.com/install) must be installed for our Compiling Script to work. +**Please Note:** Our Sass compiler runs on [Ruby](https://www.ruby-lang.org/), and requires [Sass Command Line](http://sass-lang.com/install) to be installed. Both must be installed for the Compiling Script to work. ### Syntax: - path/to/compile.sh path/to/caramel.scss - -### Errors: - - -bash: path/to/compile.sh: Permission denied -* Solution: `chmod +x path/to/compile.sh` +```ruby +ruby path/to/compile.rb path/to/caramel.scss +``` ## Compatibility -Caramel works on any browser that supports CSS3. Caramel is recommended for use on: +Caramel works on any browser that supports CSS3. Caramel has been tested, and is recommended for use on: -* Chrome 40 -* Firefox 36 -* Safari 8 +* Chrome 40+ +* Firefox 36+ +* Safari 8+ +* Microsoft Edge 20+ * IE 9, 10, 11 -## Team - - * [kurisubrooks](http://github.com/kurisubrooks) — CSS / Design - * [whoiskenjackson](http://github.com/whoiskenjackson) — CSS / Javascript - * [hedgehog1029](http://github.com/hedgehog1029) — Javascript - -### Contributions - * [gratimax](http://github.com/gratimax) — Grid System - * [penagwin](http://github.com/penagwin) — Javascript - * [toma678](http://github.com/toma678) — Sass Compiler - - ## Copyright / License -Copyright © 2014-2015 kurisubrooks // Code released under GPLv2 License. +Copyright © 2014-2015 kurisubrooks +Code released under GPLv2 License. diff --git a/dist/caramel-1.4.0.zip b/dist/caramel-1.4.0.zip new file mode 100644 index 0000000..d23f2bf Binary files /dev/null and b/dist/caramel-1.4.0.zip differ diff --git a/src/compile.rb b/src/compile.rb new file mode 100644 index 0000000..c393f40 --- /dev/null +++ b/src/compile.rb @@ -0,0 +1,43 @@ +# Caramel — Sass Compiling Script +# Created by toma678, kurisubrooks & joshhartigan + +puts ("[*] Caramel Sass Compiler") +puts ("[*] Syntax: 'ruby path/to/compile.rb path/to/caramel.scss'") +puts ("") + +file = ARGV[0] + +begin + if File.extname(file)==".scss" + + else + puts ("[!] ERROR: Incorrect File Format, must be .scss!") + abort ("[-] Usage: 'ruby path/to/compile.rb path/to/caramel.scss'") + end + + rescue TypeError + puts ("[!] ERROR: File Missing. You didn't include a file!") + puts ("[-] Please enter the file path:") + file = gets.chomp + puts ("") + if File.extname(file)==".scss" + + else + puts ("[!] ERROR: Incorrect File Format, must be .scss!") + puts ("[-] Make sure there's no space after 'file.scss'") + abort ("[-] Usage: 'ruby path/to/compile.rb path/to/caramel.scss'") + end + end + +out = file.split(".").first +sass1 = "sass --sourcemap=none --cache=/tmp/sass "+file.to_s+" "+out.to_s+".css" +sass2 = "sass --sourcemap=none --cache=/tmp/sass "+file.to_s+" "+out.to_s+".min.css --style compressed" + +puts ("[*] Compiling > .css") +system sass1 + +puts ("[*] Minifying > .min.css") +system sass2 + +puts ("[*] Done! Press Return to end the script.") +ending = gets \ No newline at end of file diff --git a/src/compile.sh b/src/compile.sh deleted file mode 100644 index 9066220..0000000 --- a/src/compile.sh +++ /dev/null @@ -1,23 +0,0 @@ -# Caramel Framework Compiler -# By Toma678 for kurisubrooks - -if [ -z "$1" ] -then - echo "[*] Syntax Error - Usage:" - echo "[*] Compile.sh input.scss" - exit -fi - -if [[ $1 != *.scss ]] -then - echo "[*] Incorrect File Type, Must be .SCSS" -else - F2=${1%%.*} - CMD1="sass --sourcemap=none --cache=none $1 $F2.css" - CMD2="sass --sourcemap=none --cache=none $1:$F2.min.css --style compressed" - echo "[*] Compiling..." - $CMD1 - echo "[*] Minifying..." - $CMD2 - echo "[*] Done!" -fi diff --git a/src/css/caramel.css b/src/css/caramel.css index 8f1820d..1803a2d 100644 --- a/src/css/caramel.css +++ b/src/css/caramel.css @@ -1,4 +1,4 @@ -/* +/* * Caramel (http://caramel.ga) * Copyright 2015, All Rights Reserved * GPL v2 License @@ -25,17 +25,9 @@ font-weight: 400; font-weight: normal; font-style: italic; } -/* OLD -$default: #5F5F5F; -$success: #5CB85C; -$error: #D9534F; -$warn: #F0AD4E; -$info: #52B7D6; -$dark: #525252; -$light: #FAFAFA; -*/ +/* $open-sans; */ body { - font-family: "Open Sans", sans-serif; + font-family: "Arial", "Helvetica", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; @@ -43,10 +35,6 @@ body { color: #5F5F5F; margin: 0; } -body.dark { - background-color: #525252; - color: #FAFAFA; } - .container, main { width: inherit; max-width: 1200px; @@ -114,6 +102,21 @@ table { left: 50%; min-width: 600px; } +*.no-round { + -webkit-border-radius: none; + -moz-border-radius: none; + -ms-border-radius: none; + border-radius: none; } + +*.no-margin { + margin: 0 !important; } + +*.no-border { + border: none !important; } + +*.border-thick { + border: 2px solid !important; } + .alert { display: block; vertical-align: middle; @@ -126,35 +129,59 @@ table { -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } + .alert.clean { + color: #5F5F5F; + border: 2px solid #5F5F5F; + background: transparent; } .alert.success { color: #FFF; border: 1px solid #4cae4c; background: #5CB85C; } + .alert.success.clean { + color: #4cae4c; + border: 2px solid #5F5F5F; + background: transparent; } .alert.error { color: #FFF; border: 1px solid #d83532; background: #DC4A47; } + .alert.error.clean { + color: #d83532; + border: 2px solid #5F5F5F; + background: transparent; } .alert.warn { color: #FFF; border: 1px solid #ee931c; background: #F09E34; } + .alert.warn.clean { + color: #ee931c; + border: 2px solid #5F5F5F; + background: transparent; } .alert.info { color: #FFF; border: 1px solid #3daed1; background: #52B7D6; } + .alert.info.clean { + color: #3daed1; + border: 2px solid #5F5F5F; + background: transparent; } .alert.dark { color: #FFF; border: 1px solid #454545; background: #525252; } + .alert.dark.clean { + color: #454545; + border: 2px solid #5F5F5F; + background: transparent; } .btn { font: inherit; - padding: 6px 14px; + padding: 5px 14px 4px; margin-bottom: 5px; vertical-align: middle; color: #5F5F5F; @@ -175,10 +202,20 @@ table { color: #5F5F5F; border: 1px solid #ededed; background: #ededed; } + .btn.clean { + color: #5F5F5F; + border: 2px solid #5F5F5F; + background: transparent; + font-weight: bold; } + .btn.clean.no-bold { + font-weight: normal; } + .btn.clean:hover, .btn.clean:active { + color: #464646; + border: 2px solid #464646; } .btn.sml { - padding: 4px 10px 3px; - font-size: 10px; } + padding: 2px 9px 0px; + font-size: 12px; } .dropdown { cursor: pointer; } @@ -190,6 +227,13 @@ table { .btn.success:hover, .btn.success:active { border: 1px solid #4cae4c; background: #63bb63; } + .btn.success.clean { + color: #4cae4c; + border: 2px solid #5CB85C; + background: transparent; } + .btn.success.clean:hover, .btn.success.clean:active { + color: #449d44; + border: 2px solid #449d44; } .btn.error { color: #FFF; @@ -198,6 +242,13 @@ table { .btn.error:hover, .btn.error:active { border: 1px solid #d83532; background: #de5250; } + .btn.error.clean { + color: #d83532; + border: 2px solid #DC4A47; + background: transparent; } + .btn.error.clean:hover, .btn.error.clean:active { + color: #ca2a26; + border: 2px solid #ca2a26; } .btn.warn { color: #FFF; @@ -206,6 +257,13 @@ table { .btn.warn:hover, .btn.warn:active { border: 1px solid #ee931c; background: #f1a33d; } + .btn.warn.clean { + color: #ee931c; + border: 2px solid #F09E34; + background: transparent; } + .btn.warn.clean:hover, .btn.warn.clean:active { + color: #e08611; + border: 2px solid #e08611; } .btn.info { color: #FFF; @@ -214,6 +272,13 @@ table { .btn.info:hover, .btn.info:active { border: 1px solid #3daed1; background: #5abad8; } + .btn.info.clean { + color: #3daed1; + border: 2px solid #52B7D6; + background: transparent; } + .btn.info.clean:hover, .btn.info.clean:active { + color: #2fa3c6; + border: 2px solid #2fa3c6; } .btn.dark { color: #FFF; @@ -222,6 +287,13 @@ table { .btn.dark:hover, .btn.dark:active { border: 1px solid #454545; background: #575757; } + .btn.dark.clean { + color: #454545; + border: 2px solid #525252; + background: transparent; } + .btn.dark.clean:hover, .btn.dark.clean:active { + color: #393939; + border: 2px solid #393939; } input { font: inherit; } @@ -239,7 +311,7 @@ input[type=week], textarea { min-width: 100px; margin: 0 5px 5px 0; - padding: 10px 15px; + padding: 5px 14px 4px; font: inherit; color: inherit; line-height: 1.42; @@ -400,6 +472,28 @@ img { display: table; } .nav:after { clear: both; } + .nav.no-round { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; } + +.nav input[type=text], +.nav input[type=email], +.nav input[type=password], +.nav input[type=search], +.nav input[type=url] { + margin: 2px; + padding: 0 15px; + height: 33px; } + @media (max-width: 800px) { + .nav input[type=text], + .nav input[type=email], + .nav input[type=password], + .nav input[type=search], + .nav input[type=url] { + margin: 5px 20px; + height: 35px; } } @media (max-width: 800px) { .nav.open li { @@ -446,7 +540,7 @@ img { .nav a { display: block; - padding: 10px 20px; + padding: 10px 18px 8px; color: #5F5F5F; white-space: nowrap; } .nav a:hover { @@ -525,6 +619,12 @@ img { border-top-left-radius: 4px; border-top-right-radius: 4px; } +.nav.btn.dropdown > ul.no-round { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; } + .nav.btn.dropdown a { text-align: left; } @@ -553,11 +653,12 @@ img { .nav .dropdown li { display: block; } -@media (max-width: 800px) { - .nav.dropdown li a, - .nav .dropdown li a { - padding-left: 40px; } } - +/* +.nav.dropdown li a, +.nav .dropdown li a { + @media (max-width: $breakpoint-width) { padding-left: 40px; } +} +*/ @media (max-width: 800px) { .nav.dropdown.open, .nav .dropdown.open, @@ -723,7 +824,7 @@ img { .progress { width: 100%; - height: 30px; + height: 20px; margin-bottom: 5px; background-color: #FFF; border: 1px solid #ededed; @@ -733,16 +834,18 @@ img { -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } + .progress.clean { + border: 2px solid #5F5F5F !important; } .progress-bar { text-align: center; - height: 30px; + height: 20px; color: #5F5F5F; background-color: #ededed; } #progress { position: relative; - top: 5px; } + top: 1px; } .progress.success { border: 1px solid #4cae4c; @@ -750,6 +853,8 @@ img { .progress.success .progress-bar { color: #FFF; background-color: #5CB85C; } + .progress.success.clean { + border: 2px solid #5CB85C !important; } .progress.error { border: 1px solid #d83532; @@ -757,6 +862,8 @@ img { .progress.error .progress-bar { color: #FFF; background-color: #DC4A47; } + .progress.error.clean { + border: 2px solid #DC4A47 !important; } .progress.warn { border: 1px solid #ee931c; @@ -764,6 +871,8 @@ img { .progress.warn .progress-bar { color: #FFF; background-color: #F09E34; } + .progress.warn.clean { + border: 2px solid #F09E34 !important; } .progress.info { border: 1px solid #3daed1; @@ -771,6 +880,8 @@ img { .progress.info .progress-bar { color: #FFF; background-color: #52B7D6; } + .progress.info.clean { + border: 2px solid #52B7D6 !important; } .progress.dark { border: 1px solid #454545; @@ -778,33 +889,41 @@ img { .progress.dark .progress-bar { color: #FFF; background-color: #525252; } + .progress.dark.clean { + border: 2px solid #525252 !important; } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; } h1 { - font-size: 36px; + font-size: 68px; + font-weight: 300; margin: 16px 0; } h2 { - font-size: 30px; + font-size: 50px; + font-weight: 300; margin: 12px 0; } h3 { - font-size: 24px; + font-size: 40px; + font-weight: 300; margin: 10px 0; } h4 { - font-size: 18px; + font-size: 30px; + font-weight: 400; margin: 8px 0; } h5 { - font-size: 14px; + font-size: 25px; + font-weight: 400; margin: 6px 0; } h6 { - font-size: 12px; + font-size: 18px; + font-weight: 500; margin: 4px 0; } a { @@ -814,6 +933,13 @@ a { color: #67c0db; text-decoration: none; } +blockquote { + border-left: 4px solid #EEE; + padding: 5px 30px; + font-weight: 300; + font-size: 18px; + margin: 10px 0; } + .disabled { color: #c7c7c7; cursor: not-allowed; } diff --git a/src/css/caramel.min.css b/src/css/caramel.min.css index 51c1f6b..91af205 100644 --- a/src/css/caramel.min.css +++ b/src/css/caramel.min.css @@ -1 +1 @@ -@font-face{font-family:"Open Sans";src:url("../fonts/opensans_regular/OpenSans-Regular-webfont.eot");src:url("../fonts/opensans_regular/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.woff") format("woff"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.ttf") format("truetype"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");font-weight:400;font-weight:normal;font-style:normal}@font-face{font-family:"Open Sans";src:url("../fonts/opensans_bold/OpenSans-Bold-webfont.eot");src:url("../fonts/opensans_bold/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.woff") format("woff"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.ttf") format("truetype"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");font-weight:600;font-weight:bold;font-style:normal}@font-face{font-family:"Open Sans";src:url("../fonts/opensans_italic/OpenSans-Italic-webfont.eot");src:url("../fonts/opensans_italic/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.woff") format("woff"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.ttf") format("truetype"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");font-weight:400;font-weight:normal;font-style:italic}body{font-family:"Open Sans",sans-serif;font-size:14px;font-weight:400;line-height:1.4;background-color:#FFF;color:#5F5F5F;margin:0}body.dark{background-color:#525252;color:#FAFAFA}.container,main{width:inherit;max-width:1200px;margin:0 auto;padding:0 35px}@media (max-width: 800px){.container,main{padding:0 10px}}.footer,footer{margin:15px 0;padding:5px 0}.hidden{display:none}.left{float:left}.right{float:right}hr{margin:20px 0;border:0;border-top:1px solid #ededed}table{border-spacing:0;border-collapse:collapse}table td,table th{padding:0}.dismiss{float:right;position:relative;right:0;cursor:pointer}.center{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);transform:translate(-50%, -50%);position:absolute;text-align:center;top:50%;left:50%;min-width:600px}@media (max-width: 800px){.center{-webkit-transform:none;-moz-transform:none;transform:none;position:inherit;top:inherit;left:inherit}}.center--noquery{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);transform:translate(-50%, -50%);position:absolute;text-align:center;top:50%;left:50%;min-width:600px}.alert{display:block;vertical-align:middle;padding:20px;margin-bottom:10px;color:#5F5F5F;border:1px solid #ededed;background:#FAFAFA;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.alert.success{color:#FFF;border:1px solid #4cae4c;background:#5CB85C}.alert.error{color:#FFF;border:1px solid #d83532;background:#DC4A47}.alert.warn{color:#FFF;border:1px solid #ee931c;background:#F09E34}.alert.info{color:#FFF;border:1px solid #3daed1;background:#52B7D6}.alert.dark{color:#FFF;border:1px solid #454545;background:#525252}.btn{font:inherit;padding:6px 14px;margin-bottom:5px;vertical-align:middle;color:#5F5F5F;line-height:1.42;text-align:center;border:1px solid #ededed;background:#FAFAFA;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.btn:hover,.btn:active{color:#5F5F5F;border:1px solid #ededed;background:#ededed}.btn.sml{padding:4px 10px 3px;font-size:10px}.dropdown{cursor:pointer}.btn.success{color:#FFF;border:1px solid #4cae4c;background:#5CB85C}.btn.success:hover,.btn.success:active{border:1px solid #4cae4c;background:#63bb63}.btn.error{color:#FFF;border:1px solid #d83532;background:#DC4A47}.btn.error:hover,.btn.error:active{border:1px solid #d83532;background:#de5250}.btn.warn{color:#FFF;border:1px solid #ee931c;background:#F09E34}.btn.warn:hover,.btn.warn:active{border:1px solid #ee931c;background:#f1a33d}.btn.info{color:#FFF;border:1px solid #3daed1;background:#52B7D6}.btn.info:hover,.btn.info:active{border:1px solid #3daed1;background:#5abad8}.btn.dark{color:#FFF;border:1px solid #454545;background:#525252}.btn.dark:hover,.btn.dark:active{border:1px solid #454545;background:#575757}input{font:inherit}input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{min-width:100px;margin:0 5px 5px 0;padding:10px 15px;font:inherit;color:inherit;line-height:1.42;vertical-align:middle;border:1px solid #ededed;background:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}input[type=submit]{border:none}textarea{min-height:20px}input.success{border:1px solid #5CB85C}input.error{border:1px solid #DC4A47}input.warn{border:1px solid #F09E34}input.info{border:1px solid #52B7D6}input.dark{border:1px solid #525252}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.box{float:left;margin-left:1.25%;margin-right:1.25%}@media (max-width: 800px){.box{width:100% !important;margin-left:auto;margin-right:auto;margin-bottom:5px;display:block;float:none}}.box.col-1{width:5.83333%}.box.col-2{width:14.16667%}.box.col-3{width:22.5%}.box.col-4{width:30.83333%}.box.col-5{width:39.16667%}.box.col-6{width:47.5%}.box.col-7{width:55.83333%}.box.col-8{width:64.16667%}.box.col-9{width:72.5%}.box.col-10{width:80.83333%}.box.col-11{width:89.16667%}.box.col-12{width:97.5%}img{margin:0}.thumbnail{height:auto;padding:4px;line-height:1.42;border:1px solid #ededed;background-color:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.round{-webkit-border-radius:10%;-moz-border-radius:10%;-ms-border-radius:10%;border-radius:10%}.circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%}.label{width:auto;padding:5px 10px;color:#FFF;font-size:80%;background-color:#6c6c6c;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.label.success{background-color:#5CB85C}.label.error{background-color:#DC4A47}.label.warn{background-color:#F09E34}.label.info{background-color:#52B7D6}.label.dark{background-color:#525252}.nav{background:#FAFAFA;border:1px solid #ededed;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.nav:before,.nav:after{content:" ";display:table}.nav:after{clear:both}@media (max-width: 800px){.nav.open li{display:block}}.nav .collapse{display:none}@media (max-width: 800px){.nav .collapse{display:block}}.nav ul{margin:0;padding:0;list-style:none}@media (max-width: 800px){.nav ul.right{float:none}}.nav ul.right ul{right:0}.nav li{position:relative;vertical-align:top;float:left}@media (max-width: 800px){.nav li{display:none;float:none}}.nav li.right{float:right}@media (max-width: 800px){.nav li.right{float:none}}.nav li>ul{background:#FAFAFA;border:1px solid #ededed}.nav li li,.nav.btn li li{float:none}.nav a{display:block;padding:10px 20px;color:#5F5F5F;white-space:nowrap}.nav a:hover{background:#ededed}.nav a:hover,.nav a:focus{color:#5F5F5F}.pag{width:auto;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}@media (max-width: 800px){.pag li{display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}}.breadcrumbs{padding:10px 20px}.breadcrumbs a{padding:0;color:#52B7D6;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.breadcrumbs a:hover,.breadcrumbs a:focus{color:#52B7D6;background:none}.nav.btn{position:relative;padding:0;border:none;background:none}.nav.btn .btn{outline:0}.nav.btn li{float:none}@media (max-width: 800px){.nav.btn.dropdown.open{display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}}@media (max-width: 800px){.nav.btn.dropdown.open>ul{position:absolute}}.nav.btn.dropdown:hover>ul{display:none}.nav.btn.dropdown.open>ul,.nav.btn.dropdown.open:hover>ul{display:block}.nav.btn.dropdown>ul{margin-top:-4px;background:#FAFAFA;border:1px solid #ededed;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;-ms-border-top-left-radius:4px;-ms-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.nav.btn.dropdown a{text-align:left}.nav.dropdown>ul,.nav .dropdown>ul{display:none;position:absolute;min-width:150px;z-index:2;border-top:none;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;-ms-border-bottom-left-radius:4px;-ms-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}@media (max-width: 800px){.nav.dropdown>ul,.nav .dropdown>ul{position:relative;max-width:100%}}.nav.dropdown li,.nav .dropdown li{display:block}@media (max-width: 800px){.nav.dropdown li a,.nav .dropdown li a{padding-left:40px}}@media (max-width: 800px){.nav.dropdown.open,.nav .dropdown.open,.nav.dropdown.open:hover>ul,.nav .dropdown.open:hover>ul{display:block;border-bottom:none}}.nav.dropdown:hover>ul,.nav .dropdown:hover>ul{display:block}@media (max-width: 800px){.nav.dropdown:hover>ul,.nav .dropdown:hover>ul{display:none}}.nav.dropdown .fa-angle-down,.nav .dropdown .fa-angle-down{padding-left:10px}@media (max-width: 800px){.nav.dropdown .fa-angle-down,.nav .dropdown .fa-angle-down{float:right}}.dark{background:#525252;border:1px solid #454545}.dark li>ul{background:#525252;border:1px solid #454545}.dark a{color:#FFF}.dark a:hover,.dark a:focus{color:#FFF}.dark a:hover{background:#454545}.header .fixed{position:fixed;top:0;width:100%;z-index:5}.header .nav{background:#FFF;border:none;border-bottom:1px solid #ededed;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0}.header .nav li>ul{background:#FFF;border:1px solid #f2f2f2}.header .nav li a:hover{background:#f2f2f2}@media (max-width: 800px){.header .nav li.open li.logo{display:none}}.notice{display:block;margin-bottom:10px;padding:20px;font-size:16px;vertical-align:middle;border:1px solid #ededed;border-left-width:5px;border-left-color:#5F5F5F;background-color:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.notice b,.notice strong,.notice h4{color:#5F5F5F}.notice h4{margin-top:0}.notice.success{border-left-color:#5CB85C}.notice.success b,.notice.success strong,.notice.success h4{color:#4cae4c}.notice.error{border-left-color:#DC4A47}.notice.error b,.notice.error strong,.notice.error h4{color:#d83532}.notice.warn{border-left-color:#F09E34}.notice.warn b,.notice.warn strong,.notice.warn h4{color:#ee931c}.notice.info{border-left-color:#52B7D6}.notice.info b,.notice.info strong,.notice.info h4{color:#3daed1}.notice.dark{border-left-color:#525252}.notice.dark b,.notice.dark strong,.notice.dark h4{color:#454545}.panel{margin:10px 0;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;border:1px solid #e1e1e1;overflow:hidden}.panel-head{padding:10px 20px;border-bottom:1px solid #e1e1e1;background:#ededed;font-weight:bold}.panel-body{padding:15px 20px;background:#FFF}.panel.success{border:1px solid #4cae4c}.panel.success .panel-head{color:#FFF;background:#5CB85C;border-bottom:1px solid #4cae4c}.panel.error{border:1px solid #d83532}.panel.error .panel-head{color:#FFF;background:#DC4A47;border-bottom:1px solid #d83532}.panel.warn{border:1px solid #ee931c}.panel.warn .panel-head{color:#FFF;background:#F09E34;border-bottom:1px solid #ee931c}.panel.info{border:1px solid #3daed1}.panel.info .panel-head{color:#FFF;background:#52B7D6;border-bottom:1px solid #3daed1}.panel.dark{border:1px solid #454545}.panel.dark .panel-head{color:#FFF;background:#525252;border-bottom:1px solid #454545}.progress{width:100%;height:30px;margin-bottom:5px;background-color:#FFF;border:1px solid #ededed;display:block;overflow:hidden;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.progress-bar{text-align:center;height:30px;color:#5F5F5F;background-color:#ededed}#progress{position:relative;top:5px}.progress.success{border:1px solid #4cae4c;background-color:#FFF}.progress.success .progress-bar{color:#FFF;background-color:#5CB85C}.progress.error{border:1px solid #d83532;background-color:#FFF}.progress.error .progress-bar{color:#FFF;background-color:#DC4A47}.progress.warn{border:1px solid #ee931c;background-color:#FFF}.progress.warn .progress-bar{color:#FFF;background-color:#F09E34}.progress.info{border:1px solid #3daed1;background-color:#FFF}.progress.info .progress-bar{color:#FFF;background-color:#52B7D6}.progress.dark{border:1px solid #454545;background-color:#FFF}.progress.dark .progress-bar{color:#FFF;background-color:#525252}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.1}h1{font-size:36px;margin:16px 0}h2{font-size:30px;margin:12px 0}h3{font-size:24px;margin:10px 0}h4{font-size:18px;margin:8px 0}h5{font-size:14px;margin:6px 0}h6{font-size:12px;margin:4px 0}a{color:#52B7D6;text-decoration:none}a:hover,a:focus{color:#67c0db;text-decoration:none}.disabled{color:#c7c7c7;cursor:not-allowed}.color.success,[color=success]{color:#5CB85C}.color.error,[color=error]{color:#DC4A47}.color.info,[color=info]{color:#52B7D6}.color.warn,[color=warn]{color:#F09E34}.color.dark,[color=dark]{color:#525252}.color.light,[color=light]{color:#FAFAFA}b,strong{font-weight:bold}.code{width:auto;padding:10px;font-family:"Anonymous Pro",Monospace;color:#5F5F5F;border:1px solid #ededed;background-color:#FAFAFA;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}code,highlight,.highlight{padding:5px;font-family:"Anonymous Pro",Monospace;color:#DC4A47;background-color:#fdf3f2;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}em,.italic{font-style:italic}p{margin:0 0 5px}.sml,small{font-size:80%}s,.strike{text-decoration:line-through}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline} +@font-face{font-family:"Open Sans";src:url("../fonts/opensans_regular/OpenSans-Regular-webfont.eot");src:url("../fonts/opensans_regular/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.woff") format("woff"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.ttf") format("truetype"),url("../fonts/opensans_regular/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");font-weight:400;font-weight:normal;font-style:normal}@font-face{font-family:"Open Sans";src:url("../fonts/opensans_bold/OpenSans-Bold-webfont.eot");src:url("../fonts/opensans_bold/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.woff") format("woff"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.ttf") format("truetype"),url("../fonts/opensans_bold/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");font-weight:600;font-weight:bold;font-style:normal}@font-face{font-family:"Open Sans";src:url("../fonts/opensans_italic/OpenSans-Italic-webfont.eot");src:url("../fonts/opensans_italic/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.woff") format("woff"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.ttf") format("truetype"),url("../fonts/opensans_italic/OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");font-weight:400;font-weight:normal;font-style:italic}body{font-family:"Arial","Helvetica",sans-serif;font-size:14px;font-weight:400;line-height:1.4;background-color:#FFF;color:#5F5F5F;margin:0}.container,main{width:inherit;max-width:1200px;margin:0 auto;padding:0 35px}@media (max-width: 800px){.container,main{padding:0 10px}}.footer,footer{margin:15px 0;padding:5px 0}.hidden{display:none}.left{float:left}.right{float:right}hr{margin:20px 0;border:0;border-top:1px solid #ededed}table{border-spacing:0;border-collapse:collapse}table td,table th{padding:0}.dismiss{float:right;position:relative;right:0;cursor:pointer}.center{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);transform:translate(-50%, -50%);position:absolute;text-align:center;top:50%;left:50%;min-width:600px}@media (max-width: 800px){.center{-webkit-transform:none;-moz-transform:none;transform:none;position:inherit;top:inherit;left:inherit}}.center--noquery{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);transform:translate(-50%, -50%);position:absolute;text-align:center;top:50%;left:50%;min-width:600px}*.no-round{-webkit-border-radius:none;-moz-border-radius:none;-ms-border-radius:none;border-radius:none}*.no-margin{margin:0 !important}*.no-border{border:none !important}*.border-thick{border:2px solid !important}.alert{display:block;vertical-align:middle;padding:20px;margin-bottom:10px;color:#5F5F5F;border:1px solid #ededed;background:#FAFAFA;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.alert.clean{color:#5F5F5F;border:2px solid #5F5F5F;background:transparent}.alert.success{color:#FFF;border:1px solid #4cae4c;background:#5CB85C}.alert.success.clean{color:#4cae4c;border:2px solid #5F5F5F;background:transparent}.alert.error{color:#FFF;border:1px solid #d83532;background:#DC4A47}.alert.error.clean{color:#d83532;border:2px solid #5F5F5F;background:transparent}.alert.warn{color:#FFF;border:1px solid #ee931c;background:#F09E34}.alert.warn.clean{color:#ee931c;border:2px solid #5F5F5F;background:transparent}.alert.info{color:#FFF;border:1px solid #3daed1;background:#52B7D6}.alert.info.clean{color:#3daed1;border:2px solid #5F5F5F;background:transparent}.alert.dark{color:#FFF;border:1px solid #454545;background:#525252}.alert.dark.clean{color:#454545;border:2px solid #5F5F5F;background:transparent}.btn{font:inherit;padding:5px 14px 4px;margin-bottom:5px;vertical-align:middle;color:#5F5F5F;line-height:1.42;text-align:center;border:1px solid #ededed;background:#FAFAFA;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.btn:hover,.btn:active{color:#5F5F5F;border:1px solid #ededed;background:#ededed}.btn.clean{color:#5F5F5F;border:2px solid #5F5F5F;background:transparent;font-weight:bold}.btn.clean.no-bold{font-weight:normal}.btn.clean:hover,.btn.clean:active{color:#464646;border:2px solid #464646}.btn.sml{padding:2px 9px 0px;font-size:12px}.dropdown{cursor:pointer}.btn.success{color:#FFF;border:1px solid #4cae4c;background:#5CB85C}.btn.success:hover,.btn.success:active{border:1px solid #4cae4c;background:#63bb63}.btn.success.clean{color:#4cae4c;border:2px solid #5CB85C;background:transparent}.btn.success.clean:hover,.btn.success.clean:active{color:#449d44;border:2px solid #449d44}.btn.error{color:#FFF;border:1px solid #d83532;background:#DC4A47}.btn.error:hover,.btn.error:active{border:1px solid #d83532;background:#de5250}.btn.error.clean{color:#d83532;border:2px solid #DC4A47;background:transparent}.btn.error.clean:hover,.btn.error.clean:active{color:#ca2a26;border:2px solid #ca2a26}.btn.warn{color:#FFF;border:1px solid #ee931c;background:#F09E34}.btn.warn:hover,.btn.warn:active{border:1px solid #ee931c;background:#f1a33d}.btn.warn.clean{color:#ee931c;border:2px solid #F09E34;background:transparent}.btn.warn.clean:hover,.btn.warn.clean:active{color:#e08611;border:2px solid #e08611}.btn.info{color:#FFF;border:1px solid #3daed1;background:#52B7D6}.btn.info:hover,.btn.info:active{border:1px solid #3daed1;background:#5abad8}.btn.info.clean{color:#3daed1;border:2px solid #52B7D6;background:transparent}.btn.info.clean:hover,.btn.info.clean:active{color:#2fa3c6;border:2px solid #2fa3c6}.btn.dark{color:#FFF;border:1px solid #454545;background:#525252}.btn.dark:hover,.btn.dark:active{border:1px solid #454545;background:#575757}.btn.dark.clean{color:#454545;border:2px solid #525252;background:transparent}.btn.dark.clean:hover,.btn.dark.clean:active{color:#393939;border:2px solid #393939}input{font:inherit}input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{min-width:100px;margin:0 5px 5px 0;padding:5px 14px 4px;font:inherit;color:inherit;line-height:1.42;vertical-align:middle;border:1px solid #ededed;background:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}input[type=submit]{border:none}textarea{min-height:20px}input.success{border:1px solid #5CB85C}input.error{border:1px solid #DC4A47}input.warn{border:1px solid #F09E34}input.info{border:1px solid #52B7D6}input.dark{border:1px solid #525252}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.box{float:left;margin-left:1.25%;margin-right:1.25%}@media (max-width: 800px){.box{width:100% !important;margin-left:auto;margin-right:auto;margin-bottom:5px;display:block;float:none}}.box.col-1{width:5.83333%}.box.col-2{width:14.16667%}.box.col-3{width:22.5%}.box.col-4{width:30.83333%}.box.col-5{width:39.16667%}.box.col-6{width:47.5%}.box.col-7{width:55.83333%}.box.col-8{width:64.16667%}.box.col-9{width:72.5%}.box.col-10{width:80.83333%}.box.col-11{width:89.16667%}.box.col-12{width:97.5%}img{margin:0}.thumbnail{height:auto;padding:4px;line-height:1.42;border:1px solid #ededed;background-color:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.round{-webkit-border-radius:10%;-moz-border-radius:10%;-ms-border-radius:10%;border-radius:10%}.circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%}.label{width:auto;padding:5px 10px;color:#FFF;font-size:80%;background-color:#6c6c6c;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.label.success{background-color:#5CB85C}.label.error{background-color:#DC4A47}.label.warn{background-color:#F09E34}.label.info{background-color:#52B7D6}.label.dark{background-color:#525252}.nav{background:#FAFAFA;border:1px solid #ededed;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.nav:before,.nav:after{content:" ";display:table}.nav:after{clear:both}.nav.no-round{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.nav input[type=text],.nav input[type=email],.nav input[type=password],.nav input[type=search],.nav input[type=url]{margin:2px;padding:0 15px;height:33px}@media (max-width: 800px){.nav input[type=text],.nav input[type=email],.nav input[type=password],.nav input[type=search],.nav input[type=url]{margin:5px 20px;height:35px}}@media (max-width: 800px){.nav.open li{display:block}}.nav .collapse{display:none}@media (max-width: 800px){.nav .collapse{display:block}}.nav ul{margin:0;padding:0;list-style:none}@media (max-width: 800px){.nav ul.right{float:none}}.nav ul.right ul{right:0}.nav li{position:relative;vertical-align:top;float:left}@media (max-width: 800px){.nav li{display:none;float:none}}.nav li.right{float:right}@media (max-width: 800px){.nav li.right{float:none}}.nav li>ul{background:#FAFAFA;border:1px solid #ededed}.nav li li,.nav.btn li li{float:none}.nav a{display:block;padding:10px 18px 8px;color:#5F5F5F;white-space:nowrap}.nav a:hover{background:#ededed}.nav a:hover,.nav a:focus{color:#5F5F5F}.pag{width:auto;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}@media (max-width: 800px){.pag li{display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}}.breadcrumbs{padding:10px 20px}.breadcrumbs a{padding:0;color:#52B7D6;display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}.breadcrumbs a:hover,.breadcrumbs a:focus{color:#52B7D6;background:none}.nav.btn{position:relative;padding:0;border:none;background:none}.nav.btn .btn{outline:0}.nav.btn li{float:none}@media (max-width: 800px){.nav.btn.dropdown.open{display:-moz-inline-stack;display:inline-block;*zoom:1;*display:inline}}@media (max-width: 800px){.nav.btn.dropdown.open>ul{position:absolute}}.nav.btn.dropdown:hover>ul{display:none}.nav.btn.dropdown.open>ul,.nav.btn.dropdown.open:hover>ul{display:block}.nav.btn.dropdown>ul{margin-top:-4px;background:#FAFAFA;border:1px solid #ededed;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;-ms-border-top-left-radius:4px;-ms-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px}.nav.btn.dropdown>ul.no-round{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.nav.btn.dropdown a{text-align:left}.nav.dropdown>ul,.nav .dropdown>ul{display:none;position:absolute;min-width:150px;z-index:2;border-top:none;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;-ms-border-bottom-left-radius:4px;-ms-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}@media (max-width: 800px){.nav.dropdown>ul,.nav .dropdown>ul{position:relative;max-width:100%}}.nav.dropdown li,.nav .dropdown li{display:block}@media (max-width: 800px){.nav.dropdown.open,.nav .dropdown.open,.nav.dropdown.open:hover>ul,.nav .dropdown.open:hover>ul{display:block;border-bottom:none}}.nav.dropdown:hover>ul,.nav .dropdown:hover>ul{display:block}@media (max-width: 800px){.nav.dropdown:hover>ul,.nav .dropdown:hover>ul{display:none}}.nav.dropdown .fa-angle-down,.nav .dropdown .fa-angle-down{padding-left:10px}@media (max-width: 800px){.nav.dropdown .fa-angle-down,.nav .dropdown .fa-angle-down{float:right}}.dark{background:#525252;border:1px solid #454545}.dark li>ul{background:#525252;border:1px solid #454545}.dark a{color:#FFF}.dark a:hover,.dark a:focus{color:#FFF}.dark a:hover{background:#454545}.header .fixed{position:fixed;top:0;width:100%;z-index:5}.header .nav{background:#FFF;border:none;border-bottom:1px solid #ededed;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0}.header .nav li>ul{background:#FFF;border:1px solid #f2f2f2}.header .nav li a:hover{background:#f2f2f2}@media (max-width: 800px){.header .nav li.open li.logo{display:none}}.notice{display:block;margin-bottom:10px;padding:20px;font-size:16px;vertical-align:middle;border:1px solid #ededed;border-left-width:5px;border-left-color:#5F5F5F;background-color:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.notice b,.notice strong,.notice h4{color:#5F5F5F}.notice h4{margin-top:0}.notice.success{border-left-color:#5CB85C}.notice.success b,.notice.success strong,.notice.success h4{color:#4cae4c}.notice.error{border-left-color:#DC4A47}.notice.error b,.notice.error strong,.notice.error h4{color:#d83532}.notice.warn{border-left-color:#F09E34}.notice.warn b,.notice.warn strong,.notice.warn h4{color:#ee931c}.notice.info{border-left-color:#52B7D6}.notice.info b,.notice.info strong,.notice.info h4{color:#3daed1}.notice.dark{border-left-color:#525252}.notice.dark b,.notice.dark strong,.notice.dark h4{color:#454545}.panel{margin:10px 0;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;border:1px solid #e1e1e1;overflow:hidden}.panel-head{padding:10px 20px;border-bottom:1px solid #e1e1e1;background:#ededed;font-weight:bold}.panel-body{padding:15px 20px;background:#FFF}.panel.success{border:1px solid #4cae4c}.panel.success .panel-head{color:#FFF;background:#5CB85C;border-bottom:1px solid #4cae4c}.panel.error{border:1px solid #d83532}.panel.error .panel-head{color:#FFF;background:#DC4A47;border-bottom:1px solid #d83532}.panel.warn{border:1px solid #ee931c}.panel.warn .panel-head{color:#FFF;background:#F09E34;border-bottom:1px solid #ee931c}.panel.info{border:1px solid #3daed1}.panel.info .panel-head{color:#FFF;background:#52B7D6;border-bottom:1px solid #3daed1}.panel.dark{border:1px solid #454545}.panel.dark .panel-head{color:#FFF;background:#525252;border-bottom:1px solid #454545}.progress{width:100%;height:20px;margin-bottom:5px;background-color:#FFF;border:1px solid #ededed;display:block;overflow:hidden;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.progress.clean{border:2px solid #5F5F5F !important}.progress-bar{text-align:center;height:20px;color:#5F5F5F;background-color:#ededed}#progress{position:relative;top:1px}.progress.success{border:1px solid #4cae4c;background-color:#FFF}.progress.success .progress-bar{color:#FFF;background-color:#5CB85C}.progress.success.clean{border:2px solid #5CB85C !important}.progress.error{border:1px solid #d83532;background-color:#FFF}.progress.error .progress-bar{color:#FFF;background-color:#DC4A47}.progress.error.clean{border:2px solid #DC4A47 !important}.progress.warn{border:1px solid #ee931c;background-color:#FFF}.progress.warn .progress-bar{color:#FFF;background-color:#F09E34}.progress.warn.clean{border:2px solid #F09E34 !important}.progress.info{border:1px solid #3daed1;background-color:#FFF}.progress.info .progress-bar{color:#FFF;background-color:#52B7D6}.progress.info.clean{border:2px solid #52B7D6 !important}.progress.dark{border:1px solid #454545;background-color:#FFF}.progress.dark .progress-bar{color:#FFF;background-color:#525252}.progress.dark.clean{border:2px solid #525252 !important}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.1}h1{font-size:68px;font-weight:300;margin:16px 0}h2{font-size:50px;font-weight:300;margin:12px 0}h3{font-size:40px;font-weight:300;margin:10px 0}h4{font-size:30px;font-weight:400;margin:8px 0}h5{font-size:25px;font-weight:400;margin:6px 0}h6{font-size:18px;font-weight:500;margin:4px 0}a{color:#52B7D6;text-decoration:none}a:hover,a:focus{color:#67c0db;text-decoration:none}blockquote{border-left:4px solid #EEE;padding:5px 30px;font-weight:300;font-size:18px;margin:10px 0}.disabled{color:#c7c7c7;cursor:not-allowed}.color.success,[color=success]{color:#5CB85C}.color.error,[color=error]{color:#DC4A47}.color.info,[color=info]{color:#52B7D6}.color.warn,[color=warn]{color:#F09E34}.color.dark,[color=dark]{color:#525252}.color.light,[color=light]{color:#FAFAFA}b,strong{font-weight:bold}.code{width:auto;padding:10px;font-family:"Anonymous Pro",Monospace;color:#5F5F5F;border:1px solid #ededed;background-color:#FAFAFA;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}code,highlight,.highlight{padding:5px;font-family:"Anonymous Pro",Monospace;color:#DC4A47;background-color:#fdf3f2;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}em,.italic{font-style:italic}p{margin:0 0 5px}.sml,small{font-size:80%}s,.strike{text-decoration:line-through}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline} diff --git a/src/css/caramel.scss b/src/css/caramel.scss index 104fe3b..f10e3ef 100644 --- a/src/css/caramel.scss +++ b/src/css/caramel.scss @@ -1,4 +1,4 @@ -/* +/* * Caramel (http://caramel.ga) * Copyright 2015, All Rights Reserved * GPL v2 License diff --git a/src/css/includes/_alert.scss b/src/css/includes/_alert.scss index de1bfa3..252366a 100644 --- a/src/css/includes/_alert.scss +++ b/src/css/includes/_alert.scss @@ -6,8 +6,14 @@ color: $default; border: 1px solid darken($light, 5); background: $light; - + @include border-radius(); + + &.clean { + color: $default; + border: 2px solid $default; + background: transparent; + } } @each $state, $color-map in $-states-map { @@ -19,5 +25,11 @@ color: $color; border: 1px solid darken($color-state, 5); background: $color-state; + + &.clean { + color: darken($color-state, 5); + border: 2px solid $default; + background: transparent; + } } -} \ No newline at end of file +} diff --git a/src/css/includes/_base.scss b/src/css/includes/_base.scss index 4aeb392..9d09adc 100644 --- a/src/css/includes/_base.scss +++ b/src/css/includes/_base.scss @@ -8,11 +8,6 @@ body { margin: 0; } -body.dark { - background-color: $dark; - color: $light; -} - .container, main { width: inherit; max-width: 1200px; @@ -44,7 +39,7 @@ hr { table { border-spacing: 0; border-collapse: collapse; - + td, th { padding: 0; } @@ -65,7 +60,7 @@ table { text-align: center; top: 50%; left: 50%; - + min-width: 600px; } @@ -88,6 +83,22 @@ table { text-align: center; top: 50%; left: 50%; - + min-width: 600px; -} \ No newline at end of file +} + +*.no-round { + @include border-radius(none); +} + +*.no-margin { + margin: 0 !important; +} + +*.no-border { + border: none !important; +} + +*.border-thick { + border: 2px solid !important; +} diff --git a/src/css/includes/_button.scss b/src/css/includes/_button.scss index fe8e0ef..8b02024 100644 --- a/src/css/includes/_button.scss +++ b/src/css/includes/_button.scss @@ -1,6 +1,6 @@ .btn { font: inherit; - padding: 6px 14px; + padding: 5px 14px 4px; margin-bottom: 5px; vertical-align: middle; color: $default; @@ -9,21 +9,38 @@ border: 1px solid darken($light, 5); background: $light; cursor: pointer; - + @include border-radius(); @include inline-block(); - + &:hover, &:active { color: $default; border: 1px solid darken($light, 5); background: darken($light, 5); } + + &.clean { + color: $default; + border: 2px solid $default; + background: transparent; + font-weight: bold; + + &.no-bold { + font-weight: normal; + } + + &:hover, + &:active { + color: darken($default, 10); + border: 2px solid darken($default, 10); + } + } } .btn.sml { - padding: 4px 10px 3px; - font-size: 10px; + padding: 2px 9px 0px; + font-size: 12px; } .dropdown { @@ -39,12 +56,23 @@ color: $color; border: 1px solid darken($color-state, 5); background: $color-state; - + &:hover, &:active { border: 1px solid darken($color-state, 5); background: lighten($color-state, 2); } - } -} \ No newline at end of file + &.clean { + color: darken($color-state, 5); + border: 2px solid $color-state; + background: transparent; + + &:hover, + &:active { + color: darken($color-state, 10); + border: 2px solid darken($color-state, 10); + } + } + } +} diff --git a/src/css/includes/_form.scss b/src/css/includes/_form.scss index 30404fa..5e5f59f 100644 --- a/src/css/includes/_form.scss +++ b/src/css/includes/_form.scss @@ -1,5 +1,5 @@ input { - font: inherit; + font: inherit; } input[type=text], @@ -15,8 +15,8 @@ input[type=week], textarea { min-width: 100px; margin: 0 5px 5px 0; - padding: 10px 15px; - font: inherit; + padding: 5px 14px 4px; + font: inherit; color: inherit; line-height: 1.42; vertical-align: middle; @@ -28,7 +28,7 @@ textarea { } input[type=submit] { - border: none; + border: none; } textarea { @@ -43,4 +43,4 @@ textarea { border: 1px solid $color-state; } -} \ No newline at end of file +} diff --git a/src/css/includes/_navigation.scss b/src/css/includes/_navigation.scss index 6670ca3..b0c1914 100644 --- a/src/css/includes/_navigation.scss +++ b/src/css/includes/_navigation.scss @@ -4,6 +4,25 @@ @include border-radius(4px); @include clearfix(); + + &.no-round { + @include border-radius(4px); + } +} + +.nav input[type=text], +.nav input[type=email], +.nav input[type=password], +.nav input[type=search], +.nav input[type=url] { + margin: 2px; + padding: 0 15px; + height: 33px; + + @media (max-width: $breakpoint-width) { + margin: 5px 20px; + height: 35px; + } } .nav.open li { @media (max-width: $breakpoint-width) { display: block; } } @@ -42,7 +61,7 @@ } .nav li > ul { - background: $light; + background: $light; border: 1px solid darken($light, 5); } @@ -51,7 +70,7 @@ .nav a { display: block; - padding: 10px 20px; + padding: 10px 18px 8px; color: $default; white-space: nowrap; @@ -115,7 +134,10 @@ border: 1px solid darken($light, 5); @include border-radius-top(4px); } - +.nav.btn.dropdown > ul.no-round { + @include border-radius(4px); +} + .nav.btn.dropdown a { text-align: left; } .nav.dropdown > ul, @@ -127,7 +149,7 @@ border-top: none; @include border-radius-bottom(4px); - + @media (max-width: $breakpoint-width) { position: relative; max-width: 100%; @@ -137,10 +159,12 @@ .nav.dropdown li, .nav .dropdown li { display: block; } +/* .nav.dropdown li a, .nav .dropdown li a { @media (max-width: $breakpoint-width) { padding-left: 40px; } } +*/ .nav.dropdown.open, .nav .dropdown.open, @@ -170,7 +194,7 @@ } .dark li > ul { - background: $dark; + background: $dark; border: 1px solid darken($dark, 5); } @@ -198,7 +222,7 @@ } .header .nav li > ul { - background: $white; + background: $white; border: 1px solid darken($white, 5); } @@ -206,4 +230,4 @@ .header .nav li.open li.logo { @media (max-width: $breakpoint-width) { display: none; } -} \ No newline at end of file +} diff --git a/src/css/includes/_progress.scss b/src/css/includes/_progress.scss index 7e49271..932f828 100644 --- a/src/css/includes/_progress.scss +++ b/src/css/includes/_progress.scss @@ -1,6 +1,6 @@ .progress { width: 100%; - height: 30px; + height: 20px; margin-bottom: 5px; background-color: $white; border: 1px solid darken($light, 5); @@ -8,18 +8,22 @@ overflow: hidden; @include border-radius(); + + &.clean { + border: 2px solid $default !important; + } } .progress-bar { text-align: center; - height: 30px; + height: 20px; color: $default; background-color: darken($light, 5); } #progress { position: relative; - top: 5px; + top: 1px; } @each $state, $color-map in $-states-map { @@ -30,11 +34,15 @@ .progress.#{$state} { border: 1px solid darken($color-state, 5); background-color: $white; - + .progress-bar { color: $color; background-color: $color-state; } + + &.clean { + border: 2px solid $color-state !important; + } } -} \ No newline at end of file +} diff --git a/src/css/includes/_text.scss b/src/css/includes/_text.scss index a08a81b..7bc4eb3 100644 --- a/src/css/includes/_text.scss +++ b/src/css/includes/_text.scss @@ -3,24 +3,32 @@ h1,h2,h3,h4,h5,h6 { line-height: 1.1; } -h1 {font-size: 36px; margin: 16px 0;} -h2 {font-size: 30px; margin: 12px 0;} -h3 {font-size: 24px; margin: 10px 0;} -h4 {font-size: 18px; margin: 8px 0;} -h5 {font-size: 14px; margin: 6px 0;} -h6 {font-size: 12px; margin: 4px 0;} +h1 {font-size: 68px; font-weight: 300; margin: 16px 0;} +h2 {font-size: 50px; font-weight: 300; margin: 12px 0;} +h3 {font-size: 40px; font-weight: 300; margin: 10px 0;} +h4 {font-size: 30px; font-weight: 400; margin: 8px 0;} +h5 {font-size: 25px; font-weight: 400; margin: 6px 0;} +h6 {font-size: 18px; font-weight: 500; margin: 4px 0;} a { color: $info; text-decoration: none; - &:hover, + &:hover, &:focus { color: lighten($info, 5); text-decoration: none; } } +blockquote { + border-left: 4px solid #EEE; + padding: 5px 30px; + font-weight: 300; + font-size: 18px; + margin: 10px 0; +} + .disabled { color: darken($light, 20); cursor: not-allowed; @@ -44,7 +52,7 @@ b, strong { color: $default; border: 1px solid darken($light, 5); background-color: $light; - + @include border-radius(); } @@ -53,7 +61,7 @@ code, highlight, .highlight, { font-family: $font-code; color: $error; background-color: lighten($error, 40); - + @include border-radius(); } @@ -78,4 +86,4 @@ sub, sup { font-size: 75%; line-height: 0; vertical-align: baseline; -} \ No newline at end of file +} diff --git a/src/css/includes/core/_variables.scss b/src/css/includes/core/_variables.scss index fd0ed90..c5938d5 100644 --- a/src/css/includes/core/_variables.scss +++ b/src/css/includes/core/_variables.scss @@ -18,21 +18,12 @@ $info-border: darken($info, 5); $dark-border: darken($dark, 5); $light-border: darken($light, 5); -/* OLD -$default: #5F5F5F; -$success: #5CB85C; -$error: #D9534F; -$warn: #F0AD4E; -$info: #52B7D6; -$dark: #525252; -$light: #FAFAFA; -*/ - $open-sans: "Open Sans", sans-serif; $anonymous-pro: "Anonymous Pro", Monospace; -$font-default: $open-sans; +$font-default: "Arial", "Helvetica", sans-serif; +/* $open-sans; */ $font-code: $anonymous-pro; $breakpoint-width: 800px; -$default-radius: 4px !default; \ No newline at end of file +$default-radius: 4px !default; diff --git a/src/css/includes/logo.xml b/src/css/includes/logo.xml deleted file mode 100644 index 9dde917..0000000 --- a/src/css/includes/logo.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/css/includes/qr.svg b/src/css/includes/qr.svg new file mode 100644 index 0000000..80a9334 --- /dev/null +++ b/src/css/includes/qr.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/opensans_bold/OpenSans-Bold-webfont.eot b/src/fonts/opensans_bold/OpenSans-Bold-webfont.eot old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_bold/OpenSans-Bold-webfont.svg b/src/fonts/opensans_bold/OpenSans-Bold-webfont.svg old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_bold/OpenSans-Bold-webfont.ttf b/src/fonts/opensans_bold/OpenSans-Bold-webfont.ttf old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_bold/OpenSans-Bold-webfont.woff b/src/fonts/opensans_bold/OpenSans-Bold-webfont.woff old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_italic/OpenSans-Italic-webfont.eot b/src/fonts/opensans_italic/OpenSans-Italic-webfont.eot old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_italic/OpenSans-Italic-webfont.svg b/src/fonts/opensans_italic/OpenSans-Italic-webfont.svg old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_italic/OpenSans-Italic-webfont.ttf b/src/fonts/opensans_italic/OpenSans-Italic-webfont.ttf old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_italic/OpenSans-Italic-webfont.woff b/src/fonts/opensans_italic/OpenSans-Italic-webfont.woff old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_regular/OpenSans-Regular-webfont.eot b/src/fonts/opensans_regular/OpenSans-Regular-webfont.eot old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_regular/OpenSans-Regular-webfont.svg b/src/fonts/opensans_regular/OpenSans-Regular-webfont.svg old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_regular/OpenSans-Regular-webfont.ttf b/src/fonts/opensans_regular/OpenSans-Regular-webfont.ttf old mode 100755 new mode 100644 diff --git a/src/fonts/opensans_regular/OpenSans-Regular-webfont.woff b/src/fonts/opensans_regular/OpenSans-Regular-webfont.woff old mode 100755 new mode 100644 diff --git a/src/index.html b/src/index.html index c56ff5e..cc1563f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,7 @@ - +
@@ -19,7 +19,7 @@ + + - -
- +
@@ -72,13 +72,13 @@ -

Caramel

+ Caramel
- +
- -

Buttons

+ +

Buttons

Default Success @@ -86,19 +86,37 @@

Buttons

Warning Info Dark - +
- + Default Success Error Warning Info Dark - + +

+ + Default + Success + Error + Warning + Info + Dark + +
+ + Default + Success + Error + Warning + Info + Dark +
- - + + - +
- +
-

Button Dropdowns

+

Button Dropdowns

- + + +
+
+
- +
- +
- +
- +
- -

Alerts

- + +

Alerts

+
Default: A little plain, isn't it?
Success! Congratulations, it works!
Error. You broke it. You have no one to blame but yourself!
Warning: Something went wrong!
Info: Did you know, Bacon is more delicious in Canada?
Dark: Deep Space Nine.
- +
Clean: Incase your boss says your style is 'childish', and you need more 'professionalism'.
+
- -

Notices

- + +

Notices

+
Default: A little plain, isn't it?
Success! Congratulations, it works!
Error. You broke it. You have no one to blame but yourself!
Warning: Something went wrong!
Info: Did you know, Bacon is more delicious in Canada?
Dark: Deep Space Nine.
- +
- -

Panels

- + +

Panels

+
Default:
A little plain, isn't it?
- +
Success!
Congratulations, it works!
- +
Error.
You broke it. You have no one to blame but yourself!
- +
Warning:
Something went wrong!
- +
Info:
Did you know, Bacon is more delicious in Canada?
- +
Dark:
Deep Space Nine.
- +
-

Dismissables

+

Dismissables

@@ -273,26 +300,26 @@

Dismissables

- - - + + +
Link  /  Link  /  Link
- +
- -

Images

- + +

Images

+ - -
-

Progress Bars

- +
+ +

Progress Bars

+
@@ -301,7 +328,7 @@

Progress Bars

- +
@@ -309,7 +336,7 @@

Progress Bars

- +
@@ -317,7 +344,7 @@

Progress Bars

- +
@@ -325,15 +352,15 @@

Progress Bars

- +
-
- 100% +
+ 48%
- +
@@ -344,69 +371,9 @@

Progress Bars

- -

Labels

- -
-

- Default - Success - Error - Warn - Info - Dark -

- -

- Default - Success - Error - Warn - Info - Dark -

- -

- Default - Success - Error - Warn - Info - Dark -

- -

- Default - Success - Error - Warn - Info - Dark -

- -
- Default - Success - Error - Warn - Info - Dark -
- -
- Default - Success - Error - Warn - Info - Dark -
-
- -
- -

Pagination

- + +

Pagination

+ - +
- -

Forms

- + +

Forms

+
- - - -
- + - - - +
- -

Grid

- + +

Grid

+
col-1
col-1
@@ -489,13 +450,13 @@

Grid

col-12

- -
- + +
+
-

© 2015 ー CARAMEL
- MADE WITH - & +

© 2015 — CARAMEL
+ MADE WITH + &

@@ -503,5 +464,5 @@

Grid

- + diff --git a/src/js/Caramel.min.js b/src/js/Caramel.min.js deleted file mode 100644 index 5906bf5..0000000 --- a/src/js/Caramel.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Caramel (http://caramel.ga) - * Copyright 2015, All Rights Reserved - * GPL v2 License - */ - $(document).ready(function(){var n=$(".nav");n.on("click",".collapse",function(){$(this).parents("ul").toggleClass("open")}),n.on("click",".dropdown",function(n){n.preventDefault(),$(this).parents("li").find("> ul").toggleClass("open")}),$(".dismiss").click(function(){$(this).closest("#note").fadeOut(500,function(){$(this).remove()})}),$(window).resize()}); \ No newline at end of file diff --git a/src/js/Caramel.js b/src/js/caramel.js old mode 100755 new mode 100644 similarity index 99% rename from src/js/Caramel.js rename to src/js/caramel.js index 7111215..b40c65a --- a/src/js/Caramel.js +++ b/src/js/caramel.js @@ -1,4 +1,4 @@ -/* +/* * Caramel (http://caramel.ga) * Copyright 2015, All Rights Reserved * GPL v2 License @@ -29,4 +29,4 @@ $(document).ready(function() { //Force a resize to init. $(window).resize(); -}); \ No newline at end of file +}); diff --git a/src/js/caramel.min.js b/src/js/caramel.min.js new file mode 100644 index 0000000..8406d25 --- /dev/null +++ b/src/js/caramel.min.js @@ -0,0 +1,6 @@ +/* + * Caramel (http://caramel.ga) + * Copyright 2015, All Rights Reserved + * GPL v2 License + */ + $(document).ready(function(){var n=$(".nav");n.on("click",".menu",function(e){e.preventDefault();var t=$(this);t.parents(n).toggleClass("open")}),n.on("click",".dropdownitem",function(n){n.preventDefault();var e=$(this);e.parent(".dropdown").toggleClass("open")}),$(".dismiss").click(function(){$(this).closest("#note").fadeOut(500,function(){$(this).remove()})}),$(window).resize()}); diff --git a/src/template.html b/src/template.html index 83530fc..48f84dd 100644 --- a/src/template.html +++ b/src/template.html @@ -4,11 +4,10 @@ - Caramel + Page Title - @@ -17,10 +16,9 @@

Caramel

Have fun!

- +
- - - \ No newline at end of file + +