templates/art41_sample2/css/template.responsive.css

   1 /* Created by Artisteer v4.1.0.59861 */
   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 *
  99 {
 100    position: relative;
 101    text-align: center;
 102    -webkit-transform: none !important;
 103    -moz-transform: none !important;
 104    -o-transform: none !important;
 105    -ms-transform: none !important;
 106    transform: none !important;
 107 }
 108
 109 .responsive .art-header #art-flash-area,
 110 .responsive .art-header .art-shapes>*
 111 {
 112    display: none;
 113 }
 114
 115 .responsive #art-header-bg
 116 {
 117    background-position: center center !important;
 118    background-size: cover !important;
 119    background-repeat: repeat !important;
 120 }
 121
 122 /* Search and other elements in header element directly */
 123 .responsive .art-header>.art-textblock
 124 {
 125    position: relative !important;
 126    display: block !important;
 127    margin: 1% auto !important;
 128    width: 75% !important;
 129    top: auto !important;
 130    right: auto !important;
 131    bottom: auto !important;
 132    left: auto !important;
 133 }
 134
 135 /* For icons like facebook, rss, etc. */
 136 .responsive .art-header>.art-textblock>div
 137 {
 138    width: 100%;
 139 }
 140 /* dynamic width nav */
 141 .art-nav .art-menu-btn
 142 {
 143    border: 1px solid #404040;
 144    border-radius: 3px;
 145    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
 146    display: none;
 147    background: -ms-linear-gradient(top, #707070 0, #000 100%);
 148    background: -moz-linear-gradient(top, #707070 0, #000 100%);
 149    background: -o-linear-gradient(top, #707070 0, #000 100%);
 150    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(1, #000));
 151    background: -webkit-linear-gradient(top, #707070 0, #000 100%);
 152    background: linear-gradient(to bottom, #707070 0, #000 100%);
 153    margin: 3px;
 154    padding: 5px;
 155    position: relative;
 156    width: 20px;
 157 }
 158
 159 .art-nav .art-menu-btn span
 160 {
 161    background: #E0E0E0;
 162    border-radius: 2px;
 163    display: block;
 164    height: 3px;
 165    margin: 3px 1px;
 166    position: relative;
 167    -moz-transition: background .2s;
 168    -o-transition: background .2s;
 169    -webkit-transition: background .2s;
 170    transition: background .2s;
 171 }
 172
 173 .art-nav .art-menu-btn:hover span
 174 {
 175    background: #f3f3f3;
 176 }
 177
 178 .responsive .art-nav .art-menu-btn
 179 {
 180    display: inline-block;
 181 }
 182
 183 .responsive nav.art-nav,
 184 .responsive .art-nav-inner
 185 {
 186    width: auto !important;
 187    position: relative !important;
 188    top: auto !important;
 189    left: auto !important;
 190    right: auto !important;
 191    bottom: auto !important;
 192    margin-top: 0;
 193    margin-bottom: 0;
 194    min-width: 0;
 195    text-align: center !important;
 196 }
 197
 198 .responsive nav.art-nav
 199 {
 200    min-width: 1%;
 201    margin-top: 1%;
 202    margin-right: 1% !important;
 203    margin-left: 1% !important;
 204 }
 205
 206 .responsive .art-nav
 207 {
 208    padding-left: 0;
 209    padding-right: 0;
 210 }
 211
 212 /* full width hmenu, instead of inline-block */
 213 .responsive .art-nav ul.art-hmenu
 214 {
 215    display: none;
 216    float: none;
 217    text-align: center;
 218 }
 219
 220 .responsive .art-nav .art-hmenu.visible
 221 {
 222    display: block;
 223 }
 224
 225 /* elements on different lines */
 226 .responsive .art-nav ul.art-hmenu li,
 227 .art-hmenu-extra1,
 228 .art-hmenu-extra2
 229 {
 230    float: none;
 231 }
 232
 233 /* horizontal margins */
 234 .responsive .art-nav ul.art-hmenu>li:first-child,
 235 .responsive .art-nav ul.art-hmenu>li:last-child,
 236 .responsive .art-nav ul.art-hmenu>li
 237 {
 238    margin-left: 0;
 239    margin-right: 0;
 240 }
 241
 242 /* separator */
 243 .responsive .art-nav ul.art-hmenu>li:before
 244 {
 245    display: none;
 246 }
 247
 248 /* vertical distance between items */
 249 .responsive .art-nav ul.art-hmenu a
 250 {
 251    margin-top: 1px !important;
 252    margin-bottom: 1px !important;
 253    text-align: center !important;
 254    height: auto;
 255    white-space: normal;
 256 }
 257
 258 .responsive .art-nav ul.art-hmenu>li:first-child>a
 259 {
 260    margin-top: 0 !important;
 261 }
 262
 263 .responsive .art-nav ul.art-hmenu>li:last-child>a
 264 {
 265    margin-bottom: 0 !important;
 266 }
 267
 268 /* fixes for extended menu */
 269 .responsive .art-nav .ext,
 270 .responsive .art-nav ul.art-hmenu>li>ul,
 271 .responsive .art-nav ul.art-hmenu>li>ul>li,
 272 .responsive .art-nav ul.art-hmenu>li>ul>li a
 273 {
 274    width: auto !important;
 275 }
 276
 277 /* submenu position on hover */
 278 .responsive .art-nav ul.art-hmenu ul
 279 {
 280    left: auto !important;
 281    right: auto !important;
 282    top: auto !important;
 283    bottom: auto !important;
 284    display: none !important;
 285    position: relative !important;
 286    visibility: visible !important;
 287 }
 288
 289 .responsive .art-nav ul.art-hmenu>li>ul>li:first-child:after
 290 {
 291    display: none;
 292 }
 293 .responsive .art-nav ul.art-hmenu ul a
 294 {
 295    padding-left: 4% !important;
 296 }
 297 .responsive .art-nav ul.art-hmenu ul ul a
 298 {
 299    padding-left: 6% !important;
 300 }
 301 .responsive .art-nav ul.art-hmenu ul ul ul a
 302 {
 303    padding-left: 8% !important;
 304 }
 305 .responsive .art-nav ul.art-hmenu ul ul ul ul a
 306 {
 307    padding-left: 10% !important;
 308 }
 309 .responsive .art-nav ul.art-hmenu ul ul ul ul ul a
 310 {
 311    padding-left: 12% !important;
 312 }
 313
 314 .responsive .art-nav ul.art-hmenu>li>ul
 315 {
 316    padding: 4px;
 317 }
 318
 319 .responsive .art-nav ul.art-hmenu>li>ul:before
 320 {
 321    top: 0;
 322    right: 0;
 323    bottom: 0;
 324    left: 0;
 325 }
 326
 327 .responsive .art-sheet
 328 {
 329    width: auto !important;
 330    min-width: 240px !important;
 331    max-width: none;
 332    margin-right: 1% !important;
 333    margin-left: 1% !important;
 334 }
 335
 336 #art-resp {
 337    display: none;
 338 }
 339
 340 @media all and (max-width: 899px)
 341 {
 342     #art-resp, #art-resp-t { display: block; }
 343     #art-resp-m { display: none; }
 344 }
 345
 346 @media all and (max-width: 480px)
 347 {
 348     #art-resp, #art-resp-m { display: block; }
 349     #art-resp-t { display: none; }
 350 }
 351
 352 .responsive .art-content-layout,
 353 .responsive .art-content-layout-row,
 354 .responsive .art-layout-cell
 355 {
 356    display: block;
 357 }
 358
 359 .responsive .art-layout-cell
 360 {
 361    width: auto !important;
 362    height: auto !important;
 363    border-right-width: 0 !important;
 364    border-left-width: 0 !important;
 365    border-radius: 0 !important;
 366 }
 367
 368 .responsive .art-content-layout:after,
 369 .responsive .art-content-layout-row:after,
 370 .responsive .art-layout-cell:after
 371 {
 372    content: ".";
 373    display: block;
 374    height: 0;
 375    clear: both;
 376    visibility: hidden;
 377 }
 378
 379 .responsive .art-post
 380 {
 381    border-radius: 0;
 382 }
 383
 384 .responsive .art-footer-inner
 385 {
 386    min-width: 0;
 387 }
 388 .responsive .art-footer
 389 {
 390    margin-top: 1%;
 391 }
 392
 393 .responsive .responsive-tablet-layout-cell
 394 {
 395    width: 50% !important;
 396    float: left;
 397    -webkit-box-sizing: border-box;
 398    -moz-box-sizing: border-box;
 399    box-sizing: border-box;
 400 }
 401