/*======================================================================
 * Cyningstan: New Games for the ZX Spectrum
 * Cascading Style Sheet for mobile screens 720px and above
 *
 * Created: 24 January 2013
 */


/*----------------------------------------------------------------------
 * Overall Styling
 */

/* styles affecting the whole body */
body {
background-image: url(/images/page-background.png);
font-family: sans-serif;
font-size: 12px;
color: #ffcc33;
margin: 0px;
}

a {
color: white;
text-decoration: none;
}


/*----------------------------------------------------------------------
 * Header Styling
 */

/* overall header styling */
#header {
position: relative;
width: 100%;
height: 60px;
border-bottom: solid 1px #fc3;
overflow: hidden;
/* gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='black');
background-image: -ms-linear-gradient(top, #666 0%, black 100%);
background-image: -moz-linear-gradient(top, #666 0%, black 100%);
background-image: -o-linear-gradient(top, #666 0%, black 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, black));
background-image: -webkit-linear-gradient(top, #666 0%, black 100%);
background-image: linear-gradient(top, #666 0%, black 100%);
}

/* header title */
#header h1 {
margin: 0px;
padding: 0px;
padding-left: 8px;
line-height: 60px;
font-size: 30px;
overflow: hidden
}

/* box titles that are links */
#header h1 a {
color: #ffcc33;
}

/* header image */
#header img {
position: absolute;
top: 0px;
right: -0px;
height: 60px;
}


/*----------------------------------------------------------------------
 * Content Styling
 */

/* overall content styling */
#content {
width: 720px;
margin: 0px auto;
}

/* container boxes */
.box {
display: inline-block;
vertical-align: top;
background: url(/images/box-background.png);
margin-top: 4px;
margin-bottom: 4px;
overflow: hidden;
}

/* box title */
.box h2 {
height: 1em;
margin: 0px;
padding: 0px;
padding-left: 4px;
font-size: 18px;
line-height: 1em;
text-align: center;
border-bottom: solid 1px #fff;
overflow: hidden;
/* gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='black');
background-image: -ms-linear-gradient(top, #666 0%, black 100%);
background-image: -moz-linear-gradient(top, #666 0%, black 100%);
background-image: -o-linear-gradient(top, #666 0%, black 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, black));
background-image: -webkit-linear-gradient(top, #666 0%, black 100%);
background-image: linear-gradient(top, #666 0%, black 100%);
}

/* subtitles */
.box h3 {
margin: 8px;
}

/* box titles that are links */
.box h2 a {
color: #ffcc33;
}

/* paragraphs within boxes */
.box p {
margin: 4px 4px;
}

/*
 * Styling specific to the front page
 */

/* intro block styling */
.intro {
width: 472px;
margin-right: 8px;
}

/* latest news summary block styling */
.latest {
width: 240px;
}

/* the image for latest news */
.latest img {
float: right;
width: 120px;
border: solid 1px #666;
margin: 7px;
}

/* standard game box */
.game-summary {
width: 232px;
margin: 4px;
}

/* standard game summary title */
.game-summary h2 {
font-size: 12px;
border-bottom: none;
}

/* game introduction - usually suppressed */
.game-summary .intro {
display: none;
}

/* game images - usually suppressed */
.game-summary img {
display: none;
}

/* game release details */
.game-summary .release {
display: none;
}

/* game block styling */
.game-1 {
margin: 4px 0px;
width: 720px;
}

/* poster image */
.game-1 .cover {
display: inline-block;
vertical-align: top;
width: 192px;
border: solid 1px #666;
margin: 3px 23px;
}

/* introductory text */
.game-1 .intro {
display: inline-block;
vertical-align: top;
width: 240px;
margin: 4px 0px;
}

/* paragraph in introductory text */
.game-1 .intro p {
padding-top: 0px;
padding-bottom: 4px;
margin: 0px;
font-size: 10px;
}

/* screen shot box */
.game-1 .screens {
display: inline-block;
vertical-align: top;
width: 240px;
/* margin-top: 4px; */
}

/* screen shots */
.game-1 .screens img {
display: block;
width: 192px;
height: 144px;
border: solid 1px #666;
margin: 3px 23px;
}

/* release details */
.game-1 .release {
display: block;
text-align: center;
font-size: 12px;
font-variant: small-caps;
}

/* spacing between game boxes */
.game-2,
.game-3,
.game-4 {
width: 232px;
margin-top: 4px;
}

/* game summary titles - first three have underlines */
.game-1 h2,
.game-2 h2,
.game-3 h2,
.game-4 h2 {
border-bottom: solid 1px #fff;
}

/* game summary image - the top three are visible */
.game-2 .img-1,
.game-3 .img-1,
.game-4 .img-1 {
display: inline-block;
vertical-align: top;
width: 160px;
height: 120px;
border: solid 1px #666;
margin: 7px 35px;
}

/*
 * Styling specific to the news page
 */

/* most news summaries are 1/3 the width of the screen */
.news-summary {
width: 232px;
margin: 4px 4px;
}

/* much news summary content hidden by default */
.news-summary img,
.news-summary p,
.news-summary span {
display: none;
}

/* show the intro paragraph by default */
.news-summary .intro {
display: block;
width: 224px;
margin: 4px;
}

/* news summary main story */
.story-1 {
width: 720px;
margin: 4px 0px;
}

/* main story headline */
.story-1 span {
display: inline;
}

/* news summary image thumbnail for main story */
.story-1 img {
display: inline-block;
float: right;
border: solid 1px #666;
margin: 7px;
max-width: 344px;
}

/* news summary other paragraphs shown for main story */
.story-1 p {
display: block;
}

/* news summary intro paragraph hidden for main story */
.story-1 .intro {
display: none;
}

/* news story on the news story page */
.story {
width: 480px;
}

/* image in the news story page */
.story img {
float: right;
border: solid 1px #666;
max-width: 232px;
margin: 3px;
}

/* date paragraph */
.story .date {
font-style: oblique;
}

/* social network paragraph */
.story .social {
text-align: right;
}

/* "See also" column on news story page */
.story-news-list {
width: 232px;
margin-left: 8px;
font-size: 10px;
}

/*
 * Styling specific to a game page
 */

/* main game information box */
.game {
width: 480px;
}

/* cover image within the game box */
.game img {
float: right;
max-width: 232px;
border: solid 1px #666;
margin: 3px;
}

/* container for news and online play */
.game-news-play {
display: inline-block;
vertical-align: top;
width: 240px;
}

/* game news */
.game-news {
width: 232px;
margin-left: 8px;
font-size: 10px;
}

/* game play */
.game-play {
width: 232px;
margin-left: 8px;
font-size: 10px;
}

/* game detail */
.game-detail {
width: 720px;
}

/* screen shots */
.game-screens {
width: 720px;
}

/* screen shot thumbnail */
.game-screens .thumbnail {
display: inline-block;
vertical-align: top;
width: 172px;
margin: 4px;
}

/* screen shot thumbnail image */
.game-screens .thumbnail img {
max-width: 144px;
border: solid 1px #666;
margin: 3px 13px;
margin-bottom: 0px;
}

/* screen shot thumbnail caption */
.game-screens .thumbnail p {
margin-top: 0px;
text-align: center;
}

.game-files table td {
vertical-align: text-top;
}

/* the expanded screen or applet */
#expandedscreen
{
display: none;
position: absolute;
}

/* an image placed in the expanded screen */
#expandedscreen img
{
border: solid 1px #666;
background-color: black;
}

/* a title bar placed in the expanded screen for applets */
#expandedscreen a
{
display: block;
height: 15px;
margin: 0px;
padding: 0px;
padding-left: 8px;
font-size: 12px;
line-height: 15px;
text-align: center;
border-bottom: solid 1px #fff;
/* gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='black');
background-image: -ms-linear-gradient(top, #666 0%, black 100%);
background-image: -moz-linear-gradient(top, #666 0%, black 100%);
background-image: -o-linear-gradient(top, #666 0%, black 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, black));
background-image: -webkit-linear-gradient(top, #666 0%, black 100%);
background-image: linear-gradient(top, #666 0%, black 100%);
}


/*----------------------------------------------------------------------
 * Navigation Styling
 */

/* navigation style */
#nav {
display: none;
}


/*----------------------------------------------------------------------
 * Footer Styling
 */

/* main footer style */
#footer {
width: 100%;
clear: both;
border-top: 1px #fc3 solid;
margin-top: 4px;
}

/* footer paragraph */
#footer p {
margin: 2px;
padding: 0px;
text-align: center;
font-style: oblique;
}