/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
    /* styles */
}

/* Traditional iPhone width */
@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
        /* styles */
    }

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
    /* styles */
}
@media screen and (orientation:landscape) {
    /* styles */
}



/* Main Colors */

.bg-Blue       {background-color:#00AACC}
.bg-Orange     {background-color:#FF4E00}
.bg-Brick      {background-color:#CD6723}
.bg-Red        {background-color:#B90000}
.bg-Green      {background-color:#5F9B0A}
.bg-Black      {background-color:#000000}
.bg-WarmGrey   {background-color:#333333}
.bg-Grey       {background-color:#2C393B}
.bg-LightGrey  {background-color:#F4F4F4}
.bg-Ivory      {background-color:#EAEAE7}

/* All Colors */
.bg-Black      {background-color:#000000}
.bg-WarmGrey   {background-color:#333333} /* Pressed state of dialer icons, Media app headers */
.bg            {background-color:#4D4D4D}
.bg            {background-color:#5F5F5F}
.bg            {background-color:#858585}
.bg-MidGrey    {background-color:#A6A6A6}
.bg            {background-color:#C7C7C7}
.bg            {background-color:#E7E7E7}
.bg            {background-color:#EEEEEE}
.bg-LightGrey  {background-color:#F4F4F4} /* Light grey for second level light apps */
.bg-White      {background-color:#FFFFFF} /* White for first level light apps */
.bg-Ivory      {background-color:#EAEAE7}

.bg            {background-color:#1C2224}
.bg            {background-color:#222B2D}
.bg-Grey       {background-color:#2C393B}

.bg            {background-color:#008EAB}
.bg-Blue       {background-color:#00AACC} /* On state of switchers, Call to action and selected element, Button hit state */
.bg            {background-color:#00CAF2}
.bg            {background-color:#B2F2FF}
.bg            {background-color:#820000}
.bg-Red        {background-color:#B90000} /* Error cases, Missed calls, Hang up button */
.bg-Orange     {background-color:#FF4E00} /* Indication icons, Alphabetical dividers */
.bg-Brick      {background-color:#CD6723}
.bg            {background-color:#4B780A}
.bg-Green      {background-color:#5F9B0A}


/* Main Colors */

.text-Blue       {color:#00AACC}
.text-Orange     {color:#FF4E00}
.text-Brick      {color:#CD6723}
.text-Red        {color:#B90000}
.text-Green      {color:#5F9B0A}
.text-Black      {color:#000000}
.text-WarmGrey   {color:#333333}
.text-Grey       {color:#2C393B}
.text-LightGrey  {color:#F4F4F4}
.text-Ivory      {color:#EAEAE7}

/* All Colors */
.text-Black      {color:#000000}
.text-WarmGrey   {color:#333333} /* Pressed state of dialer icons, Media app headers */
.text            {color:#4D4D4D}
.text            {color:#5F5F5F}
.text            {color:#858585}
.text-MidGrey    {color:#A6A6A6}
.text            {color:#C7C7C7}
.text            {color:#E7E7E7}
.text            {color:#EEEEEE}
.text-LightGrey  {color:#F4F4F4} /* Light grey for second level light apps */
.text-White      {color:#FFFFFF} /* White for first level light apps */
.text-Ivory      {color:#EAEAE7}

.text            {color:#1C2224}
.text            {color:#222B2D}
.text-Grey       {color:#2C393B}

.text            {color:#008EAB}
.text-Blue       {color:#00AACC} /* On state of switchers, Call to action and selected element, Button hit state */
.text            {color:#00CAF2}
.text            {color:#B2F2FF}
.text            {color:#820000}
.text-Red        {color:#B90000} /* Error cases, Missed calls, Hang up button */
.text-Orange     {color:#FF4E00} /* Indication icons, Alphabetical dividers */
.text-Brick      {color:#CD6723}
.text            {color:#4B780A}
.text-Green      {color:#5F9B0A}


/* Correct Gradient Styles */

/* White screens Header*/
/* Settings Header */
/* Idle Button */
/* Call to action Button */



/* Firefox OS Typeface */

/*
Fira Sans Light
Fira Sans Light
Fira Sans Regular
Fira Sans Regular
Fira Sans Medium
Fira Sans Medium
Fira Sans Bold
Fira Sans Bold
Text Styles
*/
/*
This is a list of the most common styles, and the basics you may need.
*/
/*
Note that the combination of sizes listed here are calculated for a 165 ppi screen. If you’re working with a different resolution you can use the conversion formula provided below.
*/
/* 1 inch       = 	72 point (pt)    */
/* 10 Pixels    = 	1 rem            */
/*
Font Weight
PSDs 		CSS
Light 	= 	300
Regular = 	400
Medium 	= 	500
*/
/*
Name 	Description REM 	Point   Weight 	        Use cases 	                     Sample
h1 	    Heading     2.5 	11      Regular / 400 	Headers 	                     Heading example
h2 	    Subheading  1.6 	7 	    Regular / 400 	Subheaders, Dialog titles 	     Subheading example
p.large Body Large  2.3 	10 	    Light / 300 	Dialogs 	                     Body Large example
p /ul 	Body        1.9 	8 	    Regular / 400 	Body text, lists, default size 	 Body example
p.alt 	Body Medium 1.7 	7 	    Medium / 500 	Med. body text and btn label 	 Body Medium example
p.small Body Small  1.5 	6.5     Regular / 400 	Status bar 	                     Body Small example
p.mini 	Body Mini 	1.4 	6       Regular / 400 	Fine print and status bar 	     Body Mini example
p.micro Body Micro 	1.3 	5.75 	Regular / 400 	Application icon label 	         Body Micro example
*/

body        {font-size:  10px;font-weight:400}
.heading    {font-size:2.5rem;font-weight:400}  /* Headers */
.subheading {font-size:1.6rem;font-weight:400}  /* Subheaders - Dialog titles */
p.large     {font-size:2.3rem;font-weight:300}  /* Body Large - Dialogs */
p ul        {font-size:1.9rem;font-weight:400}  /* Body - Body text, lists, default size */
p.alt       {font-size:1.7rem;font-weight:400}  /* Body Medium - Med. body text and btn label */
p.small     {font-size:1.5rem;font-weight:400}  /* Body Small - Status bar */
p.mini      {font-size:1.4rem;font-weight:400}  /* Body Mini - Fine print and status bar */
p.micro     {font-size:1.3rem;font-weight:400}  /* Body Micro - Application icon label */


/* https://github.com/buildingfirefoxos/Building-Blocks */
/* https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/util.css */

/* Feel free to add any useful code */
/* This will help you scroll just the content of your app. Eg:
<header class="fixed">
...
<article class="scrollable header">
*/
html {
    height: 100%;
    font-size: 62.5%; /* Setting base font to 10px and define all your units in rem. 1rem = 10px */
}
body {
    margin: 0;
    height: 100%;
    display: block;
    overflow: hidden;
    font-family: sans-serif;
}
.hidden {
    visibility: hidden;
}
section[role="region"] {
    height: 100%;
    background: #fff;
}
section[role="region"] > header.fixed:first-child {
    position: absolute;
    width: 100%;
}
.scrollable {
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
}
.scrollable.header {
    height: calc(100% - 5rem);
    top: 5rem;
}
/* Setting proper paddings and margins */
.content {
    padding: 1.5rem;
}
section[role="region"] .content header {
    margin: 1.5rem -1.5rem;
}
section[role="region"] .content header:first-child {
    margin-top: -1.5rem;
}
.content [data-type="list"] {
    margin: -1.5rem;
}
.center {
    text-align: center;
}
[data-type="list"] {
    padding: 0;
}
[data-type="list"] ul {
    padding: 0 1.5rem;
    overflow: auto;
}
section[role="region"] .content [data-type="list"] header {
    margin: 0 1.5rem;
}
[data-type="list"] li p,
[data-type="list"] li p:first-of-type {
    padding-left: 1.5rem;
}
/* Fonts */
h1 { /* Main header */
    font-size: 2.5rem;
    font-weight: normal;
}
h2 { /* Subheader, Dialog title */
    font-size: 1.6rem;
    font-weight: normal;
}
p {
    font-size: 1.9rem;
    font-weight: normal;
    line-height: 2.5rem;
}
p.large { /* Dialog body */
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 3rem;
}
p.alt { /* Body medium, Buttons */
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 2.2rem;
}
p.small { /* Status bar */
    font-size: 1.5rem;
    line-height: 2rem;
}
p.mini { /* Fine print */
    font-size: 1.4rem;
    line-height: 1.9rem;
}
p.micro { /* App icon label */
    font-size: 1.3rem;
    line-height: 1.8rem;
}
ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.9rem;
    font-weight: normal;
    line-height: 2.5rem;
}
/* Themes */
.skin-dark { background: #000; }
.skin-organic { background: #f4f4f4; }