AddToCalendar 1.5 Example - Blue Style Customization

http://addtocalendar.com

by AddToCalendar

HTML

<script src="http://addtocalendar.com/atc/1.5/atc.min.js"></script>
<link rel="stylesheet" href="http://addtocalendar.com/atc/1.5/atc-base.css">
<!--
AddToCalendar 1.5 Example - Blue Style Customization
http://addtocalendar.com

You can found CSS/JS in "External Resources" (left menu).
-->
<span class="addtocalendar atc-style-blue">
        <var class="atc_event">
            <var class="atc_date_start">2014-05-04 12:00:00</var>
            <var class="atc_date_end">2014-05-04 18:00:00</var>
            <var class="atc_timezone">Europe/London</var>
            <var class="atc_title">Star Wars Day Party</var>
            <var class="atc_description">May the force be with you</var>
            <var class="atc_location">Tatooine</var>
            <var class="atc_organizer">Luke Skywalker</var>
            <var class="atc_organizer_email">luke@starwars.com</var>
        </var>
    </span>

CSS

/**
 * AddToCalendar Blue Style
 * http://addtocalendar.com
 */

.atc-style-blue .atcb-link,
.atc-style-blue .atcb-link:hover,
.atc-style-blue .atcb-link:active,
.atc-style-blue .atcb-link:focus
{
    margin: 0;
    padding: 7px 25px;
    color: #fff;
    font-family: "Verdana";
    font-size: 14px;
    text-decoration: none;
    outline: none;
    line-height: 20px;
    vertical-align: middle;
    background: rgb(66,129,244);
    box-shadow: 0 0 40px rgba(0, 0, 0, .13) inset;
    border-radius: 4px;
    zoom: 1;
}

.atc-style-blue .atcb-list {
    width: 170px;
    border: 1px solid rgb(186,186,186);
    border-radius: 2px;
    box-shadow: 0 0 5px #AAA;
}

.atc-style-blue .atcb-list,
.atc-style-blue .atcb-item
{
    background: #fff;
    color: #000;
}

.atc-style-blue .atcb-item,
.atc-style-blue .atcb-item-link
{
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

.atc-style-blue .atcb-item-link,
.atc-style-blue .atcb-item-link:hover,
.atc-style-blue .atcb-item-link:active,
.atc-style-blue .atcb-item-link:focus
{
    color: #000;
    font-family: "Verdana";
    font-size: 14px;
    text-decoration: none;
    outline: none;
    padding: 5px 15px;
}

.atc-style-blue .atcb-item-link:hover,
.atc-style-blue .atcb-item-link:active,
.atc-style-blue .atcb-item-link:focus
{
    color: #fff;
}

.atc-style-blue .atcb-item.hover,
.atc-style-blue .atcb-item:hover {
    background: rgb(66,129,244);
}