/* Screen styles for new LWD site
*/

/* We want to use pretty sans serif fonts for everything
*/
* {
    font-family: "Segoe UI", "Arial", "Helvetica", "sans-serif";
    }

body {
    margin: 0;
    padding: 0;
    background: #20355b;
    color: #ffffff;
    min-width: 800px; /* 800px is just enough for the home page to look ok */
    max-width: 1050px; /* If stuff expands more than this, it looks silly */
    font-size: 10.5pt; /* default font size for everything: 11 pt */
    border-style: none solid none none; /* single blue line to the right of the page */
    border-width: thin;
    }

/* Everything that uses the new style sheet stuff should have no margin or
    padding by default, since otherwise random browsers use different default
    values for them. The old stuff can still use whatever margins and padding
    it was using before, since those apparently work fine.
*/
div.lwd2 * {
    margin: 0px;
    padding: 0px;
    }

/* Add a bit of a margin to all text edit controls and droplists
*/
* input, select {
    margin-top: 3pt;
    margin-bottom; 3pt;
    }

/* Set the border color for a bunch of things
*/
body, div.lwd2_header, div.lwd2_productbox, div.lwd2_misc, p.lwd2_copyright {
    border-color: #0e2a53;
    }

/* Covers entire header - logo, menu, submenu
*/
div.lwd2_header {
    margin-bottom: 15px;
    min-width: 980px; /* 980px is just enough for all the menu buttons */
    }

/* Site info portion of the header - the LWD logo and search box, above the menu
*/
div.lwd2_siteinfo {
    background-image: url(images/region.png);
    }

/* Tagline in the site info area
*/
div.lwd2 p.lwd2_header_tag {
    color: #d0d0d0;
    text-align: right;
    font-weight: bold;
    font-size: 20px; /* specify it in pixels - the header is a set number of pixels high */
    margin: 0px;
    margin-right: 5px;
    }

/* Lone Wolf Development logo image
*/
img.lwd2_lwdlogo {
    margin-top: -5px;
    margin-left: 10px;
    }

/* Search box
*/
div.lwd2_searchbox form {
    padding-top: 10px;
    }

/* Main menu
*/
div.lwd2_menu {
    height: 35px; /* height of a button */
    padding-left: 20px;
    background-image: url(images/menu_background.png);
    background-position: 35px 0px;
    }

/* Graphic that looks like the "base" of the main menu, when the menu itself is
    not being shown
*/
div.lwd2_menu_base {
    height: 4px; /* height of the graphic */
    background-image: url(images/menu_base.png);
    background-position: 54px 0px;
    }

/* The menu is modelled as a special list
*/
ul.lwd2_menu {
    list-style-type: none;
    }
ul.lwd2_menu li {
    display: inline;
    }

/* Images in the menu are the size of a standard menu button
*/
ul.lwd2_menu li img {
    width: 105px; /* button dimensions */
    height: 35px; /* button dimensions */
    border-width: 0px;
    }

/* Links have a cool background image to make them look like buttons. We need
    to guddle about with floats to position them because otherwise firefox does
    really weird things, even if we say to display them at 0,0.
*/
.lwd2_menu a {
    background-image: url(../images/menubutton_up.png); /* button up image */
    background-position: 0px 0px;
    background-repeat: no-repeat;
    float: left; /* needed to left-align button */
    }
.lwd2_menu a:hover {
    background-image: url(../images/menubutton_down.png); /* button down image */
    }

/* Overrides to highlight the active context
*/
li.lwd2_active_context a {
    background-image: url(../images/menubutton_active_up.png); /* button up image */
    }
li.lwd2_active_context a:hover {
    background-image: url(../images/menubutton_active_down.png); /* button up image */
    }

/* Sub-menu stuff
*/
div.lwd2_submenu {
    margin-top: 3px;
    }

ul.lwd2_submenu {
    list-style-type: none;
    padding-left: 35px;
    }

ul.lwd2_submenu li {
    text-align: center; /* needed in both li and a for IE7 and FF */
    display: inline;
    padding: 5px;
    }

ul.lwd2_submenu li a {
    color: #c0c0c0;
    font-size: 11pt; /* big, but not too big */
    }

a.lwd2_currentpage:link, a.lwd2_currentpage:visited {
    color: #a9dfff;
    font-weight: bold;
    }

/* Stuff for the product description thingies
*/
div.lwd2_productbox {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-style: none none solid none; /* single blue line under each product */
    border-width: 1px;
    }

div.lwd2_page div.lwd2 p.lwd2_productblurb, div.lwd2_page div.lwd2 p.lwd2_productversion {
    margin: 0px;
    margin-left: 10px;
    margin-right: 20px;
    }

div.lwd2_page div.lwd2 p.lwd2_productversion {
    margin-top: 5px;
    }

div.lwd2_page div.lwd2 p.lwd2_productversion a {
    font-size: 8pt;
    color: #a0a0a0;
    }

table.lwd2_productlinks tr td {
    white-space: nowrap; /* make sure not to wrap text, since we should never need to */
    padding-left: 20px;
    }

table.lwd2_productlinks tr td img {
    border-width: 0px;
    vertical-align: middle;
    }

div.lwd2_gamelist {
    clear: both; /* Make sure to clear the float from the previous list */
    float: right;
    font-size: 10pt;
    margin-top: 5px;
    margin-right: 10px;
    max-width: 200px;
    }

div.lwd2 div.lwd2_gamelist * {
    text-align: right;
    }

div.lwd2_page div.lwd2 div.lwd2_gamelist ul {
    list-style-type: none;
    margin: 3pt 0pt;
    }

div.lwd2_page div.lwd2 div.lwd2_gamelist p {
    margin: 0px;
    }

div.lwd2_page div.lwd2 div.lwd2_gamelist ul li {
    color: #a0a0a0;
    margin: 0px;
    }

/* Miscellaneous infos for the front page
*/
div.lwd2_misc {
    clear: both; /* Make sure there's a clear break between each product */
    padding: 5px;
    border-style: none none solid none; /* single blue line under */
    border-width: thin;
    }

/* Stuff for news
*/
div.lwd2_news {
    clear: both; /* clear any floats that are still around */
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px; /* large blocks of text aren't very readable */
    }
div.lwd2_news h2, div.lwd2_news p {
    margin: 0px;
    }

/* Stuff for actual content
*/
div.lwd2_maxwidth {
    margin-left: 35px;
    max-width: 900px; /* large blocks of text aren't very readable */
    }

/* Placeholder for anything in the actual content, as opposed to just in the
    header or something
*/
div.lwd2_page {
    }

/* Stuff for the copyright footer
*/
p.lwd2_copyright {
    color: #bbbbbb;
    font-size: 8pt; /* small, unimportant */
    text-align: center;
    border-style: solid none none none; /* single blue line over the copyright */
    border-width: thin;
    margin: 0px;
    margin-top: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

/* Title of a page
*/
p.lwd2_pagetitle {
    font-size: 16pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 8pt;
    }

/* Normal text on a page
*/
div.lwd2 p {
    margin: 10pt;
    }

/* Section heading
*/
div.lwd2 h4 {
    margin: 10pt;
    margin-top: 15pt;
    font-size: 13pt;
    font-weight: bold;
    color: #aaffff;
    }


/* Section headings in the newsletter need to be large and white to stand out
*/
div.newsletter h4 {
    margin-bottom: 20pt;
    font-size: 15pt;
    color: #ffffff;
    text-align: center;
    }

/* Images with borders are annoying, get rid of them
*/
div.lwd2_page div.lwd2 img {
    margin: 5px;
    border: 0px;
    }

/* Images within header text should have no vertical margins, or it looks odd
    since they get top-aligned; this handles cases like the "long list" bullets
    on the army builder licensing page
*/
div.lwd2_page div.lwd2 h4 img {
    margin-top: 0px;
    margin-bottom: 0px;
    }

/* Screenshot and paragraph of text under it. Don't underline the words in links,
    because sometimes we'll have quite long descriptions, and that will look bad.
*/
div.lwd2_page div.lwd2 div.lwd2_screenshot img, div.lwd2_facebook iframe {
    margin: 0px;
    border-style: solid;
    border-width: 5px;
    border-color: #0e2a53;
    }
div.lwd2_page div.lwd2 div.lwd2_screenshot p, div.lwd2_page div.lwd2 div.lwd2_screenshot p : a {
    margin-top: 3px;
    text-decoration: none;
    }

/* Facebook like boxes use the same border as screenshots above, plus they need
    a background color specified
*/
div.lwd2_facebook iframe {
    background: #ffffff;
    }


/* Image that's a link - no margin, no border (because those look bad)
*/
div.lwd2_page div.lwd2 a img {
    margin: 0px;
    border: 0px;
    }

/* Emphasised paragraph - larger margins, bold
*/
div.lwd2_page div.lwd2 p.lwd2_important {
    margin-top: 15pt;
    margin-bottom: 15pt;
    font-weight: bold;
    }

/* Basic unordered and ordered lists
    NOTE: We use an extra left margin value to align the dot with the left
        margin of regular text, so the text appears indented but the dot is
        at the "normal" place.
*/
div.lwd2_page div.lwd2 ul, div.lwd2_page div.lwd2 ol, div.lwd2_page div.lwd2 ol li {
    margin: 10pt;
    margin-left: 2.5em;
    }
div.lwd2_page div.lwd2 ul li, div.lwd2_page div.lwd2 ol li {
    margin: 5pt 0pt;
    }
div.lwd2_page div.lwd2 ul li p, div.lwd2_page div.lwd2 ol li p {
    margin: 0px;
    margin-top: 1em;
    margin-bottom: 1em;
    }

/* "details list", "bullet list" and "HL game list"
    NOTE: The padding-left attribute for the third of these declarations is
        only for IE, it's overridden for other browsers that can render HTML
        properly in non_ie_styles.css
*/
div.lwd2_page div.lwd2 ul.lwd2_detailslist, div.lwd2_page div.lwd2 ul.lwd2_bulletlist, div.lwd2_page div.lwd2 ul.lwd2_hlgamelist {
    list-style: none;
    margin: 1em;
    list-style-position: inside;
    }
div.lwd2_page div.lwd2 ul.lwd2_detailslist li, div.lwd2_page div.lwd2 ul.lwd2_bulletlist li, div.lwd2_page div.lwd2 ul.lwd2_hlgamelist li {
    margin: 0px;
    margin-bottom: 7px;
    font-size: 13pt;
    font-weight: bold;
    }
div.lwd2_page div.lwd2 ul.lwd2_detailslist li p, div.lwd2_page div.lwd2 ul.lwd2_bulletlist li p, div.lwd2_page div.lwd2 ul.lwd2_hlgamelist li p {
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 10pt;
    font-weight: normal;
    padding-left: 3em;
    }
div.lwd2_page div.lwd2 ul.lwd2_detailslist li h4, div.lwd2_page div.lwd2 ul.lwd2_bulletlist li h4, div.lwd2_page div.lwd2 ul.lwd2_hlgamelist li h4 {
    padding-left: 2em;
    }

/* Details list & bullet list bullets
*/
div.lwd2_page div.lwd2 ul.lwd2_detailslist, div.lwd2_page div.lwd2 ul.lwd2_hlgamelist {
    list-style-image: url(images/lwd2_bullet.png);
    }
div.lwd2_page div.lwd2 ul.lwd2_bulletlist {
    list-style-image: url(images/lwd2_circle.gif);
    }

/* "plain list" - used because if we put a plain ul inside a detailslist ul,
    the plain ul inherits everything, which is annoying.
*/
div.lwd2_page div.lwd2 ul.lwd2_detailslist li ul.lwd2_plainlist {
    list-style: circle;
    margin: 10pt;
    list-style-position: inside;
    list-style-image: none;
    padding-left: 25px;
    }
div.lwd2_page div.lwd2 ul.lwd2_detailslist li ul.lwd2_plainlist li {
    margin: 5pt 0pt;
    font-size: 10.5pt;
    font-weight: normal;
    }

/* forms
*/
div.lwd2 p.formfield {
    margin: 7pt 10pt;
    }

div.lwd2 input[type="submit"] {
    margin: 15pt;
    padding: 3pt 10pt;
    }

/* forms
*/
div.download_list * p {
    margin: 1px 5px;
    }

/* code text
*/
pre.code {
    font-family: "Consolas", "Courier", "monospace";
    margin-left: 3em;
    }


/* Horizontal rule that goes the full width of a page
*/
div.lwd2_page hr.full_page_sep {
    margin-top: 15pt;
    margin-bottom: 15pt;
    border-color: #334e7e;
    }


/* Shadows used on the landing page
*/
.landing_page_shadow {
    -moz-box-shadow:0 0 10px #111;
    -webkit-box-shadow:0 0 10px #111;
    box-shadow:0 0 10px #111;
}


/* Slideshow-related styles
*/
#slideshow{
    background-color:#0e2a53;
    border:0px;
    height:265px;
    margin:10px auto 0;
    position:relative;
    width:420px;

    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow ul{
    height:265px;
    left:0px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:0px;
    width:420px;

    /* Reset changes we made in the general style sheet
    */
    margin: 0px;
    padding: 0px;
}

#slideshow li{
    position:absolute;
    z-index:5;

    /* The jquery slideshow lets us use display:none here, but prototype doesn't
        for some reason :(
    display:none;
    */

    /* Reset changes we made in the general style sheet
    */
    margin: 0px;
    padding: 0px;
}

#slideshow li img{
    /* Reset changes we made in the general style sheet
    */
    margin: 0px;
    padding: 0px;
}

#slideshow li:first-child{
    display:block;
    z-index:7;
}

#slideshow .slideActive{
    z-index:7;
}

#slideshow .arrow{
    height:43px;
    width:30px;
    position:absolute;
    background:url('images/slideshow_arrows.png') no-repeat;
    top:50%;
    margin-top:-22px;
    cursor:pointer;
    z-index:9;
}

#slideshow #title{
    position:absolute;
    top: 100%;
    width: 420px;
    text-align: center;
    font-size: 9pt;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}