/*======================================================================
 * Cyningstan: New Games for the ZX Spectrum
 * Cascading Style Sheet for desktop screens
 *
 * Created: 17 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;
}

a:hover {
text-decoration: underline;
}

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

/* overall header styling */
#header {
position: relative;
width: 100%;
height: 80px;
border-bottom: ridge 3px #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: 80px;
font-size: 36px;
}

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

/* box titles that are links, highlighted */
#header h1 a:hover {
text-decoration: none;
}

/* header image */
#header img {
position: absolute;
top: 0px;
right: -0px;
border: none; /* only IE seems to need this */
}


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

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

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

/* box title */
.box h2 {
height: 24px;
margin: 0px;
padding: 0px;
padding-left: 8px;
font-size: 18px;
line-height: 24px;
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%);
}

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

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

/* box titles that are links, highlighted */
.box h2 a:hover {
color: #ffffff;
text-decoration: none;
}

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

/*
 * Styling specific to the front page
 */

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

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

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

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

/* standard game summary title */
.game-summary h2 {
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: 8px 0px;
width: 960px;
}

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

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

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

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

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

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

/* spacing between game boxes */
.game-2,
.game-3,
.game-4 {
margin-top: 8px;
margin-bottom: 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-2 .img-1,
.game-3 .img-1,
.game-4 .img-1 {
display: inline-block;
vertical-align: top;
width: 256px;
height: 192px;
border: solid 1px #666;
margin: 7px 27px;
}

/*
 * Styling specific to the news page
 */

/* most news summaries are 1/3 the width of the screen */
.news-summary {
width: 312px;
min-height: 144px;
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: 296px; /* shouldn't be needed but it is in chromium */
margin: 8px;
}

/* news summary main story */
.story-1 {
width: 960px;
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;
}

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

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

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

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

/*
 * Styling specific to a game page
 */

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

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

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

/* game news */
.game-news {
width: 312px;
margin-left: 8px;
}

/* game play */
.game-play {
width: 312px;
margin-left: 8px;
}

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

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

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

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

/*----------------------------------------------------------------------
 * Admin Styling
 */

/*
 * Menu Styling
 */

/* the admin menu box */
.admin-menu {
width: 960px;
}

/* main menu */
.admin-menu ul {
margin: 0px auto;
padding: 0px;
list-style-type: none;
}

/* an item in the main menu */
.admin-menu li {
display: inline-block;
width: 304px;
margin: 8px;
padding: 0px;
text-align: center;
}

/* a form button in the main menu */
.admin-menu li button {
border:0; 
padding:0; 
color: inherit; 
background:transparent;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color: white;
}

/* a form button that is hovered */
.admin-menu li button:hover {
text-decoration: underline;
cursor: pointer;
}

/* an icon image in the main menu */
.admin-menu li img {
display: block;
width: 224px;
margin: 0px auto;
border-style: none;
}

/*
 * Lists and associated styling
 */

/* typical record list box */
.list {
width: 640px;
}

/* a single record in a list */
.list .line {
clear: both;
white-space: nowrap;
overflow: hidden;
}

/* forms within a line */
.list .line form {
display: inline-block;
width: 62px;
}

/* double-width form */
.list .line form.wide {
width: 124px;
}

/* buttons */
.list .line button {
width: 100%;
}

/* principal fields of the record */
.list .line .fields {
padding-left: 4px;
}

/*
 * Forms and associated styling
 */

/* typical help box */
.help {
width: 312px;
margin-right: 8px;
}

/* typical data entry form box */
.entry {
width: 640px;
}

/* labels on forms */
.entry label {
display: inline-block;
vertical-align: text-top;
clear: left;
width: 152px;
margin-left: 8px;
}

/* input boxes on forms */
.entry input {
width: 468px;
margin: 0px;
margin-right: 8px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: #666;
outline-style: auto;
outline-width: 1px;
}

/* file inputs */
.entry input[type=file] {
border: none;
}

/* text areas */
.entry textarea {
font-family: sans-serif;
font-size: 100%;
width: 468px;
height: 12em;
margin: 0px;
padding: 0px;
/* border-style: none; */
border-style: solid;
border-width: 1px;
border-color: black;
outline-style: auto;
outline-width: 1px;
resize: none;
vertical-align: top;
}

/* select boxes */
.entry select {
width: 468px;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
outline-style: auto;
outline-width: 1px;
vertical-align: top;
background-color: #fff;
font-size: 100%;
}

/* multiple select box */
.entry select[multiple] {
height: 18px;
}

/* selector when hovered */
.entry select[multiple]:focus {
height: inherit !important;
}

/* fixed text in a record */
.entry span {
display: inline-block;
width: 468px;
}

/* submit and cancel buttons on forms */
.entry button {
width: 624px;
margin: 0px 8px;
}

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

/* navigation style */
#nav {
padding-bottom: 48px;
}

#nav ul {
width: 960px;
margin: 0px auto;
padding: 0px;
list-style-type: none;
text-align: right;
}

#nav li {
display: inline-block;
margin: 0px 8px;
}

#nav li.admin {
float: right;
}

#nav button {
border:0; 
padding:0; 
color: inherit; 
background:transparent;
font-size: 100%;
font-weight: normal;
text-decoration: none;
color: white;
}

#nav button:hover {
text-decoration: underline;
}



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

/* main footer style */
#footer {
position: fixed;
bottom: 0px;
width: 100%;
clear: both;
height: 32px;
background-image: url(/images/page-background.png);
opacity: 100%;
border-top: 3px #fc3 ridge;
margin-top: 8px;
z-index: 2
}

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