120 lines
3.0 KiB
CSS
120 lines
3.0 KiB
CSS
.mobileView a[id^="catLine"]
|
||
{
|
||
display: table !important;
|
||
height: auto !important;
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
.mobileView a[id^="catLine"] span,
|
||
.mobileView a.catLinePhone span {
|
||
display: table-cell;
|
||
padding: .75em 0;
|
||
position: static !important;
|
||
white-space: normal;
|
||
text-align: left;
|
||
}
|
||
|
||
|
||
.mobileView a[id^="catLine"] span[style^="padding-left"] {
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
|
||
.mobileView a[id^="catLine"] span[style="padding-left: 0px;"] { width: 0 !important; }
|
||
.mobileView a[id^="catLine"] span[style="padding-left: 20px;"] { width: 20px !important; }
|
||
.mobileView a[id^="catLine"] span[style="padding-left: 40px;"] { width: 40px !important; }
|
||
.mobileView a[id^="catLine"] span[style="padding-left: 60px;"] { width: 60px !important; }
|
||
.mobileView a[id^="catLine"] span[style="padding-left: 80px;"] { width: 80px !important; }
|
||
|
||
|
||
.mobileView a[id^="catLine"] span[style^="position"] {
|
||
text-align: right;
|
||
width: 8em;
|
||
}
|
||
|
||
|
||
.mobileView table[summary="City Directory"] td[scope="col"]
|
||
{
|
||
border: 0;
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
|
||
.mobileView table[summary="City Directory"] td[colspan]:before
|
||
{
|
||
display: none;
|
||
}
|
||
|
||
|
||
.mobileView table[summary="City Directory"] td,
|
||
.mobileView table[summary="City Directory"] td[colspan]
|
||
{
|
||
display: block;
|
||
padding: .5em;
|
||
width: auto;
|
||
}
|
||
|
||
|
||
.mobileView table[summary="City Directory"] td:before
|
||
{
|
||
display: block;
|
||
float: left;
|
||
font-weight: bold;
|
||
width: 5em;
|
||
margin-right: 1em;
|
||
word-break: initial;
|
||
}
|
||
|
||
|
||
.mobileView table[summary="City Directory"] td:nth-child(1):before { content: "Name"; }
|
||
.mobileView table[summary="City Directory"] td:nth-child(3):before { content: "Email"; }
|
||
.mobileView table[summary="City Directory"] td:nth-child(4):before { content: "Phone"; }
|
||
.mobileView table[summary="City Directory"] td:nth-child(5):before { content: "Additional Phone"; }
|
||
|
||
.mobileView table#cityDirectoryDepartmentDetails td:nth-child(2):before { content: "Title"; }
|
||
.mobileView table#cityDirectorySearch td:nth-child(2):before { content: "Category"; }
|
||
|
||
.mobileView table[summary="City Directory"] thead tr:nth-child(2) { display:none; }
|
||
.mobileView table[summary="City Directory"] tbody tr td:nth-child(4) { text-align: left!important; }
|
||
.mobileView table[summary="City Directory"] tbody tr td:nth-child(5) { text-align: left !important; }
|
||
|
||
#cityDirectoryDepartmentDetails .noWrap
|
||
{
|
||
white-space: nowrap;
|
||
}
|
||
/* Mobile version expected to wrap for avoiding overflow elements */
|
||
.mobileView #cityDirectoryDepartmentDetails .noWrap
|
||
{
|
||
white-space: normal;
|
||
}
|
||
.mobileView #cityDirectoryDepartmentDetails
|
||
{
|
||
word-break: break-all;
|
||
}
|
||
/* We always want to keep the text inside each cell, especially for large texts */
|
||
#cityDirectoryDepartmentDetails td,
|
||
#cityDirectorySearch td
|
||
{
|
||
overflow: hidden;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.imageAlignLeft {
|
||
max-width: 30%;
|
||
float: left;
|
||
margin: 10px;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.imageAlignRight {
|
||
max-width: 30%;
|
||
float: right;
|
||
margin-top: 2px;
|
||
} |