templates/art41_sample1/css/template.responsive.css

   1 /* Created by Artisteer v4.1.0.59688 */
   2
   3 .responsive body
   4 {
   5    min-width: 240px;
   6 }
   7
   8 .responsive .art-content-layout img,
   9 .responsive .art-content-layout video
  10 {
  11    max-width: 100%;
  12    height: auto !important;
  13 }
  14
  15 .responsive.responsive-phone .art-content-layout img
  16 {
  17    float: none !important;
  18 }
  19
  20 .responsive .art-content-layout .art-sidebar0,
  21 .responsive .art-content-layout .art-sidebar1,
  22 .responsive .art-content-layout .art-sidebar2
  23 {
  24    width: auto !important;
  25 }
  26
  27 .responsive .art-content-layout,
  28 .responsive .art-content-layout-row,
  29 .responsive .art-layout-cell
  30 {
  31    display: block;
  32 }
  33
  34 .responsive .image-caption-wrapper
  35 {
  36    width: auto;
  37 }
  38
  39 .responsive.responsive-tablet .art-vmenublock,
  40 .responsive.responsive-tablet .art-block
  41 {
  42    margin-left: 1%;
  43    margin-right: 1%;
  44    width: 48%;
  45    float: left;
  46    -webkit-box-sizing: border-box;
  47    -moz-box-sizing: border-box;
  48    box-sizing: border-box;
  49 }
  50
  51 .responsive .art-responsive-embed
  52 {
  53    position: relative;
  54    padding-bottom: 56.25%;
  55    /* 16:9 */
  56         height: 0;
  57 }
  58
  59 .responsive .art-responsive-embed iframe,
  60 .responsive .art-responsive-embed object,
  61 .responsive .art-responsive-embed embed
  62 {
  63    position: absolute;
  64    top: 0;
  65    left: 0;
  66    width: 100%;
  67    height: 100%;
  68 }
  69
  70 .responsive .art-header
  71 {
  72    width: auto;
  73    height: auto;
  74    min-height: 100px;
  75    min-width: 1%;
  76    margin-right: 1% !important;
  77    margin-left: 1% !important;
  78    background-position: center center !important;
  79    background-size: cover !important;
  80    background-repeat: repeat !important;
  81 }
  82
  83 .responsive .art-header .art-headline,
  84 .responsive .art-header .art-slogan
  85 {
  86    display: block !important;
  87    top: 0 !important;
  88    left: 0 !important;
  89    margin: 2% !important;
  90 }
  91
  92 .responsive .art-header .art-headline a,
  93 .responsive .art-header .art-slogan
  94 {
  95    white-space: normal !important;
  96 }
  97
  98 .responsive .art-header .art-shapes .art-textblock
  99 {
 100    padding: 2% !important;
 101    margin: 2% !important;
 102    line-height: normal;
 103    background-image: none;
 104    background-color: rgba(127, 127, 127, 0.7);
 105    color: #eee !important;
 106    display: none;
 107    top: auto;
 108    left: auto;
 109    width: auto;
 110    height: auto;
 111 }
 112
 113 .responsive .art-header .art-shapes .art-textblock *,
 114 .responsive .art-header .art-shapes .art-textblock a:hover,
 115 .responsive .art-header .art-shapes .art-textblock a:visited,
 116 .responsive .art-header .art-shapes .art-textblock a:link
 117 {
 118    color: #eee !important;
 119 }
 120
 121 .responsive .art-header .art-shapes .art-textblock>div
 122 {
 123    display: none;
 124    top: auto;
 125    left: auto;
 126    width: auto;
 127    height: auto;
 128    padding: 0 !important;
 129 }
 130
 131 .responsive .art-header .art-shapes,
 132 .responsive .art-header .art-shapes *
 133 {
 134    position: relative;
 135    text-align: center;
 136    -webkit-transform: none !important;
 137    -moz-transform: none !important;
 138    -o-transform: none !important;
 139    -ms-transform: none !important;
 140    transform: none !important;
 141 }
 142
 143 .responsive .art-header #art-flash-area,
 144 .responsive .art-header .art-shapes>*
 145 {
 146    display: none;
 147 }
 148
 149 .responsive #art-header-bg
 150 {
 151    background-position: center center !important;
 152    background-size: cover !important;
 153    background-repeat: repeat !important;
 154 }
 155
 156 /* Search */
 157 .responsive .art-shapes~.art-textblock
 158 {
 159    position: relative !important;
 160    display: block !important;
 161    margin: 1% auto !important;
 162    width: 75% !important;
 163    top: auto !important;
 164    right: auto !important;
 165    bottom: auto !important;
 166    left: auto !important;
 167 }
 168
 169 /* dynamic width nav */
 170 .responsive nav.art-nav,
 171 .responsive .art-nav-inner
 172 {
 173    width: auto !important;
 174    position: relative !important;
 175    top: auto !important;
 176    left: auto !important;
 177    right: auto !important;
 178    bottom: auto !important;
 179    margin-top: 0;
 180    margin-bottom: 0;
 181    min-width: 0;
 182 }
 183
 184 .responsive nav.art-nav
 185 {
 186    min-width: 1%;
 187 }
 188
 189 .responsive .responsive-nav
 190 {
 191    padding-left: 0;
 192    padding-right: 0;
 193    margin-bottom: 20px;
 194 }
 195
 196 /* full width hmenu, instead of inline-block */
 197 .responsive .responsive-nav ul.art-hmenu
 198 {
 199    display: block;
 200    float: none;
 201    text-align: center;
 202 }
 203
 204 /* elements on different lines */
 205 .responsive .responsive-nav ul.art-hmenu li
 206 {
 207    float: none;
 208 }
 209
 210 /* horizontal margins */
 211 .responsive .responsive-nav ul.art-hmenu>li:first-child,
 212 .responsive .responsive-nav ul.art-hmenu>li:last-child,
 213 .responsive .responsive-nav ul.art-hmenu>li
 214 {
 215    margin-left: 0;
 216    margin-right: 0;
 217 }
 218
 219 /* separator */
 220 .responsive .responsive-nav ul.art-hmenu>li:before
 221 {
 222    display: none;
 223 }
 224
 225 /* vertical distance between items */
 226 .responsive .responsive-nav ul.art-hmenu a
 227 {
 228    margin-top: 1px !important;
 229    margin-bottom: 1px !important;
 230    text-align: center;
 231    height: auto;
 232    white-space: normal;
 233 }
 234
 235 .responsive .responsive-nav ul.art-hmenu>li:first-child>a
 236 {
 237    margin-top: 0 !important;
 238 }
 239
 240 .responsive .responsive-nav ul.art-hmenu>li:last-child>a
 241 {
 242    margin-bottom: 0 !important;
 243 }
 244
 245 /* fixes for extended menu */
 246 .responsive .responsive-nav .ext,
 247 .responsive .responsive-nav ul.art-hmenu>li>ul,
 248 .responsive .responsive-nav ul.art-hmenu>li>ul>li
 249 {
 250    width: auto !important;
 251 }
 252
 253 /* submenu position on hover */
 254 .responsive .responsive-nav ul.art-hmenu ul
 255 {
 256    left: auto !important;
 257    right: auto !important;
 258    top: auto !important;
 259    bottom: auto !important;
 260    display: none !important;
 261    position: relative !important;
 262    visibility: visible !important;
 263 }
 264
 265 .responsive .responsive-nav ul.art-hmenu>li>ul>li:first-child:after
 266 {
 267    display: none;
 268 }
 269 .responsive .responsive-nav ul.art-hmenu ul a
 270 {
 271    padding-left: 4% !important;
 272 }
 273 .responsive .responsive-nav ul.art-hmenu ul ul a
 274 {
 275    padding-left: 6% !important;
 276 }
 277 .responsive .responsive-nav ul.art-hmenu ul ul ul a
 278 {
 279    padding-left: 8% !important;
 280 }
 281 .responsive .responsive-nav ul.art-hmenu ul ul ul ul a
 282 {
 283    padding-left: 10% !important;
 284 }
 285 .responsive .responsive-nav ul.art-hmenu ul ul ul ul ul a
 286 {
 287    padding-left: 12% !important;
 288 }
 289
 290 .responsive .responsive-nav ul.art-hmenu>li>ul
 291 {
 292    padding: 0;
 293 }
 294
 295 .responsive .responsive-nav ul.art-hmenu>li>ul:before
 296 {
 297    top: 0;
 298    right: 0;
 299    bottom: 0;
 300    left: 0;
 301 }
 302
 303 .responsive .art-sheet
 304 {
 305    width: auto !important;
 306    min-width: 240px !important;
 307    max-width: none;
 308    margin-right: 1% !important;
 309    margin-left: 1% !important;
 310 }
 311
 312 #art-resp {
 313    display: none;
 314 }
 315
 316 @media all and (max-width: 779px)
 317 {
 318     #art-resp, #art-resp-t { display: block; }
 319     #art-resp-m { display: none; }
 320 }
 321
 322 @media all and (max-width: 480px)
 323 {
 324     #art-resp, #art-resp-m { display: block; }
 325     #art-resp-t { display: none; }
 326 }
 327
 328 .responsive .art-content-layout,
 329 .responsive .art-content-layout-row,
 330 .responsive .art-layout-cell
 331 {
 332    display: block;
 333 }
 334
 335 .responsive .art-layout-cell
 336 {
 337    width: auto !important;
 338    height: auto !important;
 339    border-right-width: 0 !important;
 340    border-left-width: 0 !important;
 341    border-radius: 0 !important;
 342 }
 343
 344 .responsive .art-content-layout:after,
 345 .responsive .art-content-layout-row:after,
 346 .responsive .art-layout-cell:after
 347 {
 348    content: ".";
 349    display: block;
 350    height: 0;
 351    clear: both;
 352    visibility: hidden;
 353 }
 354
 355 .responsive .art-post
 356 {
 357    border-radius: 0;
 358 }
 359
 360 .responsive .art-footer-inner
 361 {
 362    min-width: 0;
 363 }
 364
 365 .responsive .responsive-tablet-layout-cell
 366 {
 367    width: 50% !important;
 368    float: left;
 369    -webkit-box-sizing: border-box;
 370    -moz-box-sizing: border-box;
 371    box-sizing: border-box;
 372 }
 373