@charset "utf-8";
/* CSS Document - I've put the useful info first - note: the navbar CSS is in the SpryAssets folder */


html {
background-image:url(../website/images/grass-background.jpg);
background-repeat:repeat;
height:100%;
}

body {
background-color:#800000;
background-image:url(../website/images/grassy-edge-expanded.png); 
background-position:top center;
background-attachment: fixed;
}


#header {
background-color:none; /*is you change the background colour, you'll probably want to change the colour of the whole drop down menu. see the CSS file in the SPRY directory for the submenu colours etc */
}


/* the logo positioning - it "floats" over the other items in the header, so you can nudge it anywhere - the logo needs to have a transparent background to work effectively */
#logo {
position:relative;
left:80px;
top:2px;
z-index:100;
}


/* if you change the logo position, it may obscure the text in the header.... you can move the text further right with this padding*/
/*if you change the padding / position here, you will also need to update it in the "ie6hacks.css" file.*/
#header-text {
padding:50px 0 0 180px;
z-index:4000;
position:absolute;
top:50px;
}

#wetweather-box {
padding:0px 0 0 0px;
z-index:4001;
position:absolute;
left: 650px;
text-align:center; 
top:50px;

}





/* this is the general text colour for paragraphs*/
.column {
/* color:#838383;  */
color: white;
}



/* this changes the appearance of anchor LINKS*/
a {
text-decoration:none; 
/* color:#a5a5a5;  */
color:skyblue; /* ffffff */
border-width: 0px 0px 1px 0px;  
border-style: none none dotted none; 
}

a img {
border: none;  
border-style: none none none none;  
}

a:hover {
/* text-decoration:underline;  */
text-decoration:none; 
/* color:#a5a5a5;  */
color:#ffffff;  
border-width: 0px 0px 1px 0px;  
border-style: none none solid none;  
}

/*
a:visited {
color:purple;
*/

}










/* The remaining CSS information..........................................................*/




/* this is a special wrapper that you need to use if you want a scraggy edge when using a grass background..........................................................
background-color was #800000;
*/
#grassy-edge-wrapper {
margin:0px auto 0px auto;
background-image:none;

}


#grassy-edge-wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}



#grassy-edge-wrapper-top {
background-image:url(../website/images/grassy-edge-wrapper-top20.png);
background-repeat:no-repeat;
background-position:center;
padding-top:20px;   /*  was 80px  */
}

#grassy-edge-wrapper-bottom {
background-image:url(../website/images/grassy-edge-wrapper-bottom.png);
background-repeat:no-repeat;
background-position:center top;
top:-15px;
height:55px;
}


#grassy-edge-wrapper-center {

/*background-image:url(../website/images/grassy-edge-wrapper-center.png);*/

background-repeat:repeat-y;
background-position:center;

margin:0px auto 0px auto;
}



body {
background-repeat:repeat;
padding:0px;
margin:0px;
font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
}

#outer-wrapper {
margin:0px auto 0px auto;
padding:8px 0px 8px 0px;
width:978px;
position:relative;
}

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


#inner-wrapper {
margin:auto;
width:962px;
}

/*heading section - part 1 - the Menu Bar 
the menu bar CSS can be found in the SPRY folder, under the name "spryMenuBarHorizontal.css"..............................*/


/*header section part 2 - the logo / club name / and big photograph .......*/

h1 {
margin:0px;
padding:0px;
padding-top:16px;
font-size:1.8em;
font-weight:bold;
text-transform:uppercase;
color:skyblue;
}

#header p{
padding:0px;
margin:0px;
text-transform:uppercase;
color:skyblue;
font-size:0.8em;
font-weight:bold;
}


#header-photo {
position:relative;
width:960px;
height:640px;  /* was 247, 230px */
/* left: -20px;  */
/* top: -90px;  */
background-image:url(../custom/backgroundimage.png);  
/* background-image:url(../custom/SemiTransparentBackgroundPhoto.png);   */
z-index:90;
}

/*
.wetweather-box {
margin-bottom:6px;
position:relative; 
text-align:center; 
top:-110px; 
left:300px;
}
*/

.wetweather-heading {
color:white;
text-transform:uppercase;
font-size:1.6em;
padding:14px 0 0 20px;
}


#feature-footballer {
position:absolute;
left:640px;
top:35px;
z-index:8000;
}

/*end of heading section */



/*start of styling the columns .............................................................................*/

#columns-wrapper {
position:relative; 
top:-510px; /*   was -80, -55, then -80, now -580 this is to push the columns over the semi-transparent header photo (stadium photo in the example template). If the club using this template does not have a suitable semi-transparent photo, then you probably don't want the column headers to sit over the image. remove this "top:-20px" command
With a larger image, this value has to also be larger
*/
display:inline-block;
clear:both;
z-index:100;
}







.column {
float:left;
width:272px;
margin:8px 13px 10px 0;
}

.column-info:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}



.column-box {
margin-bottom:6px;
}



.column-border { /*this becomes redundant in this template (as there are no column borders. however I have left it active, since it is padding out the columns correctly */
padding:0px 2px 2px 2px;
margin:0;
}

.column-border-for-sponsors {
background-color:#a5a5a5;
padding:1px 1px 1px 1px;
}

.column-info {
padding: 0 2px 1px 10px;
margin:0;
font-size:0.9em;
}

.column-info2 {
padding: 0 2px 1px 0px;
margin:0;
font-size:0.9em;
}

.column-info-shaded {
background-color:#800000;
padding: 1px 0px 1px 0px;
margin:0;
font-size:0.9em;
text-align:center;
}

/* Single column width should be almost full width...*/
#single-column {
width:95%;
}


/* left column width was 370
   then 460 with only 2 columns
   Changed to 360 for 3 columns again */
#left-column {
/* width:360px;  Jarrod requested all 3 columns same width*/
width:320px;
}


#left-column p {
float:left;
font-size:0.9em;
width:320px;
}

/*
#left-column p.newstext-with-photo {
width:200px;
}

#left-column img {
float:right;
width:124px;  
padding:5px 0 5px 10px;
}
*/


#vertical-line {
width:4px;
border-right:dotted 1px #838383;
}

/* middle column width was 302 then 332, 
   then 460 when only 2 columns */
#middle-column {
/* width:400px;  */
width:300px;
}

#middle-column table {
cursor: pointer;
}

.row-header {
font-weight:bold;
/* color:#a5a5a5;  */
font-weight:bold;
color:skyblue;
padding:5px 0 0 10px;
}

.match-result {
font-weight:bold;
}

.home-team {
padding-left:5px;
}

.MyTeam {
font-weight:bold;
color:#FFC400;
}

#right-column {
float:right;
/* width:160px; */
width:300px;
}

h2 {
padding:0;
margin:0;
z-index:50;
}

.coloured-heading {
color:skyblue;       /* FFC400 */
text-transform:uppercase;
font-size:1em;
padding:20px 0 0 20px;
background-color:none;
}

.uncoloured-heading {
color:skyblue;        /* FFC400 */
text-transform:uppercase;
font-size:1.6em;
padding:14px 0 0 20px;
}


h3 {
font-weight:bold;
font-size:1.2em;
padding:20px 0 10px 0;
color:skyblue;   /* FFC400 */
font-stretch:condensed;
margin:20px 0 0 0;
border-top:dotted 1px #838383;
clear:both;
}

.firstH3 {
padding:0px 0 10px 0;
border:none;
}

.column p {
margin:0 0 20px 0;
font-weight:bold;
}

.read-more {
text-align:right;
font-weight:bold;
position:relative;
right:20px;
}


/*style the photo scroller on the homepage .............................................................................*/

#photo-scroller {
clear:both;
}


.photo-wrapper {
list-style-type:none;
height:104px;
float:left;
}



.photo-wrapper img{
width:104px;
height:104px;
margin:4px;
border:1px solid #868165;
}


.prev {
background-image:url(../images/left-arrow.png);
background-repeat:no-repeat;
background-position:right;
padding:0 5px 0 0px;
margin:3px 5px 3px 0;
width:26px;
height:104px;
float:left;
}


.next {
background-image:url(../images/right-arrow.png);
background-repeat:no-repeat;
background-position:left;
width:26px;
height:104px;
float:left;
margin:3px 0 0 5px;
padding:0 0 0 5px;
}

.see-more-photos {
text-align:right;
font-weight:bold;
position:relative;
top:80px;
right:10px;
color:red;
}

.clear {
clear:both;
}




/*style the footer .............................................................................*/

#footer {
color:white;
text-align:center;
}

#footer p {
padding:5px 0 0 0;
margin:0;
font-size:0.9em;
}

#footer-line {
height:5px;
clear:both;
margin:0px;
}

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



#footer-outside {
background-image:url(../website/images/grass-background.jpg);
background-repeat:repeat;
color:white;
text-align:center;
font-size:1.2em;
}

#footer-outside p {
margin:0;
padding:0;
}