/*======================================================================
 * Cyningstan: New Games for the ZX Spectrum
 * Cascading Style Sheet for mobile screens 480px 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: 40px;
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: 40px;
font-size: 24px;
overflow: hidden
}

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

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


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

/* overall content styling */
#content {
width: 480px;
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: 16px;
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 {
}

/* latest news summary block styling */
.latest {
}

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

/* standard game box */
.game-summary {
}

/* 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;
}

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

.game-1,
.game-3 {
margin-right: 8px;
}

.game-2,
.game-4 {
margin-left: 8px;
}

/* 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-1 .img-1,
.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 {
display: none;
}

/* show the intro paragraph by default */
.news-summary .intro {
display: block;
}

/* news summary main story */
.story-1 {
width: 472px;
}

/* 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: 224px;
}

/* 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: 480px;
}

/*
 * Styling specific to a game page
 */

/* main game information box */
.game {
width: 316px;
margin-right: 4px;
}

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

/* game news */
.game-news {
width: 160px;
font-size: 10px;
}

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

/* game play */
.game-play {
display: none; /* not enough room */
}

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

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

/* screen shot thumbnail image */
.game-screens .thumbnail img {
max-width: 96px;
border: solid 1px #666;
margin: 3px 7px;
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;
}

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

#expandedscreen img
{
border: solid 1px #666;
background-color: black;
}


/*----------------------------------------------------------------------
 * 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;
}