html, body {
margin : 0;
padding : 0;
font-family : Source Sans Pro, Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
color : grey;
height : 100%;
background-color : #F0F0F0;
font-size : 14px;
}
div {
vertical-align : top;
text-align : left;
background-color : #fff;
box-sizing : border-box;
width : 100%;
}
a {
text-decoration : none;
color : #153170;
}
a:hover {
text-decoration : underline;
}
h1, h2, h3, h4 {
margin : 0;
padding-bottom : 5px;
color : #65b144;
}
.h_breed {
color : #642A85;
}
.h_obedience {
color : #009FE3;
}
.h_agility {
color : #DB191C;
}
hr {
height : 3px;
background-color : grey;
clear : both;
}
.hr_breed {
color : #642A85;
height : 2px;
}
.hr_obedience {
color : #009FE3;
height : 2px;
}
.main {
width : 960px;
margin : 0 auto;
}
.header, .nav, .footer {
border-right : 1px groove grey;
}
.header {
height : 210px;
margin : 0 auto;
margin-bottom : 0px;
background-image : url("/2022/images/banner1.png");
background-repeat : no-repeat, repeat;
background-position : top center;
}
.hamburger {
margin-top : 0;
position : fixed;
right : 0;
display : none;
height : 63px;
width : 60px;
background-image : url("/hamburger.png");
background-size : 50px 50px;
background-repeat : no-repeat;
background-position : bottom;
text-align : center;
opacity : 0.5;
}
.hamburger img {
padding-left : 20px;
width : 50px;
}
.hamburger:hover {
opacity : 0.4000000059604644775390625;
}
.hamburger-modal {
display : none;
position : fixed;
top : 0;
left : 0;
height : 100%;
width : 100%;
background-color : rgba(0, 0, 0, 0.7);
z-index : 99;
}
.hamburger-menu {
display : none;
position : fixed;
left : 5%;
top : 5%;
width : 90%;
min-height : 300px;
padding : 10px;
border : grey groove 1px;
border-radius : 5px;
z-index : 100;
overflow : scroll;
height : 90%;
}
.hamburger-menu ul {
list-style : none;
padding : 0;
margin : 0;
font-size : 15px;
line-height : 30px;
}
.sub_menu {
display : none;
position : absolute;
line-height : 1.5;
background-color : #fff;
color : grey;
max-width : 200px;
padding : 10px;
border : grey solid 1px;
box-shadow : 2px 2px 2px #888888;
border-radius : 3px;
z-index : 99;
}
.nav {
margin-top : -26px;
height : 23px;
background-color : transparent;
border-bottom : 1px solid grey;
}
.nav ul {
list-style : none;
padding : 0;
margin : 0;
font-size : 15px;
}
.nav li {
float : right;
border : solid;
border-bottom-width : 0;
border-width : 1px 1px 0 1px;
margin : 0 0 -1px 0;
border-radius : 5px 5px 0 0;
padding : 5px 0 0;
background-color : grey;
}
.nav li a {
padding : 0 10px;
color : #fff;
}
#selected {
padding-bottom : 1px;
}
.page-info {
clear : both;
height : 29px;
color : #fff;
font-size : 16px;
padding-left : 10px;
padding-top : 3px;
background-color : grey;
text-align : left;
}
.left50, .right50, .left70, .right30, .left1, .left2, .right1, .right2, .content {
padding : 10px;
border-right : 1px groove grey;
}
.left1, .left50 {
float : left;
width : 50%;
}
.right1, .right50 {
float : right;
width : 50%;
}
.left2, .left70 {
float : left;
width : 70%;
}
.right2, .right30 {
float : right;
width : 30%;
}
.img25 {
float : left;
margin : 0 10px 10px 0;
border : grey solid 1px;
width : 25%;
box-shadow : 3px 3px 2px #888888;
}
.img35 {
float : left;
margin : 0 10px 10px 0;
border : grey solid 1px;
width : 35%;
box-shadow : 3px 3px 2px #888888;
}
.rightjudge {
float : right;
margin : 0 10px 10px 10;
border : grey solid 1px;
width : 35%;
box-shadow : 3px 3px 2px #888888;
}
.img100 {
width : 100%;
margin-bottom : 10px;
border : grey solid 1px;
box-shadow : 3px 3px 2px #888888;
}
.footer {
background-color : grey;
font-size : 13px;
text-align : center;
height : 30px;
color : #fff;
padding-top : 5px;
}
.footer a {
color : #fff;
}
.footer a:hover {
color : red;
}
.image_resize {
height : 95%;
width : 95%;
}
.image_resize:hover {
width : 75%;
height : 75%;
z-index : 100;
position : fixed;
top : 12%;
left : 12%;
border : grey solid 1px;
}
.results {
padding : 10px;
line-height : 20px;
border : #cccccc solid 1px;
/*background : #E1E6EA;*/
font-size : 12px;
font-family : Arial;
color:black;
}
.results div {
background : #E1E6EA;
}
.results .img {
padding-top : 10px;
}
.results img {
border : grey solid 1px;
box-shadow : 3px 3px 2px #888888;
}
.results span, .c4 {
font-size : 11px;
font-style : italic;
}
.box {
padding : 0;
margin : 0;
line-height : 18px;
border : #cccccc solid 1px;
background : #E1E6EA;
font-size : 12px;
font-family : Arial;
}
.box_header {
background : #d8d8d8;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 13px;
color : #003366;
font-weight : bold;
line-height : 22px;
}
.box a:hover {
background-color : #FE1B14;
color : #fff;
}
.box strong {
color : #000033;
font-size : 13px;
}
.box td {
padding-left : 5px;
padding-right : 5px;
white-space : nowrap;
}
@media screen and (max-width:960px) {
.main {
width : 100%;
}
}
@media screen and (max-width:600px) {
.header {
height : 140px;
margin : 0 auto;
margin-bottom : 0px;
background-image : url("/2019/images/banner1_small.jpg");
background-position : center center;
}
.left1, .left2, .left50, .left70 {
width : 100%;
}
.right1, .right2, .right50, .right30 {
float : left;
width : 100%;
}
.page-info {
font-size : 12px;
}
.nav {
display : none;
}
.hamburger {
display : inline-block;
}
img {
max-width : 99%;
}
}