@import url("basic.css");
@import url("reset.css");

@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Antic+Didone);


html {
    background: #fff;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.4;
    color: #404040;
}

.inline {
    display: inline;
    vartical-align: middle;
}

p {
    margin: 20px 0 20px 0;
}

a {
    color: #BE7E00;
    text-decoration: none;
}

body {
    text-rendering: optimizeSpeed;
}

#menuline {
    height: 5px;
    background-color: #BE7E00;
}

#menu {
    background-color: #181818;
    background-repeat: repeat-x;
    background-image: url("images/menu-bg.png");
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
}

#mainmenu {
    text-align: center;
}

#menu:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#mainmenu > li {
    display: inline-block;
    padding: 16px;
}

#mainmenu > li > a {
    color: #bfbfbf;
}

#mainmenu > li > a:hover {
    color: #BE7E00;
}

#mainmenu > li.active > a {
    color: #BE7E00;
}

#headerbox {
    position: relative;

    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);

    background-color: #165754;
    background: -moz-linear-gradient(176deg,#00736F 20%,
                                            #165754 40%);
    background: -webkit-linear-gradient(176deg,#00736F 20%,
                                               #165754 40%);
    background: -o-linear-gradient(176deg,#00736F 20%,
                                          #165754 40%);
    background: -ms-linear-gradient(176deg,#00736F 20%,
                                           #165754 40%);
    background: linear-gradient(176deg,#00736F 20%,
                                       #165754 40%);

    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}

#header {
    background-image: url("logos/tg.png");
    background-size: 168px auto;
    background-repeat: no-repeat;
    background-position: 0px 16px;
    clear: both;
    padding: 30px 20px 30px 180px;
    max-width: 950px;
    margin: auto;

    color: white;
}

#header > h1 {
    font-size: 68px;
    font-weight: bold;
    font-family: 'Antic Didone', serif;
}

#header > h2 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.0;
    font-family: 'Marcellus SC', serif;
}

.body {
    max-width: 1170px;
    margin: auto;
    padding-top: 30px;
}

.sidebar-title{
    display: none;
}

.body h1 {
    font-size: 36px;
    margin-bottom: 25px;
}

.body h2 {
    font-size: 31.5px;
    line-height: 40px;
    color:#333333;
    border-bottom: 1px solid #eeeeee;
    margin-top: 50px;
}

.sidebar {
    width: 215px;
    min-height: 130px;
    float: left;
    border-right: 1px solid #e5e5e5;
}

.sidebar li {
    padding: 8px;
}

.sidebar li > a {
    color: #165754;
}

.sidebar li:hover {
    background-color: #f5f5f5;
}

.sidebar+.section>h1,
.sidebar+.section>ul,
.sidebar+.section>p,
.sidebar+.section>blockquote {
    margin-left: 260px;
}

pre {
    padding: 7px 30px;
    line-height: 1.3;
    font-family: 'Consolas', 'Menlo', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace!important;
    font-size: 15px;
}

.footer {
    margin-top: 60px;
    margin-bottom: 10px;
    text-align: center;
}

#turbogears-web-framework .section .simple {
    margin-left: 10px;
}

#start-small .highlight-python pre>span {
    opacity: 0.7;
}

#start-small .highlight-python pre>span.hll {
    opacity: 1.0;
    background-color: transparent;
}

#feature-complete-and-flexible > .simple {
    margin-bottom: 30px;
}

#feature-complete-and-flexible > .simple li:before {
    content: '*';
    font-size: 22px;
    color: black;
    margin-right: 10px;
    vertical-align: middle;
}

#feature-complete-and-flexible {
    margin-top: 30px;
}

#turbogears-presentations iframe {
    margin: 10px;
}

#github-flag {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    opacity: 0.8;
}

#github-flag:hover {
    opacity: 1.0;
}

.doclink > * {
    vertical-align: middle;
}

.doclink > a {
    margin-left: 10px;
    font-size: 120%;
}

#downloadbox {
    color: white;
    background-color: #004B48;
    float: right;
    border: 4px #00736F solid;
    padding:10px;

    -webkit-box-shadow: -2px 3px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -2px 3px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         -2px 3px 5px rgba(50, 50, 50, 0.75);

    font-size: 16px;
}

#downloadbox strong {
    font-weight: bold;
}

#curversion {
    font-weight: bold;
    color: white;
}

#curversion:hover {
    color: #BE7E00;
}

#installcmd {
    font-family: 'Consolas', 'Menlo', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace!important;
    font-size: 14px;
}

#gplusdata { float: right; }
#gplusbtn {
    background-color: white;
    display: inline-block;

    background-color: #fafafa;
    border: 1px solid #d4d4d4;
    padding: 2px 5px 2px 4px;
    border-radius: 3px;

    vertical-align: top;
    overflow: hidden;
    width: 115px;
}

#the-cogbin #turbogears-2-packages > dt {
    display: none;
}

#the-cogbin dt {
    margin-top: 40px;
    font-size: 22px;
    color: #165754;
}

#the-cogbin th {
    font-weight: bold;
}

@media only screen and (max-width: 1170px) {
    .body { padding: 0 10px 0 10px; }
}

@media only screen and (max-width: 968px) {
    #downloadbox { display: none; }
    #gplusdata { float: none; }
}

@media only screen and (max-width: 640px) {
    #gplusdata { display: none; }
    #header > h1 { font-size: 44px; }
    #header > h2 { font-size: 18px; }
    #mainmenu { height: 40px; overflow: hidden; }
    #mainmenu > li { padding: 8px; }
    #header { background-size: 120px auto; padding-left: 140px; }
    .body .sidebar { display: none; }
    .sidebar+.section>* { margin-left: 0px !important; }
}

@media only screen and (max-width: 320px) {
    #github-flag { display: none; }
    #header > h1 { font-size: 32px; }
    #header > h2 { font-size: 16px; }
}