dottes/web/css/dottes.css

287 lines
4.2 KiB
CSS

body {
background-color: #9900cc;
background-image: url('../img/purple-fabric-background.jpg');
color: #000000;
font-size: 16px;
height: auto;
padding-top: 0px;
padding-bottom: 20px;
font-family: 'Oswald', serif;
}
h1 {
background: white;
text-align: center;
font-size: 25px;
font-weight: bold;
}
p
{
background: white;
margin: 10px;
}
div.banner
{
height: 136px;
background-color: black;
background-image: url('../img/banner.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
div.banner h1
{
display: none;
text-align: left;
font-size: 50px;
font-weight: bold;
color: #ffffff;
font-family: 'Pirata One', sans-serif;
padding: 10px;
}
div.dottes-body
{
background-color: white;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
div.dottes-body h1
{
margin: 10px;
text-align: left;
}
div.dottes-container
{
border: 2px solid grey;
margin: 10px;
}
div.dottes-transpose-instrument
{
display: table;
width: 100%;
}
div.dottes-transpose-instrument-item
{
display: table-cell;
vertical-align: middle;
}
div.dottes-transpose-instrument-name
{
width: 15%;
}
div.dottes-transpose-instrument-how
{
width: 55%;
}
div.dottes-transpose-tune-types
{
width: 30%;
}
div.dottes-tune-display
{
margin: 10px;
}
div.dottes-tune-header
{
display: table;
width: 100%;
}
div.dottes-tune-header-row
{
display: table-row;
}
div.dottes-tune-header-left
{
display: table-cell;
width: 25%;
}
div.dottes-tune-header-middle
{
display: table-cell;
}
div.dottes-tune-header-middle h1
{
font-size: 25px;
font-weight: bold;
text-align: center;
margin: 0px;
}
div.dottes-tune-header-middle h2
{
font-size: 15px;
font-weight: normal;
text-align: center;
margin: 0px;
}
div.dottes-tune-header-right
{
display: table-cell;
text-align: right;
width: 25%;
}
div.dottes-tune-footer
{
display: table;
width: 100%;
}
div.dottes-tune-footer-row
{
display: table-row;
}
div.dottes-tune-footer-left
{
display: table-cell;
width: 25%;
}
div.dottes-tune-footer-centre
{
display: table-cell;
text-align: center;
width: 50%;
}
div.dottes-tune-footer-right
{
display: table-cell;
text-align: right;
width: 25%;
}
a.dottes-tune-link
{
font-size: 20px;
position: relative;
top: 12px;
}
ul.tune-type-list
{
list-style-type: none;
margin: 0;
}
ul.tune-type-list li
{
display: inline-block;
}
img.dottes-png
{
display: block;
width: 100%; /* Make image fill width */
margin-top: 10px;
margin-bottom: 10px;
}
ul.tune-data-list
{
list-style-type: none;
margin: 0px;
}
ul.tune-data-list li
{
display: inline;
margin-left: 0;
margin-right: 10px;
}
div.dottes-tune-list
{
display: table;
margin: 10px;
}
div.dottes-tune-list-item
{
display: table-row;
}
div.dottes-tune-list-item-link
{
display: table-cell;
vertical-align: middle;
}
div.dottes-tune-list-item-image
{
display: table-cell;
vertical-align: middle;
}
div.dottes-change-no
{
display: none;
}
div.dottes-change-yes
{
}
div.dottes-change-link
{
}
div.dottes-credit-no
{
display: none;
}
div.dottes-credit-yes
{
}