/*******************************************************************************
 * General settings
 *******************************************************************************/

html { background: #f0f0f0; }

body { font: 13px/1.33 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; color: #231f20; }

html body.admin-menu { margin-top: 0 !important; }
#admin-menu { display: none; }

table { clear: both; }

hr { border-color: #ccc; border-style: solid; border-width: 1px 0 0; clear: both; height: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", trebuchet, arial, helvetica, tahoma; font-weight: normal;
  margin-bottom: 7px;
}

h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 19px; }
h4 { font-size: 18px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

ol { list-style: decimal; }
ul { list-style: square; }
p, dl, hr, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; }

a:link, a:visited { color: #02567d; }

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

.block { margin-bottom: 18px; }
.block .content ul { padding: 0; }

.node ul.links {  list-style-position: inside; list-style-type: none; }
.node ul.links li { background: url(../images/links-bullet.png) 0 1px no-repeat; padding: 0 0 4px 22px; font-style: italic; font-weight: bold; }
.node ul.links a { text-decoration: none; color: #231f20 !important; }
.node ul.links a:hover { text-decoration: underline; }

@media (min-width: 480px) {
 
}
@media (min-width: 768px) {
 
}
@media (min-width: 992px) {

  html body.admin-menu { margin-top: 29px !important; }
  #admin-menu { display: block; }

}
@media (min-width: 1200px) {
 
}


/*******************************************************************************
 * Containers 
 *******************************************************************************/

#body-contents { width: 100%; background: url(../images/bg-top2.png) top repeat-x; }
#page-wrapper {  }
#page         {  }

/*******************************************************************************
 * Header
 *******************************************************************************/
#printable-header { display: none; }

.navbar { border: 0 none; }
.navbar-default { border-radius: 0; box-shadow: none; }
.navbar-nav > li > a { text-shadow: 0 1px 0 rgba(0,0,0,0.25); outline: none; }

.navbar-header { background: rgba(0,0,0,0.5); }
.navbar-toggle { background: #02567d; }
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover { background: #319CD5; }
.navbar-default .navbar-toggle .icon-bar { background-color: #eee; }



#header {
  margin: 0 -15px; padding: 0;
  background-image: url(../images/rotate/header_home.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto 204px;
  position: relative;
}




.landing-page.role.coach             #header { background-image: url(../images/rotate/header_coach.jpg); }
.landing-page.role.referee           #header { background-image: url(../images/rotate/header_referee.jpg); }
.landing-page.role.official          #header { background-image: url(../images/rotate/header_admin.jpg); }
.landing-page.role.player            #header { background-image: url(../images/rotate/header_thirdlevel.jpg); }
.landing-page.role.primaryschool     #header { background-image: url(../images/rotate/header_primary.jpg); }
.landing-page.role.postprimaryschool #header { background-image: url(../images/rotate/header_postprimary.jpg); }
.landing-page.role.thirdlevelschool  #header { background-image: url(../images/rotate/header_thirdlevel.jpg); }

#header .inner { height: 154px; }
#header .inner .h20 { width: 100%; height: 20px; }
#header .inner #logo-area { height: 100px; }
#header .inner #logo-area #logo-box { width: 150px; height: 100px; float: left; background: url(../images/bg-logo.png); }
#header .inner #logo-area #logo-box h1 { margin: 0; padding: 0; text-indent: -10000px; }
#header .inner #logo-area #logo-box h1 a { display: block; width: 90px; height: 35px; margin: 32px 0 0 13px; background: url(../images/gaa-logo.png); }
#header .inner #logo-area #login-box { width: auto; height: 30px; float: right; background: url(../images/bg-login1.png) top left no-repeat;  }
#header .inner #logo-area #login-box ul {
  list-style: none; display: block; margin: 0; padding: 9px 7px 9px 34px;
  color: #fff; line-height: 12px; text-align: center; font-weight: bold; font-size: 12px;
}
#header .inner #logo-area #login-box ul li { display: inline-block; border-left: 1px solid #ccc; padding-left: 10px; padding-right: 10px; }
#header .inner #logo-area #login-box ul li:first-child { border-left: 0 none; padding-left: 0; }
#header .inner #logo-area #login-box ul li:last-child { padding-right: 0; }
#header .inner #logo-area #login-box a { color: #fff; text-decoration: none; }

@media (min-width: 480px) {
  
  #header .inner #slogan-area  {
    width: 325px; height: 50px; background: url(../images/slogan325.png) no-repeat 0 0; 
    position: absolute; right: 10px; top: 70px;
  }

 
}
@media (min-width: 768px) {

  #header { height: 248px; background-size: cover; }
  #header .inner { height: 200px; }
  #header .inner #slogan-area  { top: 130px; }
  
  #header .inner #logo-area #logo-box::before {
    width: 10px; height: 110px;
    background: url('../images/bg-logo-edge.png');
    content: ' '; display: block; 
    position: absolute; top: 20px; left: -10px;
  }
  #header .inner #logo-area #login-box::after {
    width: 10px; height: 40px;
    background: url('../images/bg-login-edge.png');
    content: ' '; display: block; 
    position: absolute; top: 20px; right: -10px;
  }


/* Top menu */
#header #topmenu { height: 49px; background: transparent url('../images/bg-undermenu0.png') repeat-x; }
#header #topmenu ul.menu {	margin-left: 8px;	padding-left: 0;	} 
#header #topmenu ul.menu li { margin: 0; padding: 0; list-style: none;	display: inline; }
#header #topmenu ul.menu li a {	color: #eee; text-decoration: none; font-weight: bold; padding: 0 11px 8px; font-size: 12px; line-height: 40px; display: inline-block;} 
#header #topmenu ul.menu li a:hover {	color: #fff; } 
#header #topmenu ul.menu li a.active {	background: url(../images/bg-menu-home.png) top center no-repeat;	}
#header #topmenu ul.menu li.coach a.active         {	background: url(../images/bg-menu-coach.png) top center no-repeat;	}
#header #topmenu ul.menu li.referee a.active       {	background: url(../images/bg-menu-referee.png) top center no-repeat;	}
#header #topmenu ul.menu li.administrator a.active {	background: url(../images/bg-menu-admin.png) top center no-repeat;	}
#header #topmenu ul.menu li.player a.active        {	background: url(../images/bg-menu-player.png) top center no-repeat;	}
#header #topmenu ul.menu li.primaryschool a.active {	background: url(../images/bg-menu-primary.png) top center no-repeat;	}
#header #topmenu ul.menu li.postprimary a.active   {	background: url(../images/bg-menu-postprimary.png) top center no-repeat;	}
#header #topmenu ul.menu li.highereducation a.active    {	background: url(../images/bg-menu-thirdlevel.png) top center no-repeat;	}


  
  
  
}
@media (min-width: 992px) {

  #header #topmenu ul.menu li a {	font-size: 14px; padding: 0 18px 8px; } 
  
  
  
}
@media (min-width: 1200px) {
 #header #topmenu ul.menu li a {	font-size: 16px; padding: 0 26px 8px; } 
}




/*******************************************************************************
 * Main content area
 *******************************************************************************/

#main {  }
#main .inner {  }
#main .tabs {  }
#main .tabs ul {  }


.landing-page.role #content h1 {
  background-repeat: no-repeat;
  padding: 13px 5px 20px 70px; color: #fff; margin: 0; 
  line-height: 18px; position: relative;
  font-size: 16px; min-height: 74px;
}
.landing-page.role.coach             #content h1 { background-image: url(../images/hw-coach.png); }
.landing-page.role.referee           #content h1 { background-image: url(../images/hw-referee.png); }
.landing-page.role.official          #content h1 { background-image: url(../images/hw-admin.png); }
.landing-page.role.player            #content h1 { background-image: url(../images/hw-player.png); }
.landing-page.role.primaryschool     #content h1 { background-image: url(../images/hw-primary.png); }
.landing-page.role.postprimaryschool #content h1 { background-image: url(../images/hw-postprimary.png); }
.landing-page.role.thirdlevelschool  #content h1 { background-image: url(../images/hw-thirdlevel.png); }



@media (min-width: 480px) {
  

.landing-page.role #content h1 { padding: 9px 45px 20px 70px; font-size: 22px; line-height: 45px; }
  
.landing-page.role #content h1::after { 
  background-repeat: no-repeat; background-position: top right;
  content: ' '; display: block; width: 40px; height: 74px;
  position: absolute; right: 0; top: 0;
}

.landing-page.role.coach             #content h1::after { background-image: url(../images/hw-coach-edge.png); }
.landing-page.role.referee           #content h1::after { background-image: url(../images/hw-referee-edge.png); }
.landing-page.role.official          #content h1::after { background-image: url(../images/hw-admin-edge.png); }
.landing-page.role.player            #content h1::after { background-image: url(../images/hw-player-edge.png); }
.landing-page.role.primaryschool     #content h1::after { background-image: url(../images/hw-primary-edge.png); }
.landing-page.role.postprimaryschool #content h1::after { background-image: url(../images/hw-postprimary-edge.png); }
.landing-page.role.thirdlevelschool  #content h1::after { background-image: url(../images/hw-thirdlevel-edge.png); }

 
}

.landing-page.role .node-page { padding: 0 15px 5px; }
.landing-page.role .node-page a { color: #02567d; }

.landing-page.role #block-system-main {
  background: #f0f0f0;
  border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px;
  -moz-box-shadow:  0px 3px 2px rgba(0, 0, 0, 0.15);
  box-shadow:       0px 3px 2px rgba(0, 0, 0, 0.15);
}

.landing-page.role a.button {
  display: inline-block; color: #fff; text-decoration: none;
  padding: 7px 10px 7px 40px; font-weight: bold;
  border-radius: 8px; -moz-border-radius: 8px;
}

.landing-page.role.coach a.button             { border: 1px solid #319CD5; background: url(../images/bbgv-coach.png) left center repeat-x; }
.landing-page.role.referee a.button           { border: 1px solid #026750; background: url(../images/bbgv-referee.png) left center repeat-x; }
.landing-page.role.official a.button          { border: 1px solid #A0A3A4; background: url(../images/bbgv-admin.png) left center repeat-x; }
.landing-page.role.player a.button            { border: 1px solid #979D1E; background: url(../images/bbgv-player.png) left center repeat-x; }
.landing-page.role.primaryschool a.button     { border: 1px solid #C3A802; background: url(../images/bbgv-primary.png) left center repeat-x; }
.landing-page.role.postprimaryschool a.button { border: 1px solid #B75D05; background: url(../images/bbgv-postprimary.png) left center repeat-x; }
.landing-page.role.thirdlevelschool a.button  { border: 1px solid #7E0202; background: url(../images/bbgv-thirdlevel.png) left center repeat-x; }


@media (min-width: 480px) {
  .landing-page.role .node-page { padding: 0 20px 5px 70px; }
}

/* Section selector block */
.region-selector .block .content { border: 5px solid #61b5e1; }
.region-selector .block .content p { margin: 0; padding: 0; }
.region-selector .block .content img { margin: 7px 0 0 8px; width: 140px; height: 140px; display: inline-block; }


/* Courses and documents blocks */
.region-userdata .block .content ul { margin: 0; list-style-type: none; }
.region-userdata .block .content ul li {
  margin: 0 0 2px 0; padding: 7px 7px 4px 32px; font-size: 14px; font-weight: bold;
  background: #f0f0f0 url(../images/links-bullet.png) 10px 7px no-repeat;
}
.region-userdata .block .content ul li a { text-decoration: none; color: #231f20; }
.region-userdata .block .content ul li a:hover { color: #02567d; }



/* Gallery */
#block-quicktabs-media-galleries { margin-top: 20px; }
/* #quicktabs-tabpage-media_galleries-0 {  border: 5px solid #02567d; padding: 5px; }
#quicktabs-tabpage-media_galleries-1 {  border: 5px solid #61b5e1; padding: 5px; } */

/* .quicktabs-tabpage:first-of-type {  border: 5px solid #02567d; padding: 5px; } */
.quicktabs_main > div {  border: 5px solid #61b5e1; padding: 5px; }
.quicktabs_main > div:first-child {  border: 5px solid #02567d; padding: 5px; }



.quicktabs-wrapper ul.quicktabs-tabs { text-align: right; padding: 0 5px 0 0; margin: 0; height: 2em; }
.quicktabs-wrapper ul.quicktabs-tabs li {
   background: #ccc; margin: 0; display: block; width: auto; float: right; padding: 0px 10px;
   height: 2em; line-height: 2em;
   border-top-right-radius: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; }
.quicktabs-wrapper ul.quicktabs-tabs li.first { background: #02567d;  }
.quicktabs-wrapper ul.quicktabs-tabs li.last { background: #61b5e1;  }
.quicktabs-wrapper ul.quicktabs-tabs li a { color: #fff; text-decoration: none; }
.quicktabs-wrapper h2 { display: none; }
.quicktabs-wrapper .block { margin: 0; padding: 0; }
.quicktabs-wrapper .content { text-align: center; }
.quicktabs-wrapper .mg-col { margin: 0; display: block; }
.quicktabs-wrapper .more-link { display: none; }
.quicktabs-wrapper .media-gallery-item { padding: 0; border: none; }
.quicktabs-wrapper .meta-wrapper { margin-top: 5px; }
.quicktabs-wrapper .media-title { color: #02567d; }

div.node-media-gallery .action-links { list-style-type: none; }
div.node-media-gallery .action-links a { 
  display: inline-block; color: #fff; text-decoration: none;
  border: 1px solid #02445F; background: url(../images/bbg-home.png) left center repeat-x;
  padding: 4px 10px; margin: 8px 0 0 0;
  border-radius: 8px; -moz-border-radius: 8px;
}
div.node-media-gallery .meta-wrapper { padding: 3px 0 0 0; text-align: center; }
div.node-media-gallery .meta-wrapper .media-title { font-size: 11px; font-weight: normal; }

/* Login block */
#login .username,
#login .password,
#login #loginbtn { display: block; clear: both; margin: 5px 0; }
#login #loginbtn { margin-left: 75px; }
#login .text-input input { width: 15em; }
#login label {
  display: block; float: left; width: 75px; font-weight: normal; color: inherit; 
  font-size: 13px; text-align: left; padding: 5px 0; width: 120px;
}


/* News page */
.news-page-item h2 { font-size: 1.3em; }
.news-page-item h2 a { color: #231f20; text-decoration: none; }
.news-page-item .description { margin: 0; padding: 0;  }
.news-page-item .more { margin: 0 0 20px 0; padding: 0; text-align: left; }
.news-page-item .more a { color: #02567d; text-decoration: none; }

/* Pager */
ul.pager li { margin: 0 !important; padding: 0 !important; font-size: 100% !important; font-weight: normal !important; background: none !important; }
ul.pager li.pager-current { font-size: 120% !important; }
ul.pager a { text-decoration: none; color: #02567d !important; }

/* Blog Page */
.gaa-blog .views-row {margin-bottom: 30px; border-bottom: solid 1px #ccc; padding-bottom: 10px;}
.service-links ul.links li {background: none; padding: 0; display: inline-block;}
.node-type-blog .content .user-picture img {max-width: 60px}
.node-type-blog #comments .comment {border-bottom: 1px solid black; margin-bottom: 10px; padding-bottom: 10px;}


/*******************************************************************************
 * Sidebar
 *******************************************************************************/

/* User added block */
.region-sidebar .block .content ul:not(.pagination) { margin: 0; list-style-type: none; }
.region-sidebar .block .content ul:not(.pagination) li {
  margin: 0 0 2px 0; padding: 5px 7px 2px 32px; 
  background: #f0f0f0 url(../images/links-bullet.png) 10px 9px no-repeat;
  list-style-type: none !important; list-style-image: none !important;
}
.region-sidebar .block .content ul:not(.pagination) li a { text-decoration: none; }
.region-sidebar .block .content ul:not(.pagination) li a:hover { text-decoration: underline; }

.region-sidebar .block .nav > li > a { padding: 0; }

/* News feed */
.news-block a { color: #02567d; text-decoration: none; }
.news-block a:hover { text-decoration: underline; }
.news-block .item-list ul { margin: 0; list-style-type: none; }
.news-block .item-list ul li { margin: 0 0 2px 0; padding: 0 !important; background: #f0f0f0; height: 45px; overflow: hidden; background-repeat: no-repeat; background-position: 10px 7px; }
.news-block .item-list ul li .field-content { display: block; padding: 7px 7px 7px 44px; line-height: 15px; height: 26px; overflow: hidden; }

.landing-page.club                   .news-block .item-list ul li { background-image: url(../images/news-home.png); }
.landing-page.role.coach             .news-block .item-list ul li { background-image: url(../images/news-coach.png); }
.landing-page.role.referee           .news-block .item-list ul li { background-image: url(../images/news-referee.png); }
.landing-page.role.official          .news-block .item-list ul li { background-image: url(../images/news-admin.png); }
.landing-page.role.player            .news-block .item-list ul li { background-image: url(../images/news-player.png); }
.landing-page.role.primaryschool     .news-block .item-list ul li { background-image: url(../images/news-primary.png); }
.landing-page.role.postprimaryschool .news-block .item-list ul li { background-image: url(../images/news-postprimary.png); }
.landing-page.role.thirdlevelschool  .news-block .item-list ul li { background-image: url(../images/news-thirdlevel.png); }

.news-block .footer ul { margin-bottom: 0; }
.news-block .footer p { text-align: right; }
.news-block .footer a {
  display: inline-block; color: #fff; text-decoration: none;
  border: 1px solid #02445F; background: url(../images/bbg-home.png) left center repeat-x;
  padding: 6px 10px; margin: 8px 0 0 0;
  border-radius: 8px; -moz-border-radius: 8px;
}
.landing-page.role.coach             .news-block .footer a { border: 1px solid #319CD5; background: url(../images/bbg-coach.png) left center repeat-x; }
.landing-page.role.referee           .news-block .footer a { border: 1px solid #026750; background: url(../images/bbg-referee.png) left center repeat-x; }
.landing-page.role.official          .news-block .footer a { border: 1px solid #A0A3A4; background: url(../images/bbg-admin.png) left center repeat-x; }
.landing-page.role.player            .news-block .footer a { border: 1px solid #979D1E; background: url(../images/bbg-player.png) left center repeat-x; }
.landing-page.role.primaryschool     .news-block .footer a { border: 1px solid #C3A802; background: url(../images/bbg-primary.png) left center repeat-x; }
.landing-page.role.postprimaryschool .news-block .footer a { border: 1px solid #B75D05; background: url(../images/bbg-postprimary.png) left center repeat-x; }
.landing-page.role.thirdlevelschool  .news-block .footer a { border: 1px solid #7E0202; background: url(../images/bbg-thirdlevel.png) left center repeat-x; }

.news-block .warnings .warning {
  margin: 0 0 2px 0; padding: 5px;
  background: #f0f0f0; color: #231f20;
  background-repeat: no-repeat; background-position: 10px 7px;
  font-size: 0.9em; text-align: center;
}
.news-block .warnings .warning .feed-name { display: inline-block; }
.news-block .warnings .warning a { display: inline-block; }

/* Links to Moodle and Mahara */
#members-links { margin: 0 0 20px; list-style: none; padding: 0; display: block; }
#members-links li { float: left; display: block; width: 32%; margin: 0 2px 2px 0; padding: 0; background: none; }
#members-links li:last-child { margin-right: 0; }
#members-links li a,
#members-links li span {
  display: block;
  background-color: #414141;
  background-position: center 3px;
  background-repeat: no-repeat; outline: none;
  color: #fff; box-shadow: 0 0 40px #000 inset;
  border-radius: 8px; text-align: center; text-shadow: 0 1px 0 #000; padding: 50px 2px 5px;
  font-size: 12px; font-family: "Trebuchet MS", trebuchet, arial, helvetica, tahoma;
  transition: box-shadow ease-in 0.2s;
}

#members-links #lnks-moodle a { background-image: url('../images/ico50-moodle.png'); }
#members-links #lnks-mahara a { background-image: url('../images/ico50-mahara.png'); }
#members-links #lnks-profile a { background-image: url('../images/ico50-profile.png'); }

#members-links li a:hover,
#members-links li span:hover {
  text-decoration: none;
  box-shadow: 0 0 20px #000 inset;
}

@media (min-width: 360px) {
  #members-links li a,
  #members-links li span { font-size: 14px; }
}
@media (min-width: 768px) {
  #members-links li { margin-right: 3px; }
  #members-links li a,
  #members-links li span { font-size: 12px; }
}
@media (min-width: 992px) {
  #members-links li { margin-right: 4px; }
  #members-links li a,
  #members-links li span { font-size: 14px; }
}
@media (min-width: 992px) {
  #members-links li { margin-right: 5px; }
}
/*
#lnk-moodle, #lnk-mahara { width: 137px; height: 92px; border: none; margin: 0; }
#lnk-mahara { margin-left: 3px; }

#lnks-moodle, #lnks-mahara, #lnks_profile { width: 90px; height: 60px; border: none; margin: 0 3px 0 0; }
#lnks_profile { margin-right: 0; } */

/* Calendar block */
.block-gaa-calendars .content { border: 5px solid #61b5e1; background: #e3e9ff; }
.block-gaa-calendars .content p { margin: 0; }
.block-gaa-calendars p.calendar-empty-msg { padding: 20px 5px; text-align: center; }
.block-gaa-calendars p.calendar-empty-msg a { display: block; text-align: center; }


/* Responsive workaround for views_slideshow */
.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}


/*******************************************************************************
 * Bottom area
 *******************************************************************************/

.region-footer { margin: 0 -10px; }

footer.footer { border-top: 1px solid #ccc; padding-top: 15px; padding-bottom: 25px; }
footer.footer p { margin: 0; }
footer.footer .nav > li > a { padding: 5px 10px; }

footer.footer .social-links { margin-bottom: 0; }
footer.footer .social-links .content { text-align: center; margin-bottom: 10px; }
footer.footer .social-links img { margin: 0 2px; }
footer.footer .social-links a { transition: opacity ease-in-out 0.2s; }
footer.footer .social-links a:hover { opacity: 0.8; }
footer.footer .powered-by { color: #999; }
footer.footer .powered-by a { color: #999; }



/* Footer menu */
@media (min-width: 480px) {
  footer.footer .nav > li > a:hover { background: none transparent; }
  footer.footer ul.menu {	margin: 0; padding: 0; } 
  footer.footer ul.menu li { padding: 0; border-left: 1px solid #02567d; display: inline-block; }
  footer.footer ul.menu li.first { border-left: none; }
  footer.footer ul.menu li a {	text-decoration: none; color: #02567d; padding: 0 10px; }
  footer.footer ul.menu li a:hover {	text-decoration: underline; }
  
  footer.footer .social-links .content { text-align: right; margin-bottom: 0; }
}


/*******************************************************************************
 * Overridings for page "content only" templates
 *******************************************************************************/

body.page-content-only #admin-menu { display: none; }
html body.page-content-only.admin-menu { margin-top: 0 !important; }
body.page-content-only #content { padding: 20px; background: #fff; }


/* Grid lists */
h4.section-title { font-size: 16px; padding: 3px 7px; background: #f94505; color: #fff; font-weight: bold; border-radius: 2px;}
h5.section-subtitle { font-size: 16px; text-align: center; font-weight: bold; margin: 15px 0; }
ul.grid { list-style: none; padding: 0; display: block; clear: both; margin: 0 -6px 15px; }
ul.grid::before, ul.grid::arter { content: ' '; display: table; }
ul.grid::arter { clear: both; }
ul.grid li { display: inline-block; width: 100%; padding: 5px 3px; margin-right: -4px; vertical-align: bottom; text-align: center; }
ul.grid li a { display: block; margin: 0; padding: 0; outline: none; text-decoration: none; }

@media (min-width: 360px) { ul.grid li { width: 50%; } }
@media (min-width: 600px) { ul.grid li { width: 33.33333%; } }
@media (min-width: 768px) { ul.grid li { width: 50%; } }
@media (min-width: 992px) { ul.grid li { width: 33.33333%; } }
@media (min-width: 1200px) { ul.grid li { width: 25%; } }