/****************
 * New Buttons! *
 ****************/

.button {
    display: inline-block;
    background-color: #f15a2f;
    padding: 5px 10px;
    margin: 5px 0px;
    outline: none;
    border: none;

    border-radius: 3px;

    color: #fff;
    font-weight: 300;
    font-size: 26px;
    line-height: 125%;

    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
}


.button.small {
    font-size: 16px;
}


.button.large {
    font-size: 32px!important;
    padding: 10px 15px!important;
}


.button.large span.icon {
    margin-left: 10px!important;
    position: relative!important;
    top: 2px!important;
}


.button:hover,
.button:focus {
    opacity: 0.8;
    background-position: 0;
    text-decoration: none;
}


.button:active {
    background: #f17957;

    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
}


/* Selected state for buttons */

/*
 * buttons aren't usually in their selected state, lets comment this out as it causes clashes
 *
.button.selected {
    background: #EEE;
    color: #444;

    -moz-text-shadow: 1px 1px 3px #888;
    -webkit-text-shadow: 1px 1px 3px #888;
    text-shadow: 1px 1px 3px #888;

    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05);
}


.button.selected:hover,
.button.selected:focus {
    opacity: 0.8;
    color: #444;
}


.button.selected:active {
    color: white;

    -moz-text-shadow: 1px 1px 3px #444;
    -webkit-text-shadow: 1px 1px 3px #444;
    text-shadow: 1px 1px 3px #444;
}
*/

/***************************************
 Place buttons within a button-group for
 button panels, either as a <ul> or <ol>
 or as <a> tags within a div.
 **************************************/

ul.button-group,
ol.button-group {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
}


.button-group li,
.button-group a {
    display: inline-block;
    border-right: 1px solid #FFA991;
}


/* Remove border-radius on all buttons */
.button-group > .button,
.button-group > li > .button {
    border-radius: 0;
}


/* Apply border-radius only the the left of the first button */
.button-group > .button:first-child,
.button-group > li:first-child > .button {
    margin-left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}


.button-group > .button,
.button-group > li > .button {
    margin-left: -3px;
}


/* Apply border-radius only to the right of the last button */
.button-group > .button:last-child,
.button-group > li:last-child > .button {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: 0;
}


/*******
 * admin buttons
 * **********/

.admin {
    display: inline-block;
}

h1.admin {
    margin: 40px 0;
}

h1.admin + .admin.button-group {
    margin-left: 20px;
    position: relative;
    top: -5px;
}

h1.admin + .admin.button-group a.button {
    margin-top: 0;
}


/***********************************************************************
 * Watch video buttons. Used on the homepage and partners page. possibly
 * used on the blog index page? Reconsider class name if that's the case
 ***********************************************************************/

.watch-button,
.down-button {
    font: 300 30px 'Source Sans Pro', sans-serif;
    display: block;
    height: auto;
    background: white;
    position: relative;
    margin: 0;
    padding: 3%;
    color: #000;
    text-align: center;

    -webkit-transition: background 0.5s ease, color 0.5s ease;
    -moz-transition: background 0.5s ease, color 0.5s ease;
    transition: background 0.5s ease, color 0.5s ease;
}

.watch-button:before,
.down-button:before {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -10px;

    color: #fff;

    font: 300 24px/100% 'Source Sans Pro';

    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

.watch-button:before {
    content: '▲';
    top: 0%; /* positioning these is a pain... */
    margin-top: -20px;
}

.down-button:before {
    content: '▼';
    bottom: 0%;
    margin-bottom: -15px;
}

.watch-button:hover,
.down-button:hover {
    text-decoration: none;
    cursor: pointer;
}

/* icon for the watch-button */

.watch-button span {
    vertical-align: bottom;
    margin-left: 5%;
}

.watch-button span {
    position: relative;
    top: -2px;
}

.down-button:hover,
.watch-button:hover {
    color: #fff;
    background: #134666;
}

.down-button:hover:before,
.watch-button:hover:before {
    color: #134666;
}

/* grouped styles */

.down-button.dark,
.watch-button.dark {
    background: #134666;
    color: white;
}

.down-button.dark:before {
    color: #134666;
}

.watch-button.dark:before {
    color: #134666;
}

.down-button.dark:hover,
.watch-button.dark:hover {
    color: #333;
    background: #93d5e1;
    text-decoration: none;
}

.down-button.dark:hover:before {
    color: #93d5e1;
}

.watch-button.dark:hover:before {
    color: #93d5e1;
}

/***********************************************************************
 * 'Go to' buttons. Used on the partners and blog page. In buttons
 * css so they're globally available. used on conjunction with the
 * 'icon' class for icons...
 **********************************************************************/

a.go-to-arrow,
a.go-home-arrow { /* note that these share styles with the breadcrumb buttons! */
    display: block;
    position: absolute;
    z-index: 12;
    bottom: 15%;

    padding: 15px 10px 15px 10px;
    text-align: center;
    background: none;
    color: #144667;

    -webkit-transition: color 0.5s ease, -webkit-transform 0.5s ease;
    -moz-transition: color 0.5s ease, -moz-transform 0.5s ease;
    transition: color 0.5s ease, transform 0.5s ease;
}

a.go-to-arrow.left {
    left: 12%;
}

a.go-to-arrow.right {
    right: 12%;
}

a.go-to-arrow.white {
    color: white;
}

a.go-to-arrow:hover,
a.go-home-arrow:hover {
    cursor: pointer;
    color: #34a5d1;

    -webkit-transform: translate(0, -5px);
    -moz-transform: translate(0, -5px);
    transform: translate(0, -5px);

    text-decoration: none;
}

/* a class to give buttons orange backgrounds... */

.watch-button.orange,
.down-button.orange {
    background: #f15a2f;
    color: #fff;

    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
}

.watch-button.orange:hover,
.watch-button.orange:focus,
.down-button.orange:hover,
.down-button.orange:focus {
    opacity: 0.8;
}

.watch-button.orange:before,
.down-button.orange:before {
    color: #f15a2f;
}

/* the orange watch/down buttons are used on the case studies and blog index */

section.full-screen-panel.featured-entry a.watch-button,
section.full-screen-panel.featured-entry a.down-button,
section.full-screen-panel.featured-case-studies a.watch-button,
section.full-screen-panel.featured-case-studies a.down-button {
    float: left;
    width: 43%;
    margin-top: 25px;
}

section.full-screen-panel.featured-entry a.watch-button,
section.full-screen-panel.featured-case-studies a.watch-button {
    margin-right: 2%;
}