SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header content in different screen sizes

    Hi there

    I have been updating / changing the css inside my wordpress website. However, it seems it is displaying the header content as different sizes / positions on different screen sizes?

    Please could someone point me in the right direction as to where my problem is ?

    Thank you

    Code:
    header.php:
    
    
    
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo('charset') ?>" />
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    <!-- Created by Artisteer v4.0.0.58475 -->
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php
    remove_action('wp_head', 'wp_generator');
    if (is_singular() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
    
    
    wp_head();?>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/jquery.zaccordion.js"></script>
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/jquery.zaccordion.min.js"></script>
    
    
    </head>
    <body <?php body_class(); ?>>
    
    
    <div id="art-main">
        <div class="art-sheet clearfix">
    
    
    <?php if(theme_has_layout_part("header")) : ?>
    <header class="clearfix art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?>
    
    
    <ul id="slider">
        <li>
            <img src=".../wp-content/uploads/2013/04/Pic-08.jpg" alt="" />
            <div>
                
            </div>
        </li>
        <li>
            <img src=".../wp-content/uploads/2013/04/Pic-03.jpg" alt="" />
            <div>
                
            </div>
        </li>
        <li>
            <img src=".../wp-content/uploads/2013/04/Pic-07.jpg" alt="" />
            <div>
                
            </div>
        </li>
        <li>
            <img src=".../wp-content/uploads/2013/04/Pic-04.jpg" alt="" />
            <div>
                
            </div>
        </li>
    </ul>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#slider").zAccordion({
                    easing: 'easeOutBounce',
            tabWidth: 120,
            speed: 750,
            slideClass: 'slider',
            animationStart: function () {
                $('#slider').find('li.slider-open div').css('display', 'none');
                $('#slider').find('li.slider-previous div').css('display', 'none');
            },
            animationComplete: function () {
                $('#slider').find('li div').fadeIn(650);
            },
            width: 950,
            height: 350
        });
    });
    
    
    </script>
    
    
        <div class="art-shapes">
    
    
    <div class="art-object1436837607" data-left="10.22%"></div>
    <div class="art-object1308429446" data-left="1.35%"></div>
    <div class="art-textblock art-object1596759691" data-left="32.26%">
            <div class="art-object1596759691-text"></div>
        
    </div>
                </div>
    
    
    <nav class="art-nav clearfix">
        <?php
        echo theme_get_menu(array(
                'source' => theme_get_option('theme_menu_source'),
                'depth' => theme_get_option('theme_menu_depth'),
                'menu' => 'primary-menu',
                'class' => 'art-hmenu'
            )
        );
    ?> 
        </nav>
    
    
                        
    </header>
    <?php endif; ?>
    
    
    <div class="art-layout-wrapper clearfix">
                    <div class="art-content-layout">
                        <div class="art-content-layout-row">
                            <div class="art-layout-cell art-content clearfix">
    #art-main
    {
    background: rgb(13, 63, 8);
    margin:0 auto;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    position: relative;
    width: 100%;
    min-height: 100%;
    left: 0;
    top: 0;
    cursor:default;
    overflow:hidden;
    }
    table, ul.art-hmenu
    {
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    }


    h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
    {
    margin: 0;
    padding: 0;
    }


    /* Reset buttons border. It's important for input and button tags.
    * border-collapse should be separate for shadow in IE.
    */
    .art-button
    {
    border: 0;
    border-collapse: separate;
    -webkit-background-origin: border !important;
    -moz-background-origin: border !important;
    background-origin: border-box !important;
    background: #262626;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    padding:0 5px;
    margin:0 auto;
    height:21px;
    }


    .art-postcontent,
    .art-postheadericons,
    .art-postfootericons,
    .art-blockcontent,
    ul.art-vmenu a
    {
    text-align: left;
    }


    .art-postcontent,
    .art-postcontent li,
    .art-postcontent table,
    .art-postcontent a,
    .art-postcontent a:link,
    .art-postcontent a:visited,
    .art-postcontent a.visited,
    .art-postcontent a:hover,
    .art-postcontent a.hovered
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    margin-left: 10px;
    color: #264200;
    }


    .art-postcontent p
    {
    margin: 13px 0;
    }


    .art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover,
    .art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover,
    .art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover,
    .art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover,
    .art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover,
    .art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover,
    .art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover,
    .art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover,
    .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover,
    .art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover,
    .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
    {
    font-size: 30px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    line-height: 120%;
    }


    .art-postcontent a, .art-postcontent a:link
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    color: #424242;
    }


    .art-postcontent a:visited, .art-postcontent a.visited
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    color: #808080;
    }


    .art-postcontent a:hover, .art-postcontent a.hover
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: underline;
    color: #9C9C9C;
    }


    .art-postcontent h1
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 30px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-align: left;
    }


    .art-blockcontent h1
    {
    margin: 10px 0 0;
    font-size: 30px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-align: left;
    }


    .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited
    {
    font-size: 30px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-align: left;
    }


    .art-postcontent h2
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 28px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent h2
    {
    margin: 10px 0 0;
    font-size: 28px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited
    {
    font-size: 28px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h3
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 24px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent h3
    {
    margin: 10px 0 0;
    font-size: 24px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited
    {
    font-size: 24px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h4
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 20px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent h4
    {
    margin: 10px 0 0;
    font-size: 20px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited
    {
    font-size: 20px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h5
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 16px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent h5
    {
    margin: 10px 0 0;
    font-size: 16px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited
    {
    font-size: 16px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h6
    {
    color: #264200;
    margin: 10px 0 0;
    font-size: 14px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent h6
    {
    margin: 10px 0 0;
    font-size: 14px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited
    {
    font-size: 14px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
    {
    -webkit-background-origin: border !important;
    -moz-background-origin: border !important;
    background-origin: border-box !important;
    }


    header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
    {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    ul
    {
    list-style-type: none;
    }


    ol
    {
    list-style-position: inside;
    }


    html, body
    {
    height: 100%;
    }


    body
    {
    padding: 0;
    margin:0;
    min-width: 700px;
    color: #292929;
    }


    .clearfix:before, .clearfix:after {
    content: "";
    display: table;
    }


    .clearfix:after {
    clear: both;
    }


    .cleared {
    font: 0/0 serif;
    clear: both;
    }


    form
    {
    padding: 0 !important;
    margin: 0 !important;
    }


    table.position
    {
    position: relative;
    width: 100%;
    table-layout: fixed;
    }


    li h1, .art-postcontent li h1, .art-blockcontent li h1
    {
    margin:1px;
    }
    li h2, .art-postcontent li h2, .art-blockcontent li h2
    {
    margin:1px;
    }
    li h3, .art-postcontent li h3, .art-blockcontent li h3
    {
    margin:1px;
    }
    li h4, .art-postcontent li h4, .art-blockcontent li h4
    {
    margin:1px;
    }
    li h5, .art-postcontent li h5, .art-blockcontent li h5
    {
    margin:1px;
    }
    li h6, .art-postcontent li h6, .art-blockcontent li h6
    {
    margin:1px;
    }
    li p, .art-postcontent li p, .art-blockcontent li p
    {
    margin:1px;
    }




    .art-shapes
    {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
    }


    .art-slider-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    }


    .art-slidenavigator > a {
    display: inline-block;
    vertical-align: middle;
    outline-style: none;
    font-size: 1px;
    }


    .art-slidenavigator > a:last-child {
    margin-right: 0 !important;
    }


    .art-object1436837607
    {
    display: block;
    left: 10.22%;
    margin-left: -37px;
    position: absolute;
    top: 19px;
    width: 368px;
    height: 38px;
    background-image: url('images/object1436837607.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 10;
    }
    .art-object1308429446
    {
    display: block;
    left: 1.35%;
    margin-left: 0px;
    position: absolute;
    top: 8px;
    width: 49px;
    height: 49px;
    background-image: url('images/object1308429446.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 11;
    }
    .art-object1596759691 h1,
    .art-object1596759691 h2,
    .art-object1596759691 h3,
    .art-object1596759691 h4,
    .art-object1596759691 h5,
    .art-object1596759691 h6,
    .art-object1596759691 p,
    .art-object1596759691 a,
    .art-object1596759691 ul,
    .art-object1596759691 ol,
    .art-object1596759691 li
    {
    line-height: 125%;
    }


    .art-object1596759691
    {
    position: absolute;
    top: 76px;
    left: 32.26%;
    margin-left: -313px !important;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    overflow: hidden;
    background-image: url('');
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 12;
    width: 973px;
    height: 380px;
    background-color: rgb(13, 63, 8);
    }


    .art-object1596759691-text
    {
    font-size: 30px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-align: left;
    vertical-align: middle;
    color: #FFFFFF !important;
    display: table-cell;
    outline-style: none;
    padding: 0px 0px !important;
    word-wrap: break-word;
    height: 380px;
    width: 973px;
    }


    .art-textblock ul > li
    {
    background-position-y: 8px !important;
    }












    .art-sheet
    {
    background: #FFFFFF;
    -webkit-box-shadow:1px 1px 3px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:1px 1px 3px 2px rgba(0, 0, 0, 0.4);
    box-shadow:1px 1px 3px 2px rgba(0, 0, 0, 0.4);
    padding:7px;
    margin:30px auto 0;
    position:relative;
    cursor:auto;
    width: 90%;
    min-width: 700px;
    max-width: 1728px;
    z-index: auto !important;
    }


    .art-header
    {
    margin:0 auto;
    height: 450px;
    background-image: url('images/header.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    z-index: auto !important;
    }


    .responsive .art-header
    {
    background-image: url('images/header.jpg');
    background-position: center center;
    }


    .art-header>.widget
    {
    position:absolute;
    z-index:101;
    }


    .art-nav
    {
    background: none;
    background: transparent;
    padding:6px;
    z-index: 100;
    font-size: 0;
    position: absolute;
    margin: 0;
    top: 10px;
    width: 100%;
    text-align: right;
    padding-right: 22px;


    }


    ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
    {
    outline: none;
    position: relative;
    z-index: 11;
    }


    ul.art-hmenu, ul.art-hmenu ul
    {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    }


    ul.art-hmenu li
    {
    position: relative;
    z-index: 5;
    display: block;
    float: left;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
    }


    ul.art-hmenu li:hover
    {
    z-index: 10000;
    white-space: normal;
    }


    ul.art-hmenu:after, ul.art-hmenu ul:after
    {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
    }


    ul.art-hmenu, ul.art-hmenu ul
    {
    min-height: 0;
    }


    ul.art-hmenu
    {
    display: inline-block;
    vertical-align: middle;

    }


    .art-nav:before
    {
    content:' ';
    }


    .art-hmenu-extra1
    {
    position: relative;
    display: block;
    float: left;
    width: auto;
    height: auto;
    background-position: center;
    }


    .art-hmenu-extra2
    {
    position: relative;
    display: block;
    float: right;
    width: auto;
    height: auto;
    background-position: center;
    }


    .art-hmenu
    {
    float: right;
    }


    .art-menuitemcontainer
    {
    margin:0 auto;
    }
    ul.art-hmenu>li {
    margin-left: 13px;
    }
    ul.art-hmenu>li:first-child {
    margin-left: 6px;
    }
    ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
    margin-right: 6px;
    }


    ul.art-hmenu>li>a
    {
    padding:0 17px;
    margin:0 auto;
    position: relative;
    display: block;
    height: 30px;
    cursor: pointer;
    text-decoration: none;
    color: #878787;
    line-height: 30px;
    text-align: center;
    }


    .art-hmenu a,
    .art-hmenu a:link,
    .art-hmenu a:visited,
    .art-hmenu a.active,
    .art-hmenu a:hover
    {
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;

    }


    ul.art-hmenu>li>a.active
    {
    padding:0 17px;
    margin:0 auto;
    color: #000000;
    text-decoration: none;
    background-color: #FFD800;
    }


    ul.art-hmenu>li>a:visited,
    ul.art-hmenu>li>a:hover,
    ul.art-hmenu>li:hover>a {
    text-decoration: none;

    }


    ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
    {
    background: #FFD900;
    padding:0 17px;
    margin:0 auto;
    }
    ul.art-hmenu>li>a:hover,
    .desktop-nav ul.art-hmenu>li:hover>a {
    color: #000000;
    text-decoration: none;

    }


    ul.art-hmenu>li:before
    {
    position:absolute;
    display: block;
    content:' ';
    top:0;
    left: -13px;
    width:13px;
    height: 30px;
    background: url('images/menuseparator.png') center center no-repeat;
    }
    ul.art-hmenu>li:first-child:before{
    display:none;
    }


    ul.art-hmenu li li a
    {
    background: #949494;
    background: transparent;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    padding:0 22px;
    margin:0 auto;
    }
    ul.art-hmenu li li
    {
    float: none;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    }


    .desktop-nav ul.art-hmenu li li ul>li:first-child
    {
    margin-top: 0;
    }


    ul.art-hmenu li li ul>li:last-child
    {
    margin-bottom: 0;
    }


    .art-hmenu ul a
    {
    display: block;
    white-space: nowrap;
    height: 28px;
    min-width: 7em;
    border: 0 solid transparent;
    text-align: left;
    line-height: 28px;
    color: #1C1C1C;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    margin:0;
    }


    .art-hmenu ul a:link,
    .art-hmenu ul a:visited,
    .art-hmenu ul a.active,
    .art-hmenu ul a:hover
    {
    text-align: left;
    line-height: 28px;
    color: #1C1C1C;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    margin:0;
    }


    ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
    {
    background: #363636;
    background: transparent;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    margin:0 auto;
    }
    .art-hmenu ul a:hover
    {
    text-decoration: none;
    }


    .art-hmenu ul li a:hover
    {
    color: #000000;
    }


    .desktop-nav .art-hmenu ul li:hover>a
    {
    color: #000000;
    }


    ul.art-hmenu ul:before
    {
    background: #FED448;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    margin:0 auto;
    display: block;
    position: absolute;
    content: ' ';
    z-index: 1;
    }
    .desktop-nav ul.art-hmenu li:hover>ul {
    visibility: visible;
    top: 100%;
    }
    .desktop-nav ul.art-hmenu li li:hover>ul {
    top: 0;
    left: 100%;
    }


    ul.art-hmenu ul
    {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background-image: url('images/spacer.gif');
    }


    .desktop-nav ul.art-hmenu>li>ul
    {
    padding: 30px 40px 40px 40px;
    margin: -10px 0 0 -30px;
    }


    .desktop-nav ul.art-hmenu ul ul
    {
    padding: 40px 40px 40px 21px;
    margin: -40px 0 0 0;
    }


    .desktop-nav ul.art-hmenu ul.art-hmenu-left-to-right
    {
    right: auto;
    left: 0;
    margin: -10px 0 0 -30px;
    }


    .desktop-nav ul.art-hmenu ul.art-hmenu-right-to-left
    {
    left: auto;
    right: 0;
    margin: -10px -30px 0 0;
    }


    .desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
    right: auto;
    left: 100%;
    }
    .desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
    left: auto;
    right: 100%;
    }


    .desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right
    {
    right: auto;
    left: 0;
    padding: 40px 40px 40px 21px;
    margin: -40px 0 0 0;
    }


    .desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left
    {
    left: auto;
    right: 0;
    padding: 40px 21px 40px 40px;
    margin: -40px 0 0 0;
    }


    .desktop-nav ul.art-hmenu li ul>li:first-child {
    margin-top: 0;
    }
    .desktop-nav ul.art-hmenu li ul>li:last-child {
    margin-bottom: 0;
    }


    .desktop-nav ul.art-hmenu ul ul:before
    {
    border-radius: 7px;
    top: 30px;
    bottom: 30px;
    right: 30px;
    left: 11px;
    }


    .desktop-nav ul.art-hmenu>li>ul:before
    {
    top: 20px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    }


    .desktop-nav ul.art-hmenu>li>ul.art-hmenu-left-to-right:before {
    right: 30px;
    left: 30px;
    }
    .desktop-nav ul.art-hmenu>li>ul.art-hmenu-right-to-left:before {
    right: 30px;
    left: 30px;
    }
    .desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right:before {
    right: 30px;
    left: 11px;
    }
    .desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left:before {
    right: 11px;
    left: 30px;
    }


    .art-layout-wrapper
    {
    position: relative;
    margin: 10px auto 0 auto;
    z-index: auto !important;
    }


    .art-content-layout
    {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    }


    .art-content-layout-row
    {
    display: table-row;
    }


    .art-layout-cell
    {
    display: table-cell;
    vertical-align: top;
    }


    .art-breadcrumbs
    {
    margin:0 auto;
    }


    a.art-button,
    a.art-button:link,
    a:link.art-button:link,
    body a.art-button:link,
    a.art-button:visited,
    body a.art-button:visited,
    input.art-button,
    button.art-button
    {
    text-decoration: none;
    font-size: 14px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    position:relative;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    color: #CCCCCC;
    margin: 0 !important;
    overflow: visible;
    cursor: pointer;
    text-indent: 0;
    line-height: 21px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    }


    .art-button img
    {
    margin: 0;
    vertical-align: middle;
    }


    .firefox2 .art-button
    {
    display: block;
    float: left;
    }


    input, select, textarea
    {
    vertical-align: middle;
    font-size: 14px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    }


    .art-block select
    {
    width:96%;
    }


    input.art-button
    {
    float: none !important;
    }


    .art-button.active, .art-button.active:hover
    {
    background: #363636;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    border:1px solid #241E00;
    padding:0 5px;
    margin:0 auto;
    }
    .art-button.active, .art-button.active:hover {
    color: #FFF2A8 !important;
    }


    .art-button.hover, .art-button:hover
    {
    background: #DBBA00;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.25);
    border:1px solid transparent;
    padding:0 5px;
    margin:0 auto;
    }
    .art-button.hover, .art-button:hover {
    color: #DEDEDE !important;
    }


    input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea
    {
    background: #FFFFFF;
    border:1px solid #696969;
    margin:0 auto;
    }
    input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea
    {
    width: 100%;
    padding: 10px 0;
    color: #292929 !important;
    font-size: 14px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    }
    input.art-error, textarea.art-error
    {
    background: #FFFFFF;
    background: linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    background: -webkit-linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    background: -moz-linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    background: -o-linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    background: -ms-linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    background: linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    -svg-background: linear-gradient(top, #CCCCCC 0, #E3E3E3 50%, #C7C7C7 50%, #DBDBDB 100%) no-repeat;
    border:1px solid #E2341D;
    margin:0 auto;
    }
    input.art-error, textarea.art-error {
    color: #292929 !important;
    font-size: 14px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    }
    form.art-search input[type="text"]
    {
    background: #FFFFFF;
    border-radius: 0;
    border:1px solid #696969;
    margin:0 auto;
    width: 100%;
    padding: 10px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #292929 !important;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    }
    form.art-search
    {
    background-image: none;
    border: 0;
    display:block;
    position:relative;
    top:0;
    padding:0;
    margin:5px;
    left:0;
    line-height: 0;
    }


    form.art-search input
    {
    top:0;
    right:0;
    }


    form.art-search>input {
    bottom:0;
    left:0;
    vertical-align: middle;
    }


    form.art-search input[type="submit"]
    {
    margin:0 auto;
    color: #DEDEDE !important;
    position:absolute;
    display:block;
    left: auto;
    border:none;
    background:url('images/searchicon.png') center center no-repeat;
    width:24px;
    height: 100%;
    padding:0;
    }


    label.art-checkbox:before
    {
    background: #FFFFFF;
    background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -webkit-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -moz-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -o-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -ms-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    -svg-background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #474747;
    margin:0 auto;
    width:16px;
    height:16px;
    }
    label.art-checkbox
    {
    cursor: pointer;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    line-height: 16px;
    display: inline-block;
    }


    .art-checkbox>input[type="checkbox"]
    {
    margin: 0 5px 0 0;
    }


    label.art-checkbox.active:before
    {
    background: #949494;
    background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -webkit-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -moz-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -o-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -ms-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    -svg-background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #363636;
    margin:0 auto;
    width:16px;
    height:16px;
    display: inline-block;
    }


    label.art-checkbox.hovered:before
    {
    background: #FFF2A8;
    background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -webkit-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -moz-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -o-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -ms-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    -svg-background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #595959;
    margin:0 auto;
    width:16px;
    height:16px;
    display: inline-block;
    }


    label.art-radiobutton:before
    {
    background: #FFFFFF;
    background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -webkit-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -moz-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -o-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: -ms-linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    -svg-background: linear-gradient(top, #F2F2F2 0, #D4D4D4 40%, #D1D1D1 50%, #D4D4D4 60%, #F2F2F2 100%) no-repeat;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #474747;
    margin:0 auto;
    width:12px;
    height:12px;
    }
    label.art-radiobutton
    {
    cursor: pointer;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    line-height: 12px;
    display: inline-block;
    }


    .art-radiobutton>input[type="radio"]
    {
    vertical-align: baseline;
    margin: 0 5px 0 0;
    }


    label.art-radiobutton.active:before
    {
    background: #949494;
    background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -webkit-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -moz-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -o-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: -ms-linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    -svg-background: linear-gradient(top, #A3A3A3 0, #8C8C8C 40%, #8A8A8A 50%, #8C8C8C 60%, #A3A3A3 100%) no-repeat;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #363636;
    margin:0 auto;
    width:12px;
    height:12px;
    display: inline-block;
    }


    label.art-radiobutton.hovered:before
    {
    background: #FFF2A8;
    background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -webkit-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -moz-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -o-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: -ms-linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    -svg-background: linear-gradient(top, #FFF7C7 0, #FFEF94 40%, #FFED8A 50%, #FFEF94 60%, #FFF7C7 100%) no-repeat;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.3);
    border:1px solid #595959;
    margin:0 auto;
    width:12px;
    height:12px;
    display: inline-block;
    }


    .art-block
    {
    margin:3px;
    }
    div.art-block img
    {
    border: 1px dashed #FFE657;
    margin: 0;
    }


    .art-blockheader
    {
    padding:12px 7px;
    margin:0 auto;
    }
    .art-blockheader .t,
    .art-blockheader .t a,
    .art-blockheader .t a:link,
    .art-blockheader .t a:visited,
    .art-blockheader .t a:hover
    {
    color: #141414;
    font-size: 24px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    margin: 0 10px;
    }


    .art-blockcontent
    {
    padding:7px;
    margin:0 auto;
    color: #292929;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }
    .art-blockcontent table,
    .art-blockcontent li,
    .art-blockcontent a,
    .art-blockcontent a:link,
    .art-blockcontent a:visited,
    .art-blockcontent a:hover
    {
    color: #292929;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-blockcontent p
    {
    margin: 0 5px;
    }


    .art-blockcontent a, .art-blockcontent a:link
    {
    color: #264200;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    }


    .art-blockcontent a:visited, .art-blockcontent a.visited
    {
    color: #264200;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    }


    .art-blockcontent a:hover, .art-blockcontent a.hover
    {
    color: #FFD900;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    }
    .art-block ul>li:before
    {
    content:url('images/blockbullets.png');
    margin-right:6px;
    bottom: 2px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:0;
    margin-left: -11px;
    }
    .opera .art-block ul>li:before
    {
    /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
    }


    .art-block li
    {
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    line-height: 125%;
    color: #292929;
    }


    .art-block ul>li, .art-block ol
    {
    padding: 0;
    }


    .art-block ul>li
    {
    padding-left: 11px;
    }


    .art-post
    {
    padding:3px;
    margin:3px;
    }
    a img
    {
    border: 0;
    }


    .art-article img, img.art-article, .art-block img, .art-footer img
    {
    margin: 10px 10px 10px 10px;
    }


    .art-metadata-icons img
    {
    border: none;
    vertical-align: middle;
    margin: 2px;
    }


    .art-article table, table.art-article
    {
    border-collapse: collapse;
    margin: 1px;
    }


    .art-post .art-content-layout-br
    {
    height: 0;
    }


    .art-article th, .art-article td
    {
    padding: 2px;
    border: dashed 1px #241E00;
    vertical-align: top;
    text-align: left;
    }


    .art-article th
    {
    text-align: center;
    vertical-align: middle;
    padding: 7px;
    }


    pre
    {
    overflow: auto;
    padding: 0.1em;
    }


    .preview-cms-logo
    {
    border: 0;
    margin: 1em 1em 0 0;
    float: left;
    }


    .image-caption-wrapper
    {
    padding: 10px 10px 10px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    .image-caption-wrapper img
    {
    margin: 0 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    .image-caption-wrapper div.art-collage
    {
    margin: 0 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    .image-caption-wrapper p
    {
    font-size: 80%;
    text-align: right;
    margin: 0;
    }


    .art-postheader
    {
    color: #013300;
    margin: 6px 0;
    font-size: 22px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    margin-left: 8px;
    }


    .art-postheader a,
    .art-postheader a:link,
    .art-postheader a:visited,
    .art-postheader a.visited,
    .art-postheader a:hover,
    .art-postheader a.hovered
    {
    font-size: 26px;
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    }


    .art-postheader a, .art-postheader a:link
    {
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    text-align: left;
    color: #264200;
    }


    .art-postheader a:visited, .art-postheader a.visited
    {
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    color: #FFE23D;
    }


    .art-postheader a:hover, .art-postheader a.hovered
    {
    font-family: Arimo, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    color: #FFD900;
    }


    .art-postheadericons,
    .art-postheadericons a,
    .art-postheadericons a:link,
    .art-postheadericons a:visited,
    .art-postheadericons a:hover
    {
    font-size: 12px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    color: #141414;
    }


    .art-postheadericons
    {
    display:inline-block;
    padding: 1px;
    }


    .art-postheadericons a, .art-postheadericons a:link
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    color: #1C1C1C;
    }


    .art-postheadericons a:visited, .art-postheadericons a.visited
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    color: #1C1C1C;
    }


    .art-postheadericons a:hover, .art-postheadericons a.hover
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-decoration: underline;
    color: #595959;
    }


    .art-postpdficon:before
    {
    content:url('images/postpdficon.png');
    margin-right:6px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:0;
    bottom: auto;
    }
    .opera .art-postpdficon:before
    {
    /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
    }


    .art-postprinticon:before
    {
    content:url('images/postprinticon.png');
    margin-right:6px;
    bottom: 2px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:0;
    }
    .opera .art-postprinticon:before
    {
    /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
    }


    .art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before
    {
    content:url('images/postbullets.png');
    margin-right:6px;
    bottom: 2px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:0;
    }
    .opera .art-postcontent ul>li:before, .opera .art-post ul>li:before, .opera .art-textblock ul>li:before
    {
    /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
    }


    .art-postcontent li, .art-post li, .art-textblock li
    {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    color: #141414;
    margin: 5px 0 5px 13px;
    }


    .art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li, .art-postcontent ol, .art-post ol, .art-textblock ol
    {
    padding: 0;
    }


    .art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
    {
    padding-left: 21px;
    }


    .art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before
    {
    margin-left: -21px;
    }


    .art-postcontent ol, .art-post ol, .art-textblock ol, .art-postcontent ul, .art-post ul, .art-textblock ul
    {
    margin: 1em 0 1em 13px;
    }


    .art-postcontent li ol, .art-post li ol, .art-textblock li ol, .art-postcontent li ul, .art-post li ul, .art-textblock li ul
    {
    margin: 0.5em 0 0.5em 13px;
    }


    .art-postcontent li, .art-post li, .art-textblock li
    {
    margin: 5px 0 5px 0;
    }


    .art-postcontent ol>li, .art-post ol>li, .art-textblock ol>li
    {
    /* overrides overflow for "ul li" and sets the default value */
    overflow: visible;
    }


    .art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
    {
    /* makes "ul li" not to align behind the image if they are in the same line */
    overflow-x: visible;
    overflow-y: hidden;
    }


    blockquote
    {
    background: #FFE657 url('images/postquote.png') no-repeat scroll;
    padding:12px 12px 12px 49px;
    margin:0 0 0 5px;
    color: #0A0A0A;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: italic;
    /* makes block not to align behind the image if they are in the same line */
    overflow: auto;
    clear:both;
    }
    blockquote a, .art-postcontent blockquote a, .art-blockcontent blockquote a, .art-footer blockquote a,
    blockquote a:link, .art-postcontent blockquote a:link, .art-blockcontent blockquote a:link, .art-footer blockquote a:link,
    blockquote a:visited, .art-postcontent blockquote a:visited, .art-blockcontent blockquote a:visited, .art-footer blockquote a:visited,
    blockquote a:hover, .art-postcontent blockquote a:hover, .art-blockcontent blockquote a:hover, .art-footer blockquote a:hover
    {
    color: #0A0A0A;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: italic;
    }


    /* Override native 'p' margins*/
    blockquote p,
    .art-postcontent blockquote p,
    .art-blockcontent blockquote p,
    .art-footer blockquote p
    {
    margin: 0;
    }


    .art-footer
    {
    margin:10px auto 0;
    position: relative;
    color: #000000;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-align: center;
    padding: 0;
    width: 90%;
    margin-top:0;
    background-color:#FFD800;
    }


    .art-footer a,
    .art-footer a:link,
    .art-footer a:visited,
    .art-footer a:hover,
    .art-footer td,
    .art-footer th,
    .art-footer caption
    {
    color: #B5B5B5;
    font-size: 13px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }


    .art-footer p
    {
    padding:0;
    text-align: center;
    }


    .art-footer a,
    .art-footer a:link
    {
    color: #DBBA00;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    }


    .art-footer a:visited
    {
    color: #636363;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: none;
    }


    .art-footer a:hover
    {
    color: #FFDC14;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-decoration: underline;
    }


    .art-footer img
    {
    border: none;
    margin: 0;
    }


    .art-footer-inner
    {
    margin: 0 auto;
    min-width: 700px;
    max-width: 1728px;
    width:90%;
    padding:8px;
    padding-right: 15px;
    padding-left: 15px;
    }


    .art-rss-tag-icon
    {
    background: url('images/footerrssicon.png') no-repeat scroll;
    margin:0 auto;
    min-height:32px;
    min-width:32px;
    display: inline-block;
    text-indent: 35px;
    background-position: left center;
    }


    .art-rss-tag-icon:empty
    {
    vertical-align: middle;
    }


    .art-footer ul>li:before
    {
    content:url('images/footerbullets.png');
    margin-right:6px;
    bottom: 2px;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:0;
    margin-left: -10px;
    }
    .opera .art-footer ul>li:before
    {
    /* Vertical-align:middle in Opera doesn't need additional offset */
    bottom: 0;
    }


    .art-footer li
    {
    font-size: 14px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    line-height: 125%;
    color: #B5B5B5;
    }


    .art-footer ul>li, .art-footer ol
    {
    padding: 0;
    }


    .art-footer ul>li
    {
    padding-left: 10px;
    }


    .art-page-footer,
    .art-page-footer a,
    .art-page-footer a:link,
    .art-page-footer a:visited,
    .art-page-footer a:hover
    {
    font-family: Arial;
    font-size: 10px;
    letter-spacing: normal;
    word-spacing: normal;
    font-style: normal;
    font-weight: normal;
    text-decoration: underline;
    color: green;
    }


    .art-page-footer
    {
    position: relative;
    z-index: auto !important;
    padding: 1em;
    text-align: center !important;
    text-decoration: none;
    color: green;
    }


    img.art-lightbox
    {
    cursor: pointer;
    }


    #art-lightbox-bg *
    {
    padding: 0;
    margin: 0;
    }


    div#art-lightbox-bg
    {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 9999;
    }


    img.art-lightbox-image
    {
    -webkit-transition: opacity 350ms ease-in-out;
    -moz-transition: opacity 350ms ease-in-out;
    -o-transition: opacity 350ms ease-in-out;
    -ms-transition: opacity 350ms ease-in-out;
    transition: opacity 350ms ease-in-out;
    cursor: pointer;
    z-index: 10000;
    position: fixed;
    border: 6px solid #fff;
    border-radius: 3px;
    opacity: 0;
    filter: alpha(opacity=0);
    }


    img.art-lightbox-image.active
    {
    opacity: 1;
    filter: alpha(opacity=100);
    }


    .lightbox-error
    {
    position: fixed;
    background: #fff;
    z-index: 100;
    opacity: 0.95;
    padding: 20px;
    border: 1px solid #b4b4b4;
    border-radius: 10px;
    box-shadow: 0 2px 5px #333;
    width: 300px;
    height: 80px;
    }


    .loading
    {
    position: fixed;
    background: #fff url('images/preloader-01.gif') center center no-repeat;
    width: 32px;
    height: 32px;
    z-index: 10100;
    opacity: 0.5;
    padding: 10px;
    border: 1px solid #b4b4b4;
    border-radius: 10px;
    box-shadow: 0 2px 5px #333;
    }


    .arrow
    {
    height: 100px;
    width: 82px;
    z-index: 10003;
    position: fixed;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
    }


    .arrow.left
    {
    left: 9px;
    }
    .arrow.right
    {
    right: 9px;
    }


    .arrow:hover
    {
    opacity: 1;
    filter: alpha(opacity=100);
    }


    .arrow.disabled
    {
    display: none;
    }


    .arrow-t, .arrow-b
    {
    height: 6px;
    width: 30px;
    left: 26px;
    background-color: #fff;
    position: relative;
    border-radius: 3px;
    }


    .arrow-t
    {
    top: 38px;
    }


    .arrow-b
    {
    top: 50px;
    }


    .close
    {
    width: 22px;
    height: 22px;
    position: fixed;
    top: 30px;
    right: 39px;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
    }


    .close:hover
    {
    opacity: 1;
    filter: alpha(opacity=100);
    }


    .close .cw, .close .ccw
    {
    position: absolute;
    top: 8px;
    left: -4px;
    width: 30px;
    height: 6px;
    background-color: #fff;
    border-radius: 3px;
    }


    .cw
    {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Safari and Chrome */
    -o-transform: rotate(45deg);
    /* Opera */
    -moz-transform: rotate(45deg);
    /* Firefox */}


    .ccw
    {
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    /* IE 9 */
    -webkit-transform: rotate(-45deg);
    /* Safari and Chrome */
    -o-transform: rotate(-45deg);
    /* Opera */
    -moz-transform: rotate(-45deg);
    /* Firefox */}


    .close-alt, .arrow-right-alt, .arrow-left-alt
    {
    display: none;
    color: #fff;
    font-size: 2.5em;
    }


    .ie8 .close-alt, .ie8 .arrow-right-alt, .ie8 .arrow-left-alt {
    display: block;
    }
    .ie8 .cw, .ie8 .ccw {
    display: none;
    }


    .art-content-layout .art-content
    {
    margin:0 auto;
    }


    .art-content-layout .art-sidebar1
    {
    border-left:1px solid #7A7A7A;
    margin:0 auto;
    width: 200px;
    }






    textarea#comment
    {
    width:99%;
    }


    ul#comments-list div.avatar
    {
    float:right;
    }


    ul#comments-list, ul#comments-list li
    {
    background: none;
    padding:0;
    }


    ul#comments-list li li
    {
    margin-left: 20px;
    }


    div.avatar
    {
    position:relative;
    margin: 7px;
    border: 1px solid #aaa;
    padding: 1px;
    background: #fff;
    float:left;
    }


    div.avatar img, div.avatar img.wp-post-image
    {
    margin:0 !important;
    padding:0;
    border:none;
    }


    span.page-navi-outer, span.page-navi-inner
    {
    position:relative;
    display:block;
    float:left;
    margin:0;
    padding:0;
    }


    span.page-navi-outer
    {
    margin: 1px;
    border: 1px solid #aaa;
    }


    span.page-navi-inner
    {
    padding: 1px;
    min-width:14px;
    line-height:18px;
    text-align:center;
    border: 2px solid #fff;
    font-weight:bold;
    }


    a span.page-navi-inner, span.page-navi-caption span.page-navi-inner
    {
    border-width:1px;
    font-weight:normal;
    }


    a span.page-navi-outer, span.page-navi-caption
    {
    margin:2px 1px;
    }


    ul#comments-list li cite
    {
    font-size: 1.2em;
    }


    #commentform textarea
    {
    width: 100%;
    }


    #commentform
    {
    text-align:left;
    }


    .rtl #commentform
    {
    text-align:right;
    }


    img.wp-smiley
    {
    border: none;
    margin: 1px;
    vertical-align:middle;
    padding: 0;
    }


    .navigation
    {
    display: block;
    text-align: center;
    }


    /* Recommended by http://codex.wordpress.org/CSS */
    /* Begin */
    .aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }


    p.aligncenter , p.center
    {
    text-align: center;
    }


    .alignleft
    {
    float: left;
    }


    .alignright
    {
    float: right;
    }


    .wp-caption
    {
    border: 1px solid #ddd;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    }


    .wp-caption img
    {
    margin: 0;
    padding: 0;
    border: 0 none;
    }


    .wp-caption p.wp-caption-text
    {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }


    .wp-caption, .wp-caption p
    {
    text-align: center;
    }


    .gallery {
    margin: 0 auto 18px;
    clear:both;
    overflow:hidden;
    }


    .gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33%;
    }
    .gallery img {
    border: 2px solid #cfcfcf;
    }


    .gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 12px;
    }


    .gallery dl {
    margin: 0;
    }


    .gallery img {
    border: 10px solid #f1f1f1;
    }


    .gallery br+br {
    display: none;
    }
    /* End */




    .hidden
    {
    display: none;
    }


    /* Calendar */
    #wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }


    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }


    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }


    #wp-calendar a {
    display: block;
    }


    #wp-calendar caption {
    text-align: center;
    width: 100%;
    }


    #wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }


    .gallery {
    letter-spacing: normal;
    }


    .art-content {
    position: relative;
    z-index: 1;
    }


    #todays-events{
    position: relative;
    z-index: 11;
    }


    #upcoming-events{
    position: relative;
    z-index: 10;
    }


    img.wp-post-image
    {
    margin:0 5px 5px 0 !important;
    }


    ul#comments-list li
    {
    list-style-image: none;
    background:none;
    list-style-type:none;

    }


    div.art-footer div.art-content-layout
    {
    margin:0 auto;
    width:100%;
    }


    div.art-layout-cell-size1
    {
    width:100%;
    }


    div.art-layout-cell-size2
    {
    width:50%;
    }
    div.art-layout-cell-size3
    {
    width:33%;
    }


    div.art-layout-cell-size4
    {
    width:25%;
    }


    .art-widget-title
    {
    padding:0 0 0 24px;
    margin-bottom:0;
    }


    div.art-center-wrapper
    {
    position: relative;
    float: right;
    right: 50%;


    }


    div.art-center-inner
    {
    position: relative;
    float: left;
    left: 50%;
    }


    .firefox2 div.art-center-inner
    {
    float: none;
    }


    div.breadcrumbs h4,
    div.breadcrumbs p,
    li.pingback p,
    #respond p,
    h3#reply-title,
    h4#comments,
    h4.box-title
    {
    margin:0;
    }


    #respond .comment-notes {
    margin-bottom: 1em;
    }


    .form-allowed-tags {
    line-height: 1em;
    }


    #comments-list #respond {
    margin-left: 23px !important;
    }


    #cancel-comment-reply-link {
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    }


    #respond .required {
    color: #ff4b33;
    font-weight: bold;
    }


    #respond label {
    font-size: 12px;
    }


    #respond input {
    margin: 0 0 9px;
    width: 98%;
    }


    #respond textarea {
    width: 98%;
    }


    #respond .form-allowed-tags {
    font-size: 12px;
    line-height: 18px;
    }


    #respond .form-allowed-tags code {
    font-size: 11px;
    }


    #respond .form-submit {
    margin: 12px 0;
    }


    #respond .form-submit input {
    width: auto;
    }


    .art-footer .art-widget-title
    {
    font-size:1.2em;
    padding: 0;
    }


    .art-footer .art-widget,
    .art-footer .art-widget a,
    .art-footer .art-widget a:link,
    .art-footer .art-widget a:visited,
    .art-footer .art-widget a:hover
    {
    text-align: left;
    }


    DIV[id^="GMPmap"] IMG
    {
    margin: 0px;
    }


    /* Begin Additional CSS Styles */


    #slider {background-color:rgba(0,0,0,0.5);bottom:0;height:100px;left:0;position:absolute;width:100%;z-index:10;}
    #slider .slider-closed {width:100px;}
    #slider strong {color:#fff;display:block;margin-bottom:5px;padding:10px 10px 0;text-shadow:none;}
    #slider p {color:#fff;display:block;font-size:14px;padding:0 10px;text-shadow:none;}
    #slider .slider-open strong {color:#fff;font-size:22px;}
    #slider .slider-closed strong {font-size:18px;margin-bottom:5px;}
    #slider .slider-closed p {display:none;}
    ul#slider {top:90px; left:20px; }


  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yikes, what do you expect us to do with all that code? Because it's got PHP in it, we can't even reorganize it and test it in our browsers. Ideally, post a link to your site so we can have a look. Otherwise, see if you can grab the relevant CSS and HTML, and stick it into a simple template like this that we can test—example below. (Make sure to paste your code into a .html file and test it in your browser first, to make sure it demonstrates the problem.)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that

    Here is a link to the site: http://www.dwcraning.run-time.co.za

    Thank you so much for your reply

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah, that's better.

    Your site includes a "responsive.css" file that includes @media rules—that is, alternate CSS styles—for different screen sizes. If you don't want that to happen, you could just disable that style sheet.

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. I tried removing that style sheet, but they my image "accordion" stopped working? It just put all the images underneath one another on the page?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, that probably means you'll need to pick through the responsive.css file and strip out the bits you don't want. I would suggest you keep a copy of the original, then gradually delete bits you don't think are needed and test the results as you go, making sure nothing critical is being removed.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •