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,120
    Mentioned
    448 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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,120
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,120
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •