@charset "UTF-8";
/**
 * Ubuntu Patterns Stylesheet
 *
 * The CSS file required by Ubuntu patterns page
 *
 * @project		Ubuntu Patterns
 * @author		Web Team at Canonical Ltd
 * @copyright	2012 Canonical Ltd
 *
 * @see 		http://design.ubuntu.com
 */

/**
 * standard colors
 *
 * @colordef standard colors
 */

/* assets database path */
$asset-path: "//assets.ubuntu.com/sites/ubuntu/latest/u/img/";
/* usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0; */

$ubuntu-orange:			  #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
$light-orange:        #fdf6f2; /* used as background on pre text */
$canonical-aubergine:	#772953; /* canonical aubergine */
$light-aubergine:		  #77216f; /* light aubergine (consumer) */
$mid-aubergine:			  #5e2750; /* mid aubergine (both) */
$dark-aubergine:		  #2c001e; /* dark aubergine (enterprise) */
$warm-grey:				    #888888; /* warm grey */
$cool-grey:				    #333333; /* cool grey */
$light-grey:			    #f7f7f7; /* light grey */

/* notifications */
$error:					      #df382c; /* red */
$warning:				      #eca918; /* yellow */
$success:				      #38b44a; /* green */
$information:			    #19b6ee; /* cyan */

/* colour coded status - from negative to positive (Icon: canonical circle) */
$status-red:			    #df382c; /* red, for status that require immediate attention */
$status-grey:			    #888888; /* grey, for disabled status or ones that don’t require attention */
$status-yellow:			  #efb73e; /* yellow, for status that require attention */
$status-blue:			    #19b6ee; /* blue, for status that don’t require action */
$status-green:			  #38b44a; /* green, for positive status */

/* misc colours */
$box-solid-grey:		  #efefef;
$link-color:			    $ubuntu-orange; /* This is the global link color, mainly used for links in content */

/* grid variables */
$base:					14;
$gutter-width:	20px;
$grid-gutter:		20px;
$gutter:				2.12766%;

$one-col:       6.38297%;
$two-col:       14.89361%;
$three-col:     23.40425%;
$four-col:      31.91489%;
$five-col:      40.42553%;
$six-col:       48.93617%;
$seven-col:     57.4468%;
$eight-col:     65.95744%;
$nine-col:      74.46808%;
$ten-col:       82.97872%;
$eleven-col:    91.48936%;

$nav-bg:						#f0f0f0;
$nav-link-color:		#333;
$nav-border-dark:		#d4d7d4;
$nav-border-light:	#f2f2f4;
$nav-hover-bg:      #d0d0d0;
$nav-active-bg:     #ddd;

$breakpoint-medium: "only screen and (min-width: 768px)";

$breakpoint-large: "only screen and (min-width: 984px)";

@media only screen and (min-width : 768px) { $base: 15; }

@media only screen and (min-width: 984px) { $base: 14; }