website/static/base/css/header-box.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

/*
    Public domain 2015 Luis Felipe López Acevedo. All rights waived.
    <felipe.lopez@openmailbox.org>
   
    NOTE  The default style is targeted at screens with a width less than
          1024 pixels.
*/

#header-box {
    background-color: #333;
}

#logo {
    border-style: none;
    color: white;
    font-weight: bold;
    line-height: 55px;
}

#logo:active, #logo:focus, #logo:hover {
    color: #F4BB15;
}

#site-nav {
    margin: 0;
    padding: 0;
    line-height: 55px;
    list-style: none;
}

#site-nav > li {
    display: block;
}

#site-nav a:link, #site-nav a:visited {
    background-color: transparent;
    background-image: url("../img/link-arrow.png");
    background-position: 97% 50%;
    background-repeat: no-repeat;
    border-color: black;
    border-style: solid none none none;
    border-width: thin;
    color: #F4BB15;
    display: block;
    padding: 0px 20px; 
    text-align: left;
    text-decoration: none;
}

#site-nav a:active, #site-nav a:focus, #site-nav a:hover {
    background-color: #2E3436;
    color: #F49B15;
}


@media screen and (min-width: 800px) {
    #header-box {
        height: 55px;
    }

    #logo > img {
        border-style: none;
    }

    #site-nav {
        float: right;
        margin-right: 20px;
    }


    #site-nav > li {
        display: inline-block;
        text-align: center;
    }

    #site-nav a:link, #site-nav a:visited {
        background-image: none;
        border: none;
        padding: 0px 10px;
    }

    #site-nav a:active, #site-nav a:focus, #site-nav a:hover {
        background-color: transparent;
        border-style: none none solid;
        border-color: #F4BB15;
    }
}