/* Calendar Specific Styles

-------------------------------------------------------------------------------*/



.cal-container {

    width: 15.625em; /* 250(target size) / 16 = 15.625 */

    height: 16.25em; /* 260(target size) / 16 = 16.25 */

    margin: 0 auto;

    position: relative;

}

.cal {

    font-size: 81.25%; /* Table base font {16/75%} = 12px */

    width: 100%;

    height: 100%;

    text-align: center;

    border-spacing: 0; /* Set this to allow rounded corners to work */

    border-radius: 10px 10px 0 0;

}

.cal td, .cal th {

    font-weight: 400;

    width: 12.5%;

}

.cal td {

    text-shadow: 0 -1px 0 rgba(0,0,0,1.0);

    border-top: 1px solid rgb(20,20,20);

    border-left: 1px solid rgb(20,20,20);

}

.cal-header {

    }

    .cal-header th {

        padding: 5% 0;

        background-image: linear-gradient(rgb(70,70,70), rgb(49,49,49) 50%);

		background-image: -webkit-linear-gradient(rgb(70,70,70), rgb(49,49,49) 50%);

		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(70,70,70)', endColorstr='rgb(49,49,49)', GradientType=0);

        height: 20%;

        border-bottom: 1px solid rgb(20,20,20);

        box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(255,255,255,0.15) inset;

    }

    .cal-header th:first-child {

        border-radius: 10px 10px 0 0;

    }

    .cal-header th:last-child {

       border-radius: 10px 10px 0 0;

    }

.cal-nav {

    display: block;

    position: relative;

    z-index: 2;

    text-align: right;

    color: silver;

    font-weight: 700;

    font-size: 150%;

    text-decoration: none;

    text-shadow: 0 -1px 0 rgba(0,0,0,1.0);

}

.prev {

    text-align: left;

    padding-left: 25%;

}

.next {

    padding-right: 25%;

}

.prev:hover, .prev:focus,

.next:hover, .next:focus {

    color: rgb(27,147,169);

}

.cal-title {

    width: 75%;

    color: rgb(165,165,165);

    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);

    font-size: 125%;

}

.cal-day-names {

    background-color: rgb(97,97,97);

	background-image: -webkit-linear-gradient(rgb(97,97,97), rgb(68,68,68));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(97,97,97)', endColorstr='rgb(68,68,68)', GradientType=0);

    background-image: linear-gradient(rgb(97,97,97), rgb(68,68,68));

    border-top: 1px solid rgb(119,119,119);

    border-bottom: 1px solid rgb(20,20,20);

    color: rgb(157,157,157);

    font-size: 90%;

    text-shadow: 0 -1px 0 rgba(0,0,0,0.75);

    }

    .cal-day-names th {

        line-height: 1.5;

    }

.day {

 	background-image: -webkit-linear-gradient(rgb(67,67,67), rgb(47,47,47));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(67,67,67)', endColorstr='rgb(47,47,47)', GradientType=0);

    background-image: linear-gradient(rgb(67,67,67), rgb(47,47,47));

    color: rgb(133,133,133);

    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 1px 0 0 rgba(255,255,255,0.15) inset;

    }

    .day:hover,

    .day:focus {

	 	background-image: -webkit-linear-gradient(rgb(107,107,107), rgb(87,87,87));

	 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(107,107,107)', endColorstr='rgb(87,87,87)', GradientType=0);

        background-image: linear-gradient(rgb(107,107,107), rgb(87,87,87));

        color: rgb(200,200,200);

    }

/* oom = out of month -> dates from previous/next month that are greyed out */

.oom {

    background-image: -webkit-linear-gradient(rgb(37,37,37), rgb(26,26,26));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(37,37,37)', endColorstr='rgb(26,26,26)', GradientType=0);

    background-image: linear-gradient(rgb(37,37,37), rgb(26,26,26));

    color: rgb(78,78,78);

    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 1px 0 0 rgba(255,255,255,0.05) inset;

}



/* Events are highlighted */

.event {

    color: white;

	background-image: -webkit-linear-gradient(rgb(122, 0, 0), rgb(213, 0, 0));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(122, 0, 0)', endColorstr='rgb(213, 0, 0)', GradientType=0);

    background-image: linear-gradient(rgb(122, 0, 0), rgb(213, 0, 0));

    cursor: pointer;

    }

    .event:hover,

    .event:focus {

		background-image: -webkit-linear-gradient(rgb(248, 2, 2), rgb(199, 3, 3));

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(248, 2, 2)', endColorstr='rgb(199, 3, 3)', GradientType=0);

        background-image: linear-gradient(rgb(248, 2, 2), rgb(199, 3, 3));

        color: white;

    }



/* Calendar visual tweaks */



/* Remove double borders from perimeter */

.cal tbody tr td:nth-of-type(1) {

    border-left: none;

}

.cal tbody tr td:nth-of-type(7) {

    border-right: none;

}

.cal tbody tr:nth-of-type(6) td {

    border-bottom: none;

}

/* Remove extra border on left hand table cells */

.cal tbody tr:nth-of-type(1n+1) td.day:first-child {

    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;

}

.cal tbody tr:nth-of-type(1n+1) td.oom:first-child {

    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;

}



/* Media Queries */



/* SMARTPHONE LANDSCAPE 480px */

@media only screen and (min-width: 30em) {

    .cal-container {

        width: 100%;

        height: 100%;

    }

    .cal {

        font-size: 100%;

    }

}

/* TABLET 768px */

@media only screen and (min-width: 48em) {

    .cal-container {

        width: 100%;

        height: 100%;

    }

    .cal {

        font-size: 100%;

    }

}

/* NETBOOK 1024px */

@media only screen and (min-width: 64em) {

    .cal-container {

        width: 100%;

        height: 100%;

    }

    .cal {

       font-size: 100%;

    }

}

/* DESKTOP 1600px+ */

@media only screen and (min-width: 100em) {

    .cal-container {

        width: 100%;

        height: 100%;

    }

    .cal {

        font-size: 100%;

    }

}