@charset "UTF-8";
/*------------------------------------*\
INUIT.CSS
\*------------------------------------*/
/*
Author: Harry Roberts
Twitter: @inuitcss
Author URL: csswizardry.com
Project URL: inuitcss.com
Version: 1.3
Codename: Eskimo
Date: 27 April 2011
Copyright 2011 Harry Roberts
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/*------------------------------------*\
RESET
\*------------------------------------*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
display: block;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img{
border:0;
}
address,caption,cite,dfn,th,var{
font-style:normal;
font-weight:normal;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
/*------------------------------------*\
MAIN
\*------------------------------------*/
html{
overflow-y:scroll; /* Force scrollbars 100% of the time */
font-size:100%; /* Use 16px as per http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */
font-family: Calibri, "Helvetica Neue", Arial, sans-serif;
line-height:1.5;
background:#f5f5f5 url(../images/bg.gif) repeat;
color:#222;
}
body{
min-height:100%;
padding:10px;
margin:0 auto;
text-shadow: 0px 2px 2px #fff;
}
p{color: #444; }
/*------------------------------------*\
GRIDS
\*------------------------------------*/
/* Based on the 1140px Css Grid */
.container {padding-left: 20px;padding-right: 20px;}
.row {width: 100%;max-width: 1040px;min-width: 755px;margin: 0 auto;overflow: hidden;}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right: 3.8%;float: left;min-height: 1px;}
.row .onecol {width: 4.85%;}
.row .twocol {width: 13.45%;}
.row .threecol {width: 22.05%;}
.row .fourcol {width: 30.75%;}
.row .fivecol {width: 39.45%;}
.row .sixcol {width: 48%;}
.row .sevencol {width: 56.75%;}
.row .eightcol {width: 65.4%;}
.row .ninecol {width: 74.05%;}
.row .tencol {width: 82.7%;}
.row .elevencol {width: 91.35%;}
.row .twelvecol {width: 100%;float: left;}
.last {margin-right: 0px;}
/*------------------------------------*\
LOGO
\*------------------------------------*/
/*
Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
*/
#logo, #logo img{
display:block;
width:248px; /* Width of your logo in pixels (ideally a round grid-number) */
height:66px; /* Height of your logo in pixels */
margin: 1em 0;
}
/* Based on the fact that we need to use an ![]()
in our markup, let’s hide the actual image and use a background on the --this gives us sematically sound markup and the ability to use sprites for hover effects! */
#logo{
background:url(../images/logo.png);
}
#logo:hover{
/* Hover states */
background-position:0 -00px;
}
#logo img{
position:absolute;
left:-99999px;
}
.hidden{display: none; }
/*------------------------------------*\
NAV
\*------------------------------------*/
nav{float: left;margin-left: 0;padding-left: 0; }
nav ul{list-style:none;width:100%;overflow:hidden;font-size: 90%;margin-left: 0; }
nav li{float: left;margin-right: 20px; }
nav a{display:block;padding: 1px; }
nav a:hover{text-decoration: underline; }
/*
http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/
Add a class of centred/centered to create a centred nav.
*/
nav.centred,
nav.centered{text-align:center; }
nav.centred li,
nav.centered li{display:inline; float:none; margin-right: 20px;}
nav.centred a,
nav.centered a{display:inline-block; }
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6{font-family: 'Rokkitt', serif; }
h4{ }
h1{
font-size:2em; /* 32px */
margin-bottom:0.75em; /* 24px */
line-height:1.5; /* 48px */
}
h2{
font-size:1.5em; /* 24px */
margin-bottom:1em; /* 24px */
line-height:1; /* 24px */
}
h3{
font-size:1.25em; /* 20px */
margin-bottom:1.2em; /* 24px */
line-height:1.2; /* 24px */
}
h4{
font-size:1.125em; /* 18px */
margin-bottom:1.333em; /* 24px */
line-height:1.333; /* 24px */
}
h5{
font-weight:bold;
}
h5,
h6{
font-size:1em; /* 16px */
margin-bottom:1.5em; /* 24px */
line-height:1.5; /* 24px */
}
/*--- PARAGRAPHS ---*/
p{
margin-bottom:1.5em;
}
/*
Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
Uncomment to activate
p+p{
text-indent:2em;
margin-top:-1.5em;
} */
/*--- LINKS ---*/
/*
Say no to negative hovers!
A negative hover is one whose appearance is subtracted from on hover rather than added to.
*/
a{
text-decoration:none;color: #666;
}
a:visited{
opacity:0.8; /* A bit generic, but it’s a bare minumum... */
}
a:hover{
color: #111;
}
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
color: #111;
}
/*--- LISTS ---*/
ul,
ol{
margin:0 0 1.5em 60px;
}
ul ul,
ol ol,
ul ol,
ol ul{
/* Let’s take care of lists in lists */
margin:0 0 0 60px;
}
dl{
margin-bottom:1.5em;
}
dt{
font-weight:bold;
}
dt:after,
dt::after{
content:":";
}
dd{
margin-left:60px;
}
/*
I personally love this next one. Create a list of keywords by adding a single class to a :
*/
.keywords{
list-style:none;
margin:0 0 1.5em;
}
.keywords li{
display:inline;
text-transform:lowercase;
}
.keywords li:first-of-type{
text-transform:capitalize;
}
.keywords li:after,
.keywords li::after{
content:", ";
}
.keywords li:last-of-type:after,
.keywords li:last-of-type::after{
content:".";
}
/*--- QUOTES ---*/
blockquote{
text-indent:-0.4em;
}
blockquote b,
blockquote .source{
display:block;
text-indent:0;
}
/*--- GENERAL ---*/
q,
i,
em,
cite{
font-style:italic;
font-weight:inherit;
}
b,
strong{
font-weight:bold;
font-style:inherit;
}
mark{
background:#ffc;
}
s,
del{
text-decoration:line-through;
}
small{
font-size:0.75em;
line-height:1;
}
/*--- CODE ---*/
pre,
code{
font-family:monospace;
font-size:1em;
}
pre{
overflow:auto;
margin-bottom:1.5em;
line-height:24px; /* Having to define explicit pixel values :( */
}
code{
line-height:1;
}
/*------------------------------------*\
IMAGES
\*------------------------------------*/
img{
max-width:100%;
height:auto;
/* Give it some text styles to offset alt text */
font-style:italic;
color:#c00;
}
img.left { margin:0 20px 0 0; }
img.right { margin:0 0 0 20px; }
/*--- FLASH/VIDEO ---*/
object,
embed,
video{
max-width:100%;
height:auto;
}
/*------------------------------------*\
MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.message{
font-weight:normal;
display:block;
padding:10px 10px 10px 36px;
border:1px solid #ccc;
margin:0 0 1.5em 0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
/* With multiple errors it’s nice to group them. */
ul.message{
list-style:decimal outside; /* It’s also handy to number them however they might not necessarily be in a certain order, that’s why we spoof it by putting numbers on an unordered list */
padding:10px 10px 10px 56px;
}
.error{
border-color:#fb5766;
background:url(http://store.denovowines.com/img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
border-color:#83ba77;
background:url(http://store.denovowines.com/img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
border-color:#85a5be;
background:url(http://store.denovowines.com/img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
border-color:#d8d566;
background:url(http://store.denovowines.com/img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}
/*------------------------------------*\
MISC
\*------------------------------------*/
.accessibility{
/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
position:absolute;
left:-99999px;
}
.more-link:after, /* <= CSS2.1 syntax */
.more-link::after{ /* CSS3 syntax */
/* Too many people use » in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
content:" »";
}
/*------------------------------------*\
CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insementic classes to do odd jobs.
*/
.left { float:left; }
.right { float:right; }
.clear { clear:both; float:none; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center,
.text-centre { text-align:center; }
/*
These are here, but use them sensibly ;)
*/
.round { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.round > .round { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.letterpress { text-shadow:0 -1px 0 rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.25); } /* Colours may need adjustment */
/*------------------------------------*\
DIAGNOSTICS
\*------------------------------------*/
/*
APPLY A CLASS OF .debug TO THE HTML ELEMENT ONLY WHEN YOUR SITE IS ON DEV
Turn the grids back on. Idea given by @VictorPimentel
*/
.debug { background:url(http://store.denovowines.com/images/baseline.gif) 0 4px #fff!important; }
.debug body { background:url(http://store.denovowines.com/img/css/grid.png) top center repeat-y!important; }
/*
Red border == something is wrong
Yellow border == something may be wrong, you should double check.
Green border == perfect, nice one!
*/
/* Styles */
.debug [style]{
/* Inline styles aren’t great, can this be avoided? */
outline:5px solid yellow;
}
/* Images */
.debug img{
/* Images without alt attributes are bad! */
outline:5px solid red;
}
.debug img[alt]{
/* Images with alt attributes are good! */
outline-color:green;
}
.debug img[alt=""]{
/* Images with empty alt attributes are okay in the right circumstances. */
outline-color:yellow;
}
/* Links */
.debug a{
/* Links without titles are yellow, does your link need one? */
outline:5px solid yellow;
}
.debug a[title]{
/* Links with titles are green, title attributes can be very useful! */
outline-color:green;
}
.debug a[href="#"]{
/* Were you meant to leave that hash in there? */
outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
/* What were you thinking?! */
outline-color:red;
}
/* Classes/IDs */
.debug [class=""],
.debug [id=""]{
/* Is this element meant to have an empty class/ID? */
outline:5px solid yellow;
}
/*------------------------------------*\
NARROW
\*------------------------------------*/
/*
CSS for tablets and narrower devices
*/
@media (min-width: 721px) and (max-width: 960px){
/*------------------------------------*\
MAIN
\*------------------------------------*/
body{
width:700px;
background:none; /* Swap these two lines around to turn grid on/off */
background:url(http://store.denovowines.com/img/css/grid-720.png) top center repeat-y; /* Swap these two lines around to turn grid on/off */
}
.debug body { background:url(http://store.denovowines.com/img/css/grid-720.png) top center repeat-y!important; }
/*------------------------------------*\
GRIDS
\*------------------------------------*/
.grid-1 { width:25px; }
.grid-2 { width:70px; }
.grid-3 { width:115px; }
.grid-4 { width:160px; }
.grid-5 { width:205px; }
.grid-6 { width:250px; }
.grid-7 { width:295px; }
.grid-8 { width:340px; }
.grid-9 { width:385px; }
.grid-10 { width:430px; }
.grid-11 { width:475px; }
.grid-12 { width:520px; }
.grid-13 { width:565px; }
.grid-14 { width:610px; }
.grid-15 { width:655px; }
.grid-16 { width:700px; }
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- LISTS ---*/
ul,
ol{
margin:0 0 1.5em 45px;
}
ul ul,
ol ol,
ul ol,
ol ul{
/* Let’s take care of lists in lists */
margin:0 0 0 45px;
}
dd{
margin-left:45px;
}
}
/*--- END NARROW ---*/
/*------------------------------------*\
MOBILE
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){
/*------------------------------------*\
MAIN
\*------------------------------------*/
html,
body{
background:#fff;
}
.debug,
.debug body{
background:#fff!important;
}
html{
font-size:1.125em;
}
body{
padding:20px;
width:auto;
-webkit-text-size-adjust:none;
}
.grid{
width:auto;
float:none;
}
/*------------------------------------*\
LOGO
\*------------------------------------*/
#logo{
margin:0 auto 1.5em;
}
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- LISTS ---*/
ul,
ol{
margin:0 0 1.5em 25px;
}
ul ul,
ol ol,
ul ol,
ol ul{
/* Let’s take care of lists in lists */
margin:0 0 0 25px;
}
dd{
margin-left:25px;
}
/*------------------------------------*\
IMAGES
\*------------------------------------*/
img.left,
img.right { max-width:50%; height:auto; }
}
/*--- END MOBILE ---*/
/*------------------------------------*\
PRINT
\*------------------------------------*/
/*
Good ol’ fashioned paper...
*/
@media print{
/*------------------------------------*\
MAIN
\*------------------------------------*/
/*
Give everything some decent contrast.
*/
*{
background:#fff;
color:#000;
text-shadow:none!important;
}
/*
Set a nice measure and take the font down to print-acceptable sizes.
*/
body{
width:75%;
margin:0 auto;
font-size:0.75em; /* 12px (if base font-size was 16px) */
}
/*
A list of things you don’t want printing. Add to/subtract from as necessary.
*/
#nav,
footer{
display:none;
}
#logo img{
position:static;
}
/*
Linearise
*/
.grid{
width:auto;
float:none;
clear:both;
}
/*
Don’t let images break anything.
*/
img{
max-width:100%;
height:auto;
}
/*
Messages look odd with just borders.
*/
.message{
border:none;
font-weight:bold;
}
/*
Try to avoid tables spanning multiple pages. Not failsafe, but a good start.
*/
table{
page-break-before:always;
}
/*
Show the accessibility class.
*/
.accessibility{
position:static;
}
/*
Display the href of any links.
*/
a:link:after,a:visited:after,
a:link::after,a:visited::after{
content:" (" attr(href) ")";
font-size:smaller;
}
/*
Any links that are root relative to your site need prepending with your URL.
*/
a[href^="/"]:after,
a[href^="/"]::after{
content:" (http://yoururlhere.com" attr(href) ")";
font-size:smaller;
}
/*
Any Flash/video content can’t be printed so leave a message.
*/
object:after,
object::after{
content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
display:block;
font-weight:bold;
margin-bottom:1.5em;
}
}
/*--- END PRINT ---*/
/* Buttons */
.button {position: relative;overflow: visible;display: inline-block;padding: 0.5em 1em;border: 1px solid #d4d4d4;margin: 0;text-decoration: none;text-shadow: 1px 1px 0 #fff;font:12px/normal 'Calibri', sans-serif ;color: #333;white-space: nowrap;cursor: pointer;outline: none;background-color: #ececec;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));background-image: -moz-linear-gradient(#f4f4f4, #ececec);background-image: -o-linear-gradient(#f4f4f4, #ececec);background-image: linear-gradient(#f4f4f4, #ececec);-webkit-background-clip: padding;-moz-background-clip: padding;-o-background-clip: padding-box;/*background-clip: padding-box;*/
/* commented out due to Opera 11.10 bug */
-webkit-border-radius: 0.2em;-moz-border-radius: 0.2em;border-radius: 0.2em;/* IE hacks */
zoom: 1;*display: inline;}
.button:hover,.button:focus,.button:active,.button.active {border-color: #3072b3;border-bottom-color: #2a65a0;text-decoration: none;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);color: #fff;background-color: #3C8DDE;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));background-image: -moz-linear-gradient(#599bdc, #3072b3);background-image: -o-linear-gradient(#599bdc, #3072b3);background-image: linear-gradient(#599bdc, #3072b3);}
.button:active,.button.active {border-color: #2a65a0;border-bottom-color: #3884CF;background-color: #3072b3;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));background-image: -moz-linear-gradient(#3072b3, #599bdc);background-image: -o-linear-gradient(#3072b3, #599bdc);background-image: linear-gradient(#3072b3, #599bdc);}
/* overrides extra padding on button elements in Firefox */
.button::-moz-focus-inner {padding: 0;border: 0;}
/* ............................................................................................................. Icons */
.button.icon:before {content: "";position: relative;top: 1px;float:left;width: 12px;height: 12px;margin: 0 0.75em 0 -0.25em;background: url(../images/gh-icons.png) 0 99px no-repeat;}
.button.arrowup.icon:before {background-position: 0 0;}
.button.arrowup.icon:hover:before,.button.arrowup.icon:focus:before,.button.arrowup.icon:active:before {background-position: -12px 0;}
.button.arrowdown.icon:before {background-position: 0 -12px;}
.button.arrowdown.icon:hover:before,.button.arrowdown.icon:focus:before,.button.arrowdown.icon:active:before {background-position: -12px -12px;}
.button.arrowleft.icon:before {background-position: 0 -24px;}
.button.arrowleft.icon:hover:before,.button.arrowleft.icon:focus:before,.button.arrowleft.icon:active:before {background-position: -12px -24px;}
.button.arrowright.icon:before {float:right;margin: 0 -0.25em 0 0.5em;background-position: 0 -36px;}
.button.arrowright.icon:hover:before,.button.arrowright.icon:focus:before,.button.arrowright.icon:active:before {background-position: -12px -36px;}
.button.approve.icon:before {background-position: 0 -48px;}
.button.approve.icon:hover:before,.button.approve.icon:focus:before,.button.approve.icon:active:before {background-position: -12px -48px;}
.button.add.icon:before {background-position: 0 -288px;}
.button.add.icon:hover:before,.button.add.icon:focus:before,.button.add.icon:active:before {background-position: -12px -288px;}
.button.remove.icon:before {background-position: 0 -60px;}
.button.remove.icon:hover:before,.button.remove.icon:focus:before,.button.remove.icon:active:before {background-position: -12px -60px;}
.button.log.icon:before {background-position: 0 -72px;}
.button.log.icon:hover:before,.button.log.icon:focus:before,.button.log.icon:active:before {background-position: -12px -72px;}
.button.calendar.icon:before {background-position: 0 -84px;}
.button.calendar.icon:hover:before,.button.calendar.icon:focus:before,.button.calendar.icon:active:before {background-position: -12px -84px;}
.button.chat.icon:before {background-position: 0 -96px;}
.button.chat.icon:hover:before,.button.chat.icon:focus:before,.button.chat.icon:active:before {background-position: -12px -96px;}
.button.clock.icon:before {background-position: 0 -108px;}
.button.clock.icon:hover:before,.button.clock.icon:focus:before,.button.clock.icon:active:before {background-position: -12px -108px;}
.button.settings.icon:before {background-position: 0 -120px;}
.button.settings.icon:hover:before,.button.settings.icon:focus:before,.button.settings.icon:active:before {background-position: -12px -120px;}
.button.comment.icon:before {background-position: 0 -132px;}
.button.comment.icon:hover:before,.button.comment.icon:focus:before,.button.comment.icon:active:before {background-position: -12px -132px;}
.button.fork.icon:before {background-position: 0 -144px;}
.button.fork.icon:hover:before,.button.fork.icon:focus:before,.button.fork.icon:active:before {background-position: -12px -144px;}
.button.like.icon:before {background-position: 0 -156px;}
.button.like.icon:hover:before,.button.like.icon:focus:before,.button.like.icon:active:before {background-position: -12px -156px;}
.button.favorite.icon:before {background-position: 0 -348px;}
.button.favorite.icon:hover:before,.button.favorite.icon:focus:before,.button.favorite.icon:active:before {background-position: -12px -348px;}
.button.home.icon:before {background-position: 0 -168px;}
.button.home.icon:hover:before,.button.home.icon:focus:before,.button.home.icon:active:before {background-position: -12px -168px;}
.button.key.icon:before {background-position: 0 -180px;}
.button.key.icon:hover:before,.button.key.icon:focus:before,.button.key.icon:active:before {background-position: -12px -180px;}
.button.lock.icon:before {background-position: 0 -192px;}
.button.lock.icon:hover:before,.button.lock.icon:focus:before,.button.lock.icon:active:before {background-position: -12px -192px;}
.button.unlock.icon:before {background-position: 0 -204px;}
.button.unlock.icon:hover:before,.button.unlock.icon:focus:before,.button.unlock.icon:active:before {background-position: -12px -204px;}
.button.loop.icon:before {background-position: 0 -216px;}
.button.loop.icon:hover:before,.button.loop.icon:focus:before,.button.loop.icon:active:before {background-position: -12px -216px;}
.button.search.icon:before {background-position: 0 -228px;}
.button.search.icon:hover:before,.button.search.icon:focus:before,.button.search.icon:active:before {background-position: -12px -228px;}
.button.mail.icon:before {background-position: 0 -240px;}
.button.mail.icon:hover:before,.button.mail.icon:focus:before,.button.mail.icon:active:before {background-position: -12px -240px;}
.button.move.icon:before {background-position: 0 -252px;}
.button.move.icon:hover:before,.button.move.icon:focus:before,.button.move.icon:active:before {background-position: -12px -252px;}
.button.edit.icon:before {background-position: 0 -264px;}
.button.edit.icon:hover:before,.button.edit.icon:focus:before,.button.edit.icon:active:before {background-position: -12px -264px;}
.button.pin.icon:before {background-position: 0 -276px;}
.button.pin.icon:hover:before,.button.pin.icon:focus:before,.button.pin.icon:active:before {background-position: -12px -276px;}
.button.reload.icon:before {background-position: 0 -300px;}
.button.reload.icon:hover:before,.button.reload.icon:focus:before,.button.reload.icon:active:before {background-position: -12px -300px;}
.button.rss.icon:before {background-position: 0 -312px;}
.button.rss.icon:hover:before,.button.rss.icon:focus:before,.button.rss.icon:active:before {background-position: -12px -312px;}
.button.tag.icon:before {background-position: 0 -324px;}
.button.tag.icon:hover:before,.button.tag.icon:focus:before,.button.tag.icon:active:before {background-position: -12px -324px;}
.button.trash.icon:before {background-position: 0 -336px;}
.button.trash.icon:hover:before,.button.trash.icon:focus:before,.button.trash.icon:active:before {background-position: -12px -336px;}
.button.user.icon:before {background-position: 0 -360px;}
.button.user.icon:hover:before,.button.user.icon:focus:before,.button.user.icon:active:before {background-position: -12px -360px;}
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Primary */
.button.primary {font-weight: bold;}
/* ............................................................................................................. Danger */
.button.danger {color: #900;}
.button.danger:hover,.button.danger:focus,.button.danger:active {border-color: #b53f3a;border-bottom-color: #a0302a;color: #fff;background-color: #dc5f59;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));background-image: -moz-linear-gradient(#dc5f59, #b33630);background-image: -o-linear-gradient(#dc5f59, #b33630);background-image: linear-gradient(#dc5f59, #b33630);}
.button.danger:active,.button.danger.active {border-color: #a0302a;border-bottom-color: #bf4843;background-color: #b33630;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));background-image: -moz-linear-gradient(#b33630, #dc5f59);background-image: -o-linear-gradient(#b33630, #dc5f59);background-image: linear-gradient(#b33630, #dc5f59);}
/* ............................................................................................................. Pill */
.button.pill {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
/* ............................................................................................................. Disable */
.button.disable {opacity: 0.5;}
/* ............................................................................................................. Big */
.button.big {font-size: 14px;}
.button.big.icon:before {top: 0;}
/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
/* ............................................................................................................. Standard */
.button-group {display: inline-block;list-style: none;padding: 0;margin: 0;/* IE hacks */
zoom: 1;*display: inline;}
.button + .button,.button + .button-group,.button-group + .button,.button-group + .button-group {margin-left: 15px;}
.button-group li {float: left;padding: 0;margin: 0;}
.button-group .button {float: left;margin-left: -1px;}
.button-group > .button:not(:first-child):not(:last-child),.button-group li:not(:first-child):not(:last-child) .button {-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}
.button-group > .button:first-child,.button-group li:first-child .button {margin-left: 0;-webkit-border-top-right-radius: 0;-webkit-border-bottom-right-radius: 0;-moz-border-radius-topright: 0;-moz-border-radius-bottomright: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;}
.button-group > .button:last-child,.button-group li:last-child > .button {-webkit-border-top-left-radius: 0;-webkit-border-bottom-left-radius: 0;-moz-border-radius-topleft: 0;-moz-border-radius-bottomleft: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;}
/* ............................................................................................................. Minor */
.button-group.minor-group .button {border: 1px solid #d4d4d4;text-shadow: none;background-image: none;background-color: #fff;}
.button-group.minor-group .button:hover,.button-group.minor-group .button:focus,.button-group.minor-group .button:active {background-color: #599bdc;}
.button-group.minor-group .button:active,.button-group.minor-group .button.active {background-color: #3072b3;}
.button-group.minor-group .button.icon:before {opacity: 0.8;}
/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
/* For mixing buttons and button groups, e.g., in a navigation bar */
.button-container .button,.button-container .button-group {vertical-align: top;}
/* End Buttons */