@font-face {
    font-family: 'comic sans ms';
    src: url('/fonts/bespoke/holyroodcatholic/comic.eot');
    src: url('/fonts/bespoke/holyroodcatholic/comic.eot?#iefix') format('embedded-opentype'),
        url('/fonts/bespoke/holyroodcatholic/comic.woff') format('woff'),
        url('/fonts/bespoke/holyroodcatholic/comic.ttf') format('truetype'),
        url('/fonts/bespoke/holyroodcatholic/comic.svg#comic') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body {
    height:100%;

}

body {

}

#wrapper {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    background: #0A00CD url(/img/bespoke/holyroodcatholic/bg.png) repeat-x top center;
    min-height:100%;
    font-family: 'comic sans ms', arial;
    min-width: 1003px;
}

#content-wrapper {
    background: url(/img/bespoke/holyroodcatholic/tile.png) repeat-y top center;
    height: auto;
    width:1003px;
    margin:0 auto;
}

/*  Header
    ======  */
#header {
    width: 1003px;
    height: 375px;
    margin:0 auto 0;
    background: url(/img/bespoke/holyroodcatholic/header1.png) no-repeat top center;
    position: relative;
}

#header h1 {
    margin: 0 0 0 18px;
    line-height: 1.35em;
    font-size: 2.6em;
    color: #008000;
    text-shadow: 2px 2px 2px #444;
}

#header p {
    margin:5px 0 0 20px;
    font-size: 1.5em;
    color: #eee;

}

#header #search {
    bottom: 0;
    height: 28px;
    padding: 337px 8px 7px 55px;
    position: relative;
    right: 10px;
    /*
    background: #006738;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
    -webkit-box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.1);
    */
}

#header #search form {
    padding: 0;
    margin: 0;
}

#header #search input {
    -webkit-border-top-right-radius: 0;
    -webkit-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}

#header #search .btn {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
    margin: 0;
    height: 28px;
}


#mobilelogo {
    display: none;
}

#mobilelogo img {
    width: 100%;
    height: auto;    
}


/*  Nav
    ===  */
#nav {
    float: left;
    padding: 10px 10px 10px 30px;
    position: relative;
    width: 230px;
}

#nav-address {
    width:200px;
    height: auto;
    margin:10px auto;
    color:#fff;
}

#nav ul {
    list-style: none;
    margin: 0;
}

#nav ul li {
    line-height: 31px;
    margin-bottom: 5px;
    font-size:1.2em;
    color: #fff;
    position:relative;
    background: url(/img/bespoke/holyroodcatholic/m1.png) no-repeat;
    z-index:555;
}

#nav ul li.item2,
#nav ul li.item10,
#nav ul li.item18,
#nav ul li.item26{
    background: url(/img/bespoke/holyroodcatholic/m2.png) no-repeat;
}

#nav ul li.item3,
#nav ul li.item11,
#nav ul li.item19,
#nav ul li.item27{
    background: url(/img/bespoke/holyroodcatholic/m3.png) no-repeat;
}

#nav ul li.item4,
#nav ul li.item12,
#nav ul li.item20,
#nav ul li.item28{
    background: url(/img/bespoke/holyroodcatholic/m4.png) no-repeat;
}

#nav ul li.item5,
#nav ul li.item13,
#nav ul li.item21,
#nav ul li.item29{
    background: url(/img/bespoke/holyroodcatholic/m5.png) no-repeat;
}
#nav ul li.item6,
#nav ul li.item14,
#nav ul li.item22,
#nav ul li.item30{
    background: url(/img/bespoke/holyroodcatholic/m6.png) no-repeat;
}

#nav ul li.item7,
#nav ul li.item15,
#nav ul li.item23,
#nav ul li.item31{
    background: url(/img/bespoke/holyroodcatholic/m7.png) no-repeat;
}

#nav ul li.item8,
#nav ul li.item16,
#nav ul li.item24,
#nav ul li.item32{
    background: url(/img/bespoke/holyroodcatholic/m8.png) no-repeat;
}



#nav ul li a {
    color: inherit;
    *color: #fff;
    display: block;
    padding-left: 16px;
    position: relative;
    z-index: 2;
    min-height:31px;
    line-height: 31px;
}

#nav > ul > li > a {
    display: table-cell;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    line-height: 18px;
    padding-left: 60px;
    padding-top: 15px;
    text-align: left;
    width: 170px;
    vertical-align: middle;
    /*
    text-shadow: 1px 1px 1px #888,
                 1px -1px 1px #888,
                 -1px 1px 1px #888,
                 -1px -1px 1px #888,
                 2px 2px 1px #888,
                 2px -2px 1px #888,
                 -2px 2px 1px #888,
                 -2px -2px 1px #888;
    
    filter:glow(color=#888888, strength=5);
    */
}

#nav ul li ul {
    background: #eee;
    padding: 12px 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    z-index: 1;
}

#nav ul li ul {
    width: 175px;
    left:229px;
    top:3px;
    position: absolute;
    display:none;

    border-top: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #909090;
    border-bottom: 1px solid #909090;
}

#nav > ul > li.item1 ul,
#nav > ul > li.item9 ul,
#nav > ul > li.item17 ul,
#nav > ul > li.item25 ul{
    background: #0A1CD3;
}

#nav > ul > li.item2 ul,
#nav > ul > li.item10 ul,
#nav > ul > li.item18 ul,
#nav > ul > li.item26 ul{
    background: #D10A32;
}

#nav > ul > li.item3 ul,
#nav > ul > li.item11 ul,
#nav > ul > li.item19 ul,
#nav > ul > li.item27 ul{
    background: #33CE0A;
}

#nav > ul > li.item4 ul,
#nav > ul > li.item12 ul,
#nav > ul > li.item20 ul,
#nav > ul > li.item28 ul{
    background: #570AD5;
}

#nav > ul > li.item5 ul,
#nav > ul > li.item13 ul,
#nav > ul > li.item21 ul,
#nav > ul > li.item29 ul{
    background: #0A76CE;
}
#nav > ul > li.item6 ul,
#nav > ul > li.item14 ul,
#nav > ul > li.item22 ul,
#nav > ul > li.item30 ul{
    background: #CDBC0A;
}

#nav > ul > li.item7 ul,
#nav > ul > li.item15 ul,
#nav > ul > li.item23 ul,
#nav > ul > li.item31 ul{
    background: #C70ACE;
}

#nav > ul > li.item8 ul,
#nav > ul > li.item16 ul,
#nav > ul > li.item24 ul,
#nav > ul > li.item32 ul{
    background: #CD440A;
}

#nav ul li ul li {
    line-height: 2em;
    font-size: 14px;
    position: relative;
    margin: 0;
    background: none !important;

    border-bottom:1px solid #d1d3ff;
}

#nav ul li ul li.last {
    border-bottom: none;
}

#nav ul li ul li a {
    background: none;
    color: #fff;
}

#nav ul ul li a:hover {
    background-color:#666;
}
/*
#nav ul li li li a { text-indent: 16px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 16px 8px !important; }
#nav ul li li li li a { text-indent: 32px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 32px 8px !important; }
#nav ul li li li li li a { text-indent: 48px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 48px 8px !important; }
*/
#nav ul li ul li ul {
    /*padding: 0;*/
    top: -10px;
    margin: 0;
    border-radius: none;
    left:173px;
}


/*  Content
    =======  */
#content {
    float: left;
    width:690px;
    padding: 25px 15px 25px 5px;
    min-height:300px;
    color:#008000;
}

/*  Footer
    ======  */
#footer {
    background: url("/img/bespoke/holyroodcatholic/footer.png") no-repeat scroll center bottom transparent;
    color: #333;
    font-size: 1.2em;
    height: auto;
    margin: 0 auto;
    padding: 10px 50px 30px 253px;
    text-align: center;
    width: 700px;
}

#footer-address {
    display:none;
}

#footer a {
    color: inherit;
}

/*  Text Styles
    ===========  */

#content .row {
    margin-left:-50px;
}

#content .span4 {
    margin-left: 50px;
}

#content .page-header {
    border-bottom: 1px solid #444;
    margin: 0;
    margin-bottom: 8px;
}

#content .page-header h2 {
    margin: 2px 0 0px;
    font-size: 2.1em;
    color: #333;
    padding-bottom: 10px;
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: #008000;
    font-size: 1.5em;
}

#content h1 { font-size: 1.5em; margin: .5em 0; }
#content h2 { font-size: 1.4em; margin: .5em 0; }
#content h3 { font-size: 1.3em; margin: .5em 0; }
#content h4 { font-size: 1.2em; margin: .5em 0; }
#content h5 { font-size: 1.1em; margin: .5em 0; }
#content h6 { font-size: 1.0em; margin: .5em 0; }

#content, #content p, #content li, #content dt, #content dd, #content label {
    font-size: 15px;
    line-height: 21px;
}

#content dd {
    margin: 0 0 9px 0;
}

p small{
    color:black;
}


.sj_element_news ul li,
.sj_element_news ul li a
{
    color: #008000;
}

.sj_element_news ul li a {
    font-weight: bold;
    font-size: 18px;
}

/* Mobile theme
   ============ */

@media (min-width: 768px) {
    #nav ul {
        display: block;
    }
}

@media (max-width: 767px) {
    #wrapper {
        width: auto;
        background:#FFF0BC;
        min-width: 0;
    }

    #content-wrapper {
        width: auto;
        background:#FFF0BC;
    }

    #header {
        display: none;
    }

    #header #search {
        display: none;
        right: 10px;
    }
    
    #mobilelogo {
        display: block;
    }

    #nav:before {
        content: 'Menu';
        font-size: 20px;
        font-weight: normal;
        height: 31px;
        line-height: 31px;

    }

    #nav {
        float: none;
        width: auto;
        margin: 10px;
        background: #51B0D4 url(/img/bespoke/holyroodcatholic/show_menu.png) no-repeat right 23px;
        border-radius: 10px;
        margin-bottom: 0;
        padding:10px;
        cursor: pointer;
        top: 0;
        -webkit-transform: translate3d(0, 0, 0);   /* Smoother animations on mobile */
    }

    #nav-address {
        display:none;
    }

    #nav > ul {
        display: none;
        padding:10px;
        padding-top:0;
        margin: 0;
        margin-left:-10px;
        margin-right:-10px;
        margin-bottom:-10px;
        margin-top:10px;
    }

    #nav ul {
        width: auto;
        border-radius: 0 !important;
        clear:both;
    }

    #nav ul li {
        margin: 0;
        line-height: 31px;
        width: auto;
        padding: 0;
        background:none !important;
    }

    #nav ul li a {
        width: auto;
        line-height: 31px;
        min-height: 31px;
        padding: 0;
        background: none;
        color: #000 !important;
        font-size: 16px !important;
    }

    #nav > ul > li > a {
        text-align:left;
        text-shadow:none;
        filter:none;

    }

    #nav ul li ul {
        padding: 0;
        top: 0;
        background:#51B0D4 !important;
    }

    #nav ul li ul {
        width: auto;
        left:0;

        position: relative;
        display:block !important;

        border:none;
    }

    #nav ul li ul li {
        border-bottom:none;
    }

    #nav ul li ul li ul {
        left:0;
        top:0;
    }

    #nav ul li.item1 a,#nav ul li.item2 a,#nav ul li.item3 a,#nav ul li.item4 a,#nav ul li.item5 a,
    #nav ul li.item6 a,#nav ul li.item7 a,#nav ul li.item8 a,#nav ul li.item9 a,#nav ul li.item10 a,
    #nav ul li.item11 a,#nav ul li.item12 a,#nav ul li.item13 a,#nav ul li.item14 a,#nav ul li.item15 a,
    #nav ul li.item16 a,#nav ul li.item17 a,#nav ul li.item18 a,#nav ul li.item19 a,#nav ul li.item20 a,
    #nav ul li.item21 a,#nav ul li.item22 a,#nav ul li.item23 a,#nav ul li.item24 a,#nav ul li.item25 a,
    #nav ul li.item26 a,#nav ul li.item27 a,#nav ul li.item28 a,#nav ul li.item29 a,#nav ul li.item30 a {
        background: none;
    }

    #nav ul li ul li a { text-indent: 16px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 0px 8px !important; }
    #nav ul li li li a { text-indent: 32px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 16px 8px !important; }
    #nav ul li li li li a { text-indent: 48px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 32px 8px !important; }
    #nav ul li li li li li a { text-indent: 64px; background: url(/img/bespoke/holyroodcatholic/arrow.png) no-repeat 48px 8px !important; }

    p small{
        color:black;
    }

    #content {
        width: 100% ;
        padding: 0px;
        margin: 0px;
        min-height: 200px;
    }
    .element{
        padding:10px;
        margin:10px;
    }

    #content .column {
        width: 100%;
    }
    .sj_element_slideshow ul.roundabout, .sj_element_slideshow ul.roundabout2 {
        width:100% !important;
    }

    .sj_element_slideshow ul.roundabout li.roundabout-in-focus {
        left:0% !important;
        width:100% !important;
        height:auto;
    }

    #content .sj_element_slideshow , #content .sj_element_slideshow img {
        width:auto !important;
        height:auto !important;
    }
    #content .sj_element_slideshow div.cycle div {
        width: 100% !important;
        text-align: center;

    }
    #content .element-text table td{
        padding:0px;
    }
    #content .element-text table tr td {
        display:block;
        width: 100% !important;
    }
    #content .element-text table {
        width:100% !important;
    }
    #content .element-slideshow .slideshow img {
        width:100% !important;
        height:auto !important;
    }
    #content .element-slideshow {
        width:90% !important;
        padding:10px;
    }
    #content .element-slideshow .slideshow {
        width:90% !important;
    }

    #content .element-image img{
        width:90% !important;
        height:auto;
    }

    #content .element object {
        width: 100% !important;
    }

    #content .element object embed {
        width: 100% !important;
    }
    #content .element .form {
        width: 100% !important;
    }

    #content .media-grid li.small {
        width: auto;
    }

    #content .media-grid img {
        width: auto;
    }

    #content .media-grid li.small div {
        width:auto;
    }

    #content .element-media {
        width:auto;
    }
    #content .element-media {
        width:auto;
    }
    #content .sj_div_center {
        width:auto !important;
    }
    #content .mejs-container, #content .mejs-video{
        width:100% !important;
    } 

    #footer {
        background: none repeat scroll 0 0 #013668;
        padding: 10px 0;
        width: 100%;
        color:#fff;
    }

    #footer-address {
        display:block;
    }

    .span4 {
        width: auto;
    }

}

@media (max-width: 480px) {
    #header {
        height:160px;
    }
}