/************************************************************************/
/* Warrington Disability Partnership 2016                               */
/************************************************************************/
HTML
  {
  background: white;
  padding: 0;
  overflow-y: scroll;
  font-family: "Segoe UI",Arial, Helvetica, sans-serif;
  font-size: 14pt;
  }

BODY
  {
  margin: 0 auto;
  border: 0;
  padding: 0;
  color: black;
  background: white;
  }

:FOCUS
  {
  outline: 0;
  }

A, A:VISITED
  {
  color: navy;
  }

A:ACTIVE, A:HOVER
  {
  color: red;
  }

A.quiet,A.quiet:visited
{
  text-decoration:none;
  color:black;
}

/************************************************************************/
/* MAIN BLOCKS                                                          */
/************************************************************************/
HEADER,
NAV,
MAIN,
FOOTER
  {
  display: block;
  }

DIV.header,
DIV.menu,
DIV.main,
DIV.footer
  {
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 16px;
  }

/************************************************************************/
/* Header and Navigation                                                */
/************************************************************************/
HEADER
  {
  background-image: linear-gradient( top, #2266AC, #297DD1 );
  background-image: -ms-linear-gradient( top, #2266AC, #297DD1 );
  background-image: -moz-linear-gradient( top, #2266AC, #297DD1 );
  background-image: -webkit-linear-gradient( top, #2266AC, #297DD1 );
  border-bottom: solid #666666 1px;
  }

DIV.header
  {
  margin: auto;
  padding-top: 8px;
  overflow: auto;
  }

DIV.topname
  {
  font-size: 2.5rem;
  color: white;
  padding: 0 0 15px 0;
  
  }
  

NAV.desktop
  {
  top: 0;
  display: block;
  background: #EEEEEE ;
  box-shadow: 0 9px 8px rgba( 255, 255, 255, 0.5 ) ;
  }

DIV.menu
  {
  margin: 0 auto;
  padding: 0 16px;
  }

DIV.menu  A:FIRST-CHILD
  {
  margin-left: -16px;
  }

NAV.desktop A, NAV A:VISITED
  {
  display: inline-block;
  padding: 16px;
  color: #000000;
  text-decoration: none;
  font-size: 0.7em;
  text-transform: uppercase;
  font-family: Corbel, Calibri, Arial, Helvetica;
  font-weight: bold;
  }

NAV.desktop A:HOVER, NAV A:ACTIVE
  {
  padding-bottom: 8px;
  border-bottom: solid #2266AC 8px;
  color: white;
  background: #AAAAAA;
  }

DIV.menu A.last {
    float: right;
    border: 0;
    } 

NAV.desktop A.last:HOVER, NAV A.last:ACTIVE
  {
  padding-bottom: 8px;
  border-bottom: solid #2266AC 8px;
  color: white;
  background: #AAAAAA;
  }
  
    
DIV.mobilemenu A
  {
  border: 0;
  width: 300px;
  }

HEADER.mobile
  {
  display: none;
  }

/*======================================================================*/
/* Mobile Header and Nav                                                */
/*======================================================================*/
@media ( MAX-width: 800px )
  {
  HEADER.desktop
    {
    display: none;
    }
  
  HEADER.mobile
    {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    display: block;
    z-index: 99;
    box-shadow: 0 6px 6px rgba( 0,0,0,0.5 );
    background: rgba( 76,38,130,0.8 );
    background: #297DD1;
    }
  
  DIV.mobilemenu
    {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    }
  
  DIV.halfmenu
    {
    display: inline-block;
    width: 48%;
    box-sizing: border-box;
    padding: 8px;
    }
  
  DIV.menugate
    {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    vertical-align: top;
    }
  
  DIV.menugate:HOVER
    {
    cursor: pointer;
    }
  
  DIV.menuslide
    {
    display: block;
    position: absolute;
    top: 72px;
    left: 0px;
    right: 0;
    z-index: 6;
    background: yellow;
    padding-bottom: 0px;
    height: 0px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
  
  DIV.menuslide A
    {
    display: block;
    color: black;
    width: 100%;
    padding: 12px 0;
    font-family: Arial, Helvetica;
    font-size: 13pt;
    text-decoration: none;
    text-align: center;
    }
  
  DIV.menuslide A:FIRST-CHILD
    {
    border: 0;
    }
  
  DIV.menuslide A:HOVER
    {
    background: #297DD1;
    color: white;
    }
  
  DIV.mobilelogo
    {
    float: right;
    padding: 4px 4px 0 0;
    }
  
  DIV.mobilelogo IMG
    {
    height: 60px;
    }
  }

/************************************************************************/
/* Main Page Structure across site                                      */
/************************************************************************/
MAIN
  {
  display: block;
  }

DIV.main
  {
  min-height: 90vh;
  margin: 0 auto;
  padding: 16px;
  line-height: 1.5rem;
  overflow: hidden;
  }

DIV.mainpanel
  {
  display: inline-block;
  padding-right: 20px;
  vertical-align: top;
  width: 70%;
  box-sizing: border-box;
  float: left;
  }

DIV.sidepanel, DIV.sidepanelcandy,DIV.sidepanelshaded
  {
  display: inline-block;
  box-sizing: border-box;
  width: 30%;
  float: left;
  font-size: smaller;
  }

DIV.sidepanelshaded
  {
  background:#E1EDF9;
  padding:0 8px 0 8px;
  }


DIV.caption
  {
  padding-top: 0;
  margin-top: 0;
  font-size: 0.80rem;
  padding-bottom: 8px;
  }

DIV.mobilecandy
  {
  display: none;
  }
  
 DIV.share IMG
  {
  width: 40px;
  height: 40px;
  border: 0;
  padding:0 0 0 4px;
  }
  

@media SCREEN AND ( MAX-width: 640px )
  {
  DIV.mainpanel
    {
    display: block;
    float: none;
    width: auto;
    padding-right: 0;
    }
  
  DIV.sidepanel
    {
    display: block;
    float: none;
    width: auto;
    padding-right: 0;
    }
  
  .eyecandy, DIV.sidepanelcandy
    {
    display: none;
    }
  
  DIV.mobilecandy
    {
    display: block;
    }
  }

/************************************************************************/
/* Main styles across site                                              */
/************************************************************************/
H1
  {
  margin-top: 0;
  line-height: normal;
  color: #2266AC;
  font-family: Cambria, Constantia, Georgia ;
  font-weight: normal;
  }

H2
  {
  line-height: normal;
  color: #2266AC;
  font-family: Cambria, Constantia, Georgia ;
  font-weight: normal;
  }

.smaller
  {
  font-size: smaller;
  }

TABLE.data
  {
  width: 90%;
  }

TABLE.data TH
  {
  font-weight: bold;
  text-align: left;
  }

TABLE.data TD
  {
  padding: 8px 0 8px 0;
  }

/************************************************************************/
/*Links with small logos                                                */
/************************************************************************/ 

DIV.logosmall
{
  display:table-cell;
  padding-right:6px;
}

DIV.logosmall IMG
{
  width:50px;
}

DIV.logolink
{
  display:table-cell;
  vertical-align:middle;
}


/************************************************************************/
/* Breadcrumb trail                                                     */
/************************************************************************/
UL.breadcrumb
  {
  list-style: none;
  overflow: hidden;
  padding-left: 0;
  margin: 0 0 16px 0;
  color: black;
  background: #EEEEEE;
  background: #EEEECC;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 ) ;
  font-size: 0.8rem;
  }

UL.breadcrumb LI
  {
  float: left;
  }

UL.breadcrumb A,
UL.breadcrumb SPAN
  {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: auto;
  height: 36px;
  padding: 4px 8px 8px 20px;
  }

UL.breadcrumb LI:FIRST-CHILD A
  {
  padding-left: 12px;
  }

UL.breadcrumb A
  {
  color: black;
  background: white;
  text-decoration: none;
  }

UL.breadcrumb A:AFTER
  {
  content: "";
  display: inline-block;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 12px solid black;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  }

UL.breadcrumb LI:NTH-CHILD( 1 ) A { background: #287ACC; }
UL.breadcrumb LI:NTH-CHILD( 1 ) A:AFTER { border-left-color: #287ACC; }
UL.breadcrumb LI:NTH-CHILD( 2 ) A { background: #6EA8E2; }
UL.breadcrumb LI:NTH-CHILD( 2 ) A:AFTER { border-left-color: #6EA8E2; }
UL.breadcrumb LI:NTH-CHILD( 3 ) A { background: #B7D4F1; }
UL.breadcrumb LI:NTH-CHILD( 3 ) A:AFTER { border-left-color: #B7D4F1; }
UL.breadcrumb LI:NTH-CHILD( 4 ) A { background: #E1EDF9; }
UL.breadcrumb LI:NTH-CHILD( 4 ) A:AFTER { border-left-color: #E1EDF9; }


UL.breadcrumb LI:HOVER A
  {
  background: #E2B30E;
  color: white;
  }

UL.breadcrumb LI:HOVER A:AFTER
  {
  border-left-color: #E2B30E;
  }

  



@media SCREEN AND ( MAX-width: 800px )
  {
  UL.breadcrumb
    {
    display: none;
    }
  }

/*======================================================================*/
/* Front page  only                                                     */
/*======================================================================*/

 DIV.topbanners
{
display: table;
width: 100%;
margin-bottom:22px;

}

DIV.banner
{
display: table-cell;  
width: 67%;
vertical-align: top; 
padding-right:16px;
}

DIV.banner H1
{
margin-top: 0;
padding: 8px 4px;
background: #DDDDDD;
margin-bottom:0;
font-family:Arial;
font-size:18pt;
}


DIV.banner IMG
{
  display:block;
}

DIV.thankyoubox
{
position:relative;
display: table-cell; 
width:33%;
vertical-align: top; 
padding: 0 16px 32px 0;  
}

DIV.thankyoubox H2
{
margin-top: 0;
padding: 8px 4px;
background: #DDDDDD;
font-family:Arial;
font-size:18pt;
}

DIV.thankyoubox P
{
font-size: 0.8rem;
}

DIV.thankyoubox A
{
display: block;
bottom: 0;
left: 0;
overflow: hidden;
}

IMG.icon
{
position: absolute;
top: -4px;
right: 20px;
width: 56px;
height: auto;
border: 0;
}

DIV.frontboxes
  {
  display: table;
  width: 100%;
  padding-bottom: 16px;
  }

DIV.frontbox
  {
  display: table-cell;
  position: relative;
  width: 33%;
  overflow: hidden;
  padding: 0 16px 32px 0;
  font-size: 0.8rem;
  }

DIV.frontbox IMG
  {
  position: absolute;
  top: 0;
  right: 24px;
  width: 56px;
  height: auto;
  border: 0;
  }

DIV.frontbox H2
  {
  margin-top: 4px;
  padding: 8px 4px;
  background: #DDDDDD;
  font-family:Arial;
  font-size:16pt;
  }

DIV.frontbox P
  {
  width: 90%;
  }

DIV.frontbox A
  {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 24px;
  overflow: hidden;
  }

DIV.intro
  {
  display: table-cell;
  box-sizing: border-box;
  margin-right: 16px;
  width: 890px;
  }

DIV.sponsorlogo
  {
  display: table-cell;
  width: 200px;
  box-sizing: border-box;
  vertical-align: top;
  }
  
  IMG.thankyou
{
position: relative;
border: 0;
}


@media SCREEN AND ( MAX-width: 800px )
  {
  
  DIV.topbanners
    {
    display: block;
    }
  
  DIV.thankyoubox
    {
    display: block;
    width: auto;
    padding: 32px 0 32px 0;
    }
  
  DIV.thankyoubox IMG
    {
    right: 8px;
    width: 64px;
    }
  
    DIV.frontboxes
    {
    display: block;
    }
  
  DIV.frontbox
    {
    display: block;
    width: auto;
    padding: 0 0 32px 0;
    }
  
  DIV.frontbox IMG
    {
    right: 8px;
    width: 64px;
    }
  
  DIV.frontbox A
    {
    position: relative;
    height: auto;
    }

  DIV.intro
  {
  display: block;
  width: 100%;
  }

DIV.sponsorlogo
  {
  display: block;
  width: 100%; 
  }
  }

@media SCREEN AND ( MAX-width: 400px )
  {
  DIV.frontbox IMG
    {
    display: none;
    }
    
     DIV.thankyoubox IMG
    {
    display: none;
    }
  }

/*======================================================================*/
/* Box Navigation                                                       */
/*======================================================================*/
DIV.boxrow
  {
  display: table-row;
  }

DIV.navbox
  {
  display: inline-block;
  width: 270px;
  height: 290px;
  overflow: hidden;
  padding: 0;
  border: solid gray 1px;
  margin: 0 10px 16px 0;
  background: white;
  font-size: 0.8rem;
  }

DIV.navbox IMG
  {
  display: block;
  width: 100%;
  height: 130px;
  border: 0;
  }

DIV.navbox H2
  {
  margin-top: 6px;
  padding: 0 8px 8px 8px;
  }

DIV.navbox P
  {
  margin-top: 0;
  padding: 0 8px 8px 8px;
  }

DIV.boxspacer
  {
  display: table-cell;
  width: 24px;
  }

DIV.navbox H2
  {
  line-height: normal;
  color: #A0BDF0;
  font-size: 1.02rem;
  margin-bottom: 0;
  }

DIV.navbox A, DIV.navbox A:VISITED
  {
  color: navy;
  }

DIV.navbox A:ACTIVE, DIV.navbox A:HOVER
  {
  color: red;
  }

/*======================================================================*/
/* Teams                                                                */
/*======================================================================*/
DIV.members
  {
  overflow: hidden;
  }

A.member
  {
  display: inline-block;
  width: 250px;
  height: 320px;
  overflow: hidden;
  float: left;
  margin: 0 16px 16px 0;
  border: 0;
  font-size: smaller;
  text-decoration: none;
  text-align: center;
  background: white;
  box-shadow: 0 2px 4px rgba( 127, 127, 127, 0.33 ) ;
  }

A.member, A.member:VISITED
  {
  color: black;
  }

A.member:ACTIVE, A.member:HOVER
  {
  color: #CC0000;
  }

A.member IMG
  {
  width: 100%;
  height: auto;
  border: 0;
  }

@media SCREEN AND ( MAX-width: 590px )
  {
  A.member
    {
    display: block;
    width: auto;
    height: auto;
    padding-bottom: 16px;
    float: none;
    }
  }

/*======================================================================*/
/* Information pages                                                    */
/*======================================================================*/
SPAN.concessiontitle
  {
  font-weight: bold;
  }

/*======================================================================*/
/* Blog                                                                 */
/*======================================================================*/

DIV.mainpaneldotted 
{ 
padding-right:12px; 
border-right: 
dotted silver 1px; 
}

DIV.sidepaneldotted 
{ 
padding-left:12px; 
}

DIV.blogphoto 
{ 
width:100%; 
max-height:400px; 
background:silver; 
margin-bottom:16px;
}

DIV.blogphoto IMG 
{ 
display:block; 
max-width:100%; 
max-height:400px; 
width:auto; 
height:auto; 
margin:auto; 
}

P.intro 
{ 
color:#661122; 
}

A.quiet, A.quiet:VISITED 
{ 
text-decoration: none; 
}

A.quiet:ACTIVE, A.quiet:HOVER 
{ 
text-decoration: underline; 
}

UL.noindent 
{ 
margin-left: 1em; padding-left: 0; 
}

IMG.thumbnailmember 
{ 
width:96px; 
padding:4px; 
box-shadow:4px 4px 4px rgba( 127, 127, 127, 0.5 ); 
}


/*======================================================================*/
/* Training Pages                                                       */
/*======================================================================*/
A.trainingcourse
  {
  display: table;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  }

A.trainingcourse, A.trainingcourse:VISITED
  {
  color: black;
  background: #D3D3D3;
  text-decoration: none; 
  }

A.trainingcourse:ACTIVE, A.trainingcourse:HOVER
  {
  background: #ACACAC;
  text-decoration: none; 
  }

DIV.trainingcoursedetails
  {
  display: table-cell;
  width: 80%;
  padding: 8px;
  }

DIV.trainingplacesred, DIV.trainingplacesamber, DIV.trainingplacesgreen
  {
  display: table-cell;
  width: 20%;
  padding: 8px;
  text-align: center;
  color: white;
  }

DIV.trainingplacesYes
  {
  background: #008000 ;
  }

DIV.trainingplacesNo
  {
  background: #C93D27;
  }

@media screen AND ( max-width: 800px )
  {
  A.trainingcourse, DIV.trainingplacesYes, DIV.trainingplacesNo
    {
    display: block;
    width: auto;
    text-align: left;
    }
  }

 /*======================================================================*/
/* Event Pages                                                       */
/*======================================================================*/
A.event
  {
  display: table;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  }

A.event, A.event:VISITED
  {
  color: black;
  background: #D3D3D3;
  text-decoration: none; 
  }

A.event:ACTIVE, A.event:HOVER
  {
  background: #ACACAC;
  text-decoration: none; 
  }

DIV.eventdate
  {
  display: table-cell;
  width: 25%;
  padding: 8px;
  }

DIV.eventtitle
  {
  display: table-cell;
  width: 75%;
  padding: 8px;
  }


@media screen AND ( max-width: 800px )
  {
  A.event, DIV.eventdate, DIV.eventtitle
    {
    display: block;
    width: auto;
    text-align: left;
    }
  }
/*======================================================================*/
/* 25 years section                                                     */
/*======================================================================*/

DIV.spacer
{
  display:table-cell;
  width:10%;
}

DIV.sponsorcolumns
{
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    box-align:top;
    -moz-box-align:top;
    -webkit-box-align:top;

}


/*======================================================================*/
/* News Pages                                                           */
/*======================================================================*/
P.newsindex A
  {
  font-family: Cambria, Constantia, Georgia ;
  }

/*======================================================================*/
/* Forms                                                                */
/*======================================================================*/
INPUT.modern, TEXTAREA.modern
  {
  box-sizing: border-box;
  width: 90%;
  border: solid #666666 1px;
  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  }

INPUT.modern:FOCUS, TEXTAREA.modern:FOCUS
  {
  border: solid #333333 1px;
  }
  
INPUT.modernsmall
  {
  box-sizing: border-box;
  width: 40px;
  border: solid #666666 1px;
  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  }

LABEL.modern
  {
  display: inline-block;
  box-sizing: border-box;
  width: 90%;
  font-weight: bold;
  color: #666666;
  }

LABEL.modern SPAN.required
  {
  float: right;
  font-size: smaller;
  text-transform: uppercase;
  color: #CC6666;
  }

P.smallprint
  {
  width: 90%;
  font-size: 0.75rem;
  color: #808040;
  }

BUTTON.modern
  {
  padding: 12px;
  font-size: 0.9rem;
  border: solid #666666 1px;
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.25 ) ;
  background: linear-gradient( #EEEEEE, #CCCCCC ) ;
  }

BUTTON.modern:HOVER
  {
  color: #CC0000;
  border: solid #333333 1px;
  }

SPAN.booklink, SPAN.booklink A, SPAN.booklink A:hover, SPAN.booklink A:visited, SPAN.booklink A:active
  {
  color: #808080;
  }

INPUT.searchbox
  {
  box-sizing: border-box;
  width: 70%;
  border: solid #666666 1px;
  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  }




@media SECREEN AND ( MAX-width: 400px )
  {
  INPUT.modern, TEXTAREA.modern, LABEL.modern, P.smallprint
    {
    width: 100%;
    }
  }

/*======================================================================*/
/* Footer                                                               */
/*======================================================================*/
FOOTER
  {
  background: #2266AC ;
  }

DIV.footer
  {
  margin: auto;
  padding: 16px;
  color: #D3D3D3;
  }


DIV.footer A, DIV.footer A:visited
{
    color:white;
}
DIV.footeraddress
  {
  display: inline-block;
  font-size: 0.8rem;
  color:white;
  }

DIV.footericons
  {
  display: inline-block;
  float: right;
  }

DIV.footericons IMG
  {
  display: inline-block;
  margin-left: 12px;
  height: 64px;
  width: auto;
  box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.33 ) ;
  }

@media SCREEN AND ( MAX-width: 640px )
  {
  DIV.footericons
    {
    display: block;
    float: none;
    }
  
  DIV.footericons IMG
    {
    margin: 16px 0 0 8px;
    height: 48px;
    }
  }


DIV.socialicons
  {
  display: inline-block;
  }

DIV.socialicons IMG
  {
  display: inline-block;
  height: 24px;
  padding-right:6px;
  width: auto;
  }


/************************************************************************/
/* RWD Needs moving around to right bit of style sheet                  */
/************************************************************************/
@media SCREEN AND ( MAX-width: 800px )
  {
  DIV.main
    {
    padding-top: 88px;
    }
  
  DIV.boxspacer
    {
    display: none;
    }
  
  DIV.blogcell
    {
    display: block;
    width: auto;
    padding: 0;
    }
  
  DIV.navbox
    {
    display: block;
    width: auto;
    height: auto;
    }
  
  DIV.navbox IMG
    {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    }
  
  }