@import 'lib/reset.css';

@import 'lib/typography.css';

@import 'lib/grid.css';

@import 'lib/forms.css';

/* Plugins:
   Additional functionality can be found in the plugins directory.
   See the readme files for each plugin. Example:
   @import 'plugins/buttons/buttons.css'; */
@import 'plugins/buttons/buttons.css';

/* See the grid:
   Uncomment the line below to see the grid and baseline.
   .container { background: url(lib/grid.png); } */
   
/* Colour palette *
pink #ee2b74
light blue #0099cc
*/

body {
	background: #FFF;
}
.clear {
	margin: 0;
	padding: 0;
	clear: left;
}
ol ul,
ol li p,
table ul {
  font-size:100%;
}
ol li {
/*  border-bottom:1px solid #E9E9E9;*/
  padding: 20px 0 0 0;
}
ol li li {
  border:none;
}
ol li ul li {
  padding:5px;
}
#page-wrapper {
  width:970px;
  overflow:hidden;
  margin:auto;
}
#wrap-header  {
  background-color:#004b8d;
}
#wrap-search {
  background-color:#c1d82e;
}
/*#wrap-maincontent .inner  {
  background:url(../../images/bg-body-blue.png) repeat-x left top #e9e9e9;
}*/
#wrap-footer  {
  background-color:#E5ECF2;
  overflow:hidden;
  border-top: 1px solid #c8c8c8;
}
#home #wrap-maincontent  {
  padding-bottom:40px;
	background-color:#E5ECF2;
}

#header,
#search,
#maincontent,
#footer {
	width: 920px;
	margin: 0 auto;
	padding:0 20px;
}
#header {
	height: 100px;
	position: relative;
}
#search {
	height: 48px;
	position: relative;
}
#maincontent {
	overflow: hidden;
	padding-top:30px;
	padding-bottom:40px;
}
#home #maincontent {
	padding-right:0;
	padding-left:0;
	width:970px;
}

#home #maincontent {
	padding: 50px 0 0 0;
	width:970px;
}
  #leftcol {
  	float: left;
  	width:150px;
  	padding-right:40px;
  }
  #rightcol {
    float: right;
    padding-left: 20px;
  }
  #midcol {
  	float: left;
  	width: 540px;
  }
  #midcol li  {
    padding: 6px 0;
  }
    #midcol img {
      float:right;
      background-color:#FFF;
      padding:8px;
      margin-left:20px;
    }
  #credits {
  	clear: left;
  	width: 960px;
  }
  #footer img {
  	float: right;
  }
  #footer ul {
  	margin-top: 16px;
  	margin-bottom:12px;
  	margin-left:0;
  }
  #footer ul li {
  	display: inline;
  	margin: 0 20px 0 0;
  }
    #footer ul li a {
    	font-size: 11px;
    	color: #333333;
    }
    #footer ul li a:hover {
    	text-decoration: none;
    }
/* ________________________________________________________ Header */
#header h1 {
  left: 24px;
  position: absolute;
  top: 85px;
  font-size:2em;
}
  #header h1 a{
  	color:#FFF;
  	text-decoration:none;
  }
img#abrsmLogo {
  position:absolute; 
  top:0; 
  left:25px;
}
form#repsearch {
	position:absolute;
	bottom:11px;
	left:208px;
	margin-bottom:0;
}
  form#repsearch select {
    margin-bottom:0;
    float:left;
    display:block;
    margin-right:14px;
    padding:3px;
  }
  form#repsearch label {
    display:none;
  }
  form#repsearch h4 {
    display:block;
    float:left;
    font-size:1.2em;
    margin: 4px 12px 0 0;
    color:#000;
    vertical-align:middle;
  }

#intro #persistent-ctas {
  background: url(../../images/headers/intro.jpg) no-repeat left top;
}

#enter #persistent-ctas {
  background: url(../../images/headers/enter.jpg) no-repeat center top;
}

#assess #persistent-ctas {
  background: url(../../images/headers/assessment.jpg) no-repeat center top;
}

#repertoire #persistent-ctas  {
  background: url(../../images/headers/repertoire.jpg) no-repeat center top;
}

#regulations #persistent-ctas {
  background: url(../../images/headers/regulations.jpg) no-repeat center top;
}

#contact #persistent-ctas {
  background: url(../../images/headers/regulations.jpg) no-repeat center top;
}
/* _______________________________________Main Site Navigation, utilitynav, sub-navigation, breadcrumb, pagination etc */
#mainnav {
	position: absolute;
	right: -6px;
	top: 66px;
}
  #mainnav ul {
  	position: relative;
  	margin-right:0;
  	overflow:hidden;
  	font-size:2em;
  }
    #mainnav li {
    	list-style: none;
    }
    #mainnav li,
    #mainnav a,
    #utilitynav li,
    #utilitynav a {
      float:left;
    	display: block;
    }
    #mainnav a {
    	text-decoration: none;
      padding: 4px 39px;
      text-decoration:none;
    	color:#d1deea;
    }
    #mainnav a:hover {
    	color:#FFF;
      text-decoration:none;
      }
    #mainnav li.selected a {
      color:#C1D82E;
    	text-decoration:none;
    	background: url(../../images/pointer.png) no-repeat center bottom;
    }
    #mainnav li:last-child a {
      margin-right: 0;
    }
    
#utilitynav {
	position: absolute;
  right: 23px;
  top: 20px;
}
  #utilitynav ul  {
    margin-right:0;
    font-size:1.1em;
  }
    #utilitynav a {
    	text-decoration: none;
    	padding:4px 6px;
    	color:#d1deea;
    }
    #utilitynav a:hover,
    #utilitynav li.selected a   {
    	text-decoration: underline;
    	color:#fff;
    }

/* Sub Navigations */
#leftcol #mininav {
	float: left;
	width:150px;
	background-color:#e5ecf2;
}
#mininav ul {
	margin: 0;
	margin: 10px;
	background-color:#01437d;
	border: 1px solid #07355d;
}
  #mininav ul li {
  	display: block;
  	list-style-type:none;
  }
    #mininav a {
    	display: block;
      border-bottom: 1px solid #07355d;
      padding: 6px 4px;
      text-decoration:none;
      color:#FFF;
    }
    #mininav ul li.selected a,
    #mininav ul li.selected a:hover {
      background-color:#c1d82e;
      color:#07355D;
    }   
    #mininav ul li a:hover {
    	text-decoration: underline;
/*      background-color:#ee2b74;*/
      background-color:#07355d;
      color:#FFF;
    }
      #mininav ul ul {
        margin:0;
        display:none;
        padding:0;
        border:0;
      }
      #mininav ul ul li a {
        padding-left:6px;
        border-color:#9caf21;
        padding-right:12px;
      }
      #mininav ul li.selected ul {
        display:block;
      }
      #mininav ul li.selected li a {
        background-color:#e1f370;
        color:#07355D;
      }
          #mininav li.selected a {
           border-color:#9caf21; 
          }
        #mininav ul li.selected ul li a:hover {
          color:#07355D;
          text-decoration:underline;
          background-color:#e1f370;
        }
        #mininav ul li.selected ul li.selected a{
          background: #e1f370 url(../../images/arrow-pink.png) no-repeat right 12px;
          color:#07355D;
          text-decoration:underline;
        }
      
      
/* _________________ Persistent ctas */
#persistent-ctas  {
  width:160px;
  display:block;
  overflow:hidden;
  background-color:#dfe6ec;
  padding-top:160px;
}
  #persistent-ctas ul {
  	margin: 0;
  }
    #persistent-ctas	ul li {
    	list-style: none;
    	position: relative;
    	display: block;
    }
      #persistent-ctas li a {
        border-bottom:1px solid #FFF;
        display:block;
        padding:10px 6px 10px 8px;
        text-decoration:none;
      	color:#07355D;
        letter-spacing: -0.2px;
        background: #E5ECF2 url(../../images/arrow-blue.png) no-repeat  133px -24px;
      }
      #persistent-ctas li a:hover {
        color:#FFF;
      	background: #ee2b74 url(../../images/arrow-blue.png) no-repeat  133px 6px;
      }
      #persistent-ctas li a span {
        text-transform:capitalize;
        font-size:70%;
      }
      

#loginbar {
	width: 602px;
	height: 25px;
	position: absolute;
	margin: 0;
	padding: 0;
	left: 325px;
	top: 158px;
	text-align: right;
}

#pagepicture {
	border: 0px;
}
/* Homepage */
#home #maincontent  {
  padding-top:0;
}
  #home-intro  {
    height:270px;
    position:relative;
    background: url(/images/kids-face-down-large.png) no-repeat left top #004b8d;
    z-index:5;
  }
  #title-block  {
    background-color: rgba(255, 255, 255, 0.8);
     border-bottom: 2px solid #DCDCDC;
     border-right: 1px solid #DCDCDC;
     color: #000000;
     float: left;
     height: 170px;
     margin-left: 36px;
     margin-top: 146px;
     overflow: hidden;
     width: 675px;
     z-index: 10;
     position:relative;
     display:block;
  }  
    h1#tagline  {
      font-size: 2.1em;
      position:absolute;
      top: 32px;
      left:45px;
      
    }
    #tagline strong {
      display:block;
      font-size:180%;
      color:#004B8D;
      line-height: 1em;
    }
    #home-intro .button  {
      bottom: 14px;
      font-size: 1.5em;
      padding: 12px 16px 10px 12px;
      position: absolute;
      right: 45px;
      z-index: 11;
    }
    #home-intro .button span  { 
    	background-image: url(/images/arrow-white.png);
    	background-repeat:no-repeat;
      background-position: right -30px;
      padding: 0 20px 0 12px;
      display:block;
    }
    
    #home #persistent-ctas {
      background-color: transparent;
      border: 0 none;
      bottom: 45px;
      left:45px;
      padding-top: 0;
      position: absolute;
      width: auto;
      z-index: 100;
    }
    #home #persistent-ctas li {
      margin:5px;
      display:inline;
    }
    
      #home #persistent-ctas li a {
      	color:#07355d;
        background: url(/images/arrow-white.png) no-repeat 177px -17px ;
      	padding:0;
        text-decoration:underline;
        display:block;
        float:left;
        font-weight:normal;
        border:0;
        margin-right:24px;
      }
      #home #persistent-ctas li a:hover {
        color:#FFF;
      	background-color:#004B8D;
      	text-decoration:none;
      }
    
  #homecontent  {
    clear:left;
    margin-top:80px;
    overflow:hidden;
  }
    #home .panel  {
      width:262px;
      float:left;
      display:block;
      padding:20px 30px;
      min-height:240px;
    }
    #home .panel.for-schools {
      border-right:1px solid #d2d1d1;
      border-left:1px solid #FFF;
    }
    #home .panel.for-teachers {
      border-left:1px solid #FFF;
    }
    #home .panel.video-content{
      border-right:1px solid #d2d1d1;
    }    
     
        
    #homecontent .panel:last-child,
    #homecontent .last  {
      padding-right:0;
    }
      #home .panel h3 {
        font-size:2.2em;
        letter-spacing:-0.5px;
      }
      #home .panel.for-schools h3 {
        color:#0099cc;
      }
      #home .panel.for-teachers h3 {
        color:#ee2b74;
      }
      #home .panel blockquote {
        font-size:1.5em;
        font-style:italic;
        line-height:1.2em;
        float:left;
        width:150px;
        display:block;
        margin-top:0;
      }
        #home .panel blockquote cite {
          font-size:80%;
          display:block;
          color:#999;
          margin-top:6px;
        }
        
      #home .panel img  {
        float:right;
        background-color:#FFF;
        padding:4px;
        border: 1px solid #CCC;
        margin-left:10px;
        width:82px;
        margin-top:-40px;
      }
      
      #home .panel p  {
        color:#666;
        clear:left;
        display:block;
        margin-right:10px;
      }
      #home .panel ul  {
        margin-left:0;
        font-size:1.2em;
      }
        #home .panel ul li  {
          float:left;
          display:block;
          border-right:1px solid #d2d1d1;
          border-left:1px solid #FFF;         
          padding-right:10px;
        }
        #home .panel ul li:last-child,
        #home .panel li.last {
          border-right:none;
          padding-right:0;
        }
        #home .panel ul li:first-child   {
          border-left:none;
        }
        #home .panel ul li:first-child a  {
          padding-left:0;
        }
          #home .panel ul li a  {
            display:block;
            float:left;
            padding-left:10px;
          }       
          #home .panel ul li a  {
            text-decoration:none;
          }
          #home .panel ul li a:hover  {
            text-decoration:underline;
          }
          #home .panel.for-schools a  {
            color:#0099cc;
          }
          #home .panel.for-teachers a  {
            color:#ee2b74;
          }
        
      
/* internal page styles */
h2  {
  line-height: 1.1em;
}   
#mininav ul ul { 
    font-size:90%;
}
.link-back  {
  font-size:1.5em;
  color: #004b8d;
  text-decoration:none;
}
/* Remove large selection rectangle on image-replacement */
:active,:focus {
	outline: none;
	-moz-outline-style: none;
}