Caramel.scss

@charset "UTF-8";
@framework "Caramel";
@license "CC-NC 3.0-AU";

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Variables */

$disabled: #CCCCCC;

$default: #525252;
$success: #5CB85C;
$error: #D9534F;
$warn: #F0AD4E;
$info: #52B7D6;
$dark: #525252;

$code: #FAFAFA;
$code-border: #E6E6E6;

$color-black: #000;
$color-white: #FFF;
$color-grey: #F2F2F2;
$color-light-grey: #FAFAFA;
$color-dark-grey: #5F5F5F;

$color-red: $error;
$color-orange: $warn;
$color-green: $success;
$color-blue: #58ACFA;
$color-light-blue: $info;
$color-dark-blue: #2E64FE;
$color-purple: #D358F7;
$color-pink: #F781F3;

$max-width: 800px;

/* Formatting */

body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	background-color: $color-white;
	color: $color-dark-grey;
	margin: 0;
}

.container {
    width: inherit;
    max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
    padding-left: 35px;
    padding-right: 35px;
}

.footer {
    margin-top: 25px;
    padding-top:5px;
    padding-bottom:5px;
    width:100%;
}

.hidden {
    display:none;
}

.left {
    float:left;
}

.right {
    float:right;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid $color-grey;
}

code,
.code {
	font-family: "Anonymous Pro", Monospace;
	color: $color-dark-grey;
	background-color: $color-light-grey;
	border: 1px solid $color-grey;
	border-radius: 4px;
	padding: 10px;
	width: auto;
}

well,
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: $color-light-grey;
	border: 1px solid $color-grey;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

table {
	border-spacing: 0;
	border-collapse: collapse;

    td, th {
	   padding: 0;
    }
}

/* Alerts */

.alert {
    display: block;
    border-radius: 4px;
    vertical-align: middle;
    padding: 20px;
    margin-bottom: 10px;
    
    color: $color-dark-grey;
    border: 1px solid $color-grey;
    background: $color-light-grey;
}

.alert.default {
    color: $color-dark-grey;
    border: $color-grey;
    background: $color-light-grey;
}

.alert.success {
    color: $color-white;
    border: darken($success, 5);
    background: lighten($success, 5);
}

.alert.error {
    color: $color-white;
    border: darken($error, 5);
    background: lighten($error, 5);
}

.alert.warn {
    color: $color-white;
    border: darken($warn, 5);
    background: lighten($warn, 5);
}

.alert.info {
    color: $color-white;
    border: darken($info, 5);
    background: lighten($info, 5);
}

.alert.dark {
    color: $color-white;
    border: darken($dark, 5);
    background: lighten($dark, 5);
}

/* Buttons */

.btn {
    display: inline-block;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    
    margin-bottom: 5px;
    line-height: 1.42;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    
    color: $color-dark-grey;
    border: 1px solid $color-grey;
    background: $color-light-grey;
}

.btn.sml {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    
    font-size: 10px;
}

.btn.success {
    color: $color-white;
    border: darken($success, 5);
    background: $success;
        
    &:hover,
    &:active {
        border: $success;
        background: lighten($success, 5);
    }
}

.btn.error {
    color: $color-white;
    border: darken($error, 5);
    background: $error;
    
    &:hover,
    &:active {
        border: $error;
        background: lighten($error, 5);
    }
}

.btn.warn {
    color: $color-white;
    border: darken($warn, 5);
    background: $warn;
    
    &:hover,
    &:active {
        border: $warn;
        background: lighten($warn, 5);
    }
}

.btn.info {
    color: $color-white;
    border: darken($info, 5);
    background: $info;
    
    &:hover,
    &:active {
        border: $info;
        background: lighten($info, 5)
    }
}

.btn.dark {
    color: $color-white;
    border: darken($info, 5);
    background: $dark;
    
    &:hover,
    &:active {
        border: $dark;
        background: darken($dark, 5)
    }
}

.dropdown {
    cursor: pointer;
}

/* Forms */

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] {
    background: #FFF;
    border: #CCC 1px solid;
    color: inherit;
            
    margin-right: 5px;
    margin-bottom: 5px;
            
    display: inline-block;
    min-width: 100px;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;

    margin-bottom: 5px;
    line-height: 1.42;
    vertical-align: middle;
    border-radius: 4px;
}
        
input[type=submit] {
    border: none;
}

textarea {
    background: #FFF;
    border: #CCC 1px solid;
    color: inherit;
            
    margin-right: 5px;
    margin-bottom: 5px;
            
    display: inline-block;
    min-width: 100px;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;

    margin-bottom: 5px;
    line-height: 1.42;
    vertical-align: middle;
    border-radius: 4px;
}

/*  Grid
    Made by github/gratimax */

$sz: 12;
$box-margin: 1/80 * 100%;
$number-boxes: 12;
$base-box-width: 7 / 120 * 100%;

.row {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.box {
    display: inline-block;
    float: left;

    margin-left: $box-margin;
    margin-right: $box-margin;
}

@media (max-width: $max-width) {
    .box {
        margin-bottom: 5px;
        display: block;
        float: none;
    }
}

@for $i from 1 through $sz {
  .box.col-#{$i} {
    width: $base-box-width * $i + $box-margin * 2 * ($i - 1);
  }
}

@media (max-width: $max-width) { 
    .box { 
        width: 100% !important; 
    } 
}

/* Images */

.img {
    margin: 0;
}

.responsive {
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

.thumbnail {
    width: 100% \9;
    max-width: 100%;
    height: auto;
    
    padding: 4px;
    line-height: 1.42;
    background-color: $color-white;
    border: 1px solid $color-grey;
    border-radius: 4px;
}

.round {
    border-radius: 10%;
}

.circle {
    border-radius: 50%;
}

/* Navigation */

.nav {
    background-color: $color-light-grey;
    border: 1px solid $color-grey;
    border-radius: 4px;
    max-height: 50px;
}

.nav.bar {

    li {
        display: block;
        text-decoration: none;
        width: inherit;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px;
        padding-left: 20px;
        padding-right: 20px;
        color: $color-dark-grey;

        &:hover, 
        &:active {
            background-color: $color-grey;
        }
    }
}

.collapse {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 20px;
    
    &:hover,
    &:active{
        background-color: $color-grey;
    }
    
    li {
        display: inline-block;
    }
}

.nav.page {
  display: inline-block;
  border-radius: 4px;

    li {
        margin-left: -5px;
        
        display: inline-block;
        text-decoration: none;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        line-height: 20px;
        color: $color-dark-grey;
        
        &:hover, 
        &:active {
            background-color: $color-grey;
        }
        
        a {
            text-decoration: none;
            display:block;
        }
    }
}

.bar.dark {
    background-color: $dark;
    border-color: darken($dark, 5);
    color: $color-white ;
    
    .collapse {
        &:hover,
        &:active {
            background-color: darken($dark, 5);
        }
    }
    
    li {
        color: $color-white;
        
        &:hover,
        &:active {
            background-color: darken($dark, 5);
        }
    }
}

/* Text Formatting */

a {
	color: $info;
	text-decoration: none;

    &:hover, 
    &:focus {
	   color: lighten($info, 5);
	   text-decoration: none;
    }
}

.color.default {
    color: $default;
}

.color.success {
    color: $success;
}

.color.error {
    color: $error;
}

.color.info {
    color: $info;
}

.color.warn {
    color: $warn;
}

.color.dark {
    color: $dark;
}

b, 
strong {
	font-weight: bold;
}

i, 
.italic {
	font-style: italic;
}

lite, 
.lite {
	font-weight: 300;
}

sml {
	font-size: 80%;
}

s, strike,
.strike {
    text-decoration: line-through;
}

h1, .h1 {font-size: 36px;font-weight: 400;line-height: 1.1;}
h2, .h2 {font-size: 30px;font-weight: 400;line-height: 1.1;}
h3, .h3 {font-size: 24px;font-weight: 400;line-height: 1.1;}
h4, .h4 {font-size: 18px;font-weight: 400;line-height: 1.1;}
h5, .h5 {font-size: 14px;font-weight: 400;line-height: 1.1;}
h6, .h6 {font-size: 12px;font-weight: 400;line-height: 1.1;}

sub, 
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

p {
	margin: 0 0 10px;
}

small, 
.small {
	font-size: 85%;
}