Файл: contao-3.5.8/assets/contao/css/grid-uncompressed.css
Строк: 188
/**
* Contao Open Source CMS
*
* Copyright (c) 2005-2016 Leo Feyer
*
*
@license LGPL-3.0+
*/
/**
* Make the wrapping container 960 pixel wide
*/
#wrapper {
width:960px;
margin:0 auto;
}
/**
* Set the default
margin of the grid columns
*/
*[class*="grid"]
{
float:left;
margin-left:10px;
margin-right:10px;
display:inline;
}
/**
* Add a default margin to all content elements, so they align with the
floatet
* ones (otherwise you would have to add "grid12" to
every element)
*/
.mod_article *[class*="ce_"],.mod_article
*[class*="mod_"] {
margin-left:10px;
margin-right:10px;
}
/**
* Handle news and event reader modules which are added via content element
and
* contain content elements themselves (see #5331)
*/
.mod_article
.mod_newsreader,.mod_article .mod_eventreader
{
margin-left:0;
margin-right:0;
}
.mod_article
*[class*="layout_"] > *,.mod_article
*[class*="event_"] > *
{
margin-left:10px;
margin-right:10px;
}
/**
* Remove the margin from
floated articles, because the margin is already
* applied to its content
elements (see above)
*/
.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,
.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12
{
margin-left:0;
margin-right:0;
}
/**
* Automatically clear the floats
in the main column, so you do not have to add
* a clearing div to each
article
*/
#main .inside {
overflow:hidden;
}
/**
* Grid column widths
*/
.grid1 { width:60px; }
.grid2 { width:140px; }
.grid3 { width:220px;
}
.grid4 { width:300px; }
.grid5 { width:380px; }
.grid6 { width:460px;
}
.grid7 { width:540px; }
.grid8 { width:620px; }
.grid9 { width:700px;
}
.grid10 { width:780px; }
.grid11 { width:860px; }
.grid12 { width:940px;
}
/**
* Floated articles can be 20 pixel wider (no margin)
*/
.mod_article.grid1 { width:80px; }
.mod_article.grid2 { width:160px;
}
.mod_article.grid3 { width:240px; }
.mod_article.grid4 { width:320px;
}
.mod_article.grid5 { width:400px; }
.mod_article.grid6 { width:480px;
}
.mod_article.grid7 { width:560px; }
.mod_article.grid8 { width:640px;
}
.mod_article.grid9 { width:720px; }
.mod_article.grid10 { width:800px;
}
.mod_article.grid11 { width:880px; }
.mod_article.grid12 { width:960px;
}
/**
* Default offset widths
*/
.offset1 { margin-left:90px
!important; }
.offset2 { margin-left:170px !important; }
.offset3 {
margin-left:250px !important; }
.offset4 { margin-left:330px !important;
}
.offset5 { margin-left:410px !important; }
.offset6 { margin-left:490px
!important; }
.offset7 { margin-left:570px !important; }
.offset8 {
margin-left:650px !important; }
.offset9 { margin-left:730px !important;
}
.offset10 { margin-left:810px !important; }
.offset11 { margin-left:890px
!important; }
.offset12 { margin-left:970px !important; }
/**
* Floated
articles do not have margin
*/
.mod_article.offset1 { margin-left:80px
!important; }
.mod_article.offset2 { margin-left:160px !important;
}
.mod_article.offset3 { margin-left:240px !important;
}
.mod_article.offset4 { margin-left:320px !important;
}
.mod_article.offset5 { margin-left:400px !important;
}
.mod_article.offset6 { margin-left:480px !important;
}
.mod_article.offset7 { margin-left:560px !important;
}
.mod_article.offset8 { margin-left:640px !important;
}
.mod_article.offset9 { margin-left:720px !important;
}
.mod_article.offset10 { margin-left:800px !important;
}
.mod_article.offset11 { margin-left:880px !important;
}
.mod_article.offset12 { margin-left:960px !important; }
/**
* Reduce
the overall width and the width of the grid columns if the screen
* width
is less than 980px (e.g. on a portrait tablet)
*/
@media (min-width:768px)
and (max-width:979px)
{
/**
* Reduce the overall width
*/
#wrapper
{
width:744px;
}
/**
* Reduce the grid column widths
*/
.grid1 {
width:42px; }
.grid2 { width:104px; }
.grid3 { width:166px; }
.grid4
{ width:228px; }
.grid5 { width:290px; }
.grid6 { width:352px;
}
.grid7 { width:414px; }
.grid8 { width:476px; }
.grid9 {
width:538px; }
.grid10 { width:600px; }
.grid11 { width:662px; }
.grid12
{ width:724px; }
/**
* Floated articles can be 20 pixel wider (no
margin)
*/
.mod_article.grid1 { width:62px; }
.mod_article.grid2 {
width:124px; }
.mod_article.grid3 { width:186px; }
.mod_article.grid4 {
width:248px; }
.mod_article.grid5 { width:310px; }
.mod_article.grid6 {
width:372px; }
.mod_article.grid7 { width:434px; }
.mod_article.grid8 {
width:496px; }
.mod_article.grid9 { width:558px; }
.mod_article.grid10 {
width:620px; }
.mod_article.grid11 { width:682px; }
.mod_article.grid12 {
width:744px; }
/**
* Reduce the offset widths
*/
.offset1 {
margin-left:72px !important; }
.offset2 { margin-left:134px !important;
}
.offset3 { margin-left:196px !important; }
.offset4 {
margin-left:258px !important; }
.offset5 { margin-left:320px !important;
}
.offset6 { margin-left:382px !important; }
.offset7 {
margin-left:444px !important; }
.offset8 { margin-left:506px !important;
}
.offset9 { margin-left:568px !important; }
.offset10 {
margin-left:630px !important; }
.offset11 { margin-left:692px !important;
}
.offset12 { margin-left:754px !important; }
/**
* Floated articles
do not have margin
*/
.mod_article.offset1 { margin-left:62px
!important; }
.mod_article.offset2 { margin-left:124px !important;
}
.mod_article.offset3 { margin-left:186px !important;
}
.mod_article.offset4 { margin-left:248px !important;
}
.mod_article.offset5 { margin-left:310px !important;
}
.mod_article.offset6 { margin-left:372px !important;
}
.mod_article.offset7 { margin-left:434px !important;
}
.mod_article.offset8 { margin-left:496px !important;
}
.mod_article.offset9 { margin-left:558px !important;
}
.mod_article.offset10 { margin-left:620px !important;
}
.mod_article.offset11 { margin-left:682px !important;
}
.mod_article.offset12 { margin-left:744px !important; }
}
/**
* Remove
all floats and fixed widths if the screen width is less than 768
* pixel
(e.g. on a mobile phone)
*/
@media (max-width:767px)
{
/**
* Remove the
overall width
*/
#wrapper {
width:auto;
}
/**
* Show all columns
underneath each other
*/
*[class*="grid"] {
float:none
!important;
display:block !important;
width:auto
!important;
}
*[class*="offset"] {
margin-left:10px
!important;
}
}