/********************************************************************/
/* Website Developed by : Blue Sombrero 							*/
/* Skin 033 (Canton Soccer Club)									*/
/* Created: 15 April 2015 by Anita									*/
/* Updated: 05 May 2015 by Krunal									*/
/********************************************************************/

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Lato);

/* Comman CSS */
/********************************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td			{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
										background: transparent; }
blockquote,q								{ quotes: none; }
blockquote:before,
blockquote:after,
q:before,q:after						{ content:''; content: none; }
:focus									{ outline:none; }
ins										{ text-decoration:none; }
del										{ text-decoration:line-through; }
form										{ height: 100%;background: #000; }
img										{ border: 0; padding: 0; margin: 0; }
html, body								{ text-align: left; font-size: 14px; margin: 0; padding: 0;
										font-family: 'Lato',Arial,Helvetica,sans-serif; height: 100%;
										background: #fff; color: #112839; line-height: 20px; 
										font-weight: normal; }
.AlertText a,
.AlertText a:link,
.AlertText a:visited				{color: #ff3b3a;}

.AlertText a:hover,
.AlertText a:focus,
.AlertText a:active				{color: #ebeaea;}
/* Text CSS */
/********************************************************************/
h1, h2, h3, h4, h5, h6					{ font-family: 'Oswald',Arial,Helvetica,sans-serif;
										font-weight: normal; color: #fe0000; padding: 0 0 18px 0; }
h1										{ font-size: 52px; line-height: 62px; }
h2										{ font-size: 32px; line-height: 36px; }
h3										{ font-size: 26px; line-height: 32px; }
h4										{ font-size: 20px; line-height: 22px; }
h5	 									{ font-size: 18px; line-height: 20px; }
h6										{ font-size: 16px; line-height: 20px; }
p										{ padding: 0 0 18px 0; }
ul, ol									{ padding: 0 0 18px 0; margin: 0 0 0 24px;}
sup										{ vertical-align: top; font-size: 8px; }
small									{ font-size: 8px; }
td[valign=middle]						{ vertical-align: middle; }
td[valign=top]							{ vertical-align: top; }
td[valign=bottom]						{ vertical-align: bottom; }
.Normal, 
.NormalDisabled,
.BoldText,
.NormalRed,
.SubHead,
.SkinObject								{ font-family: 'Lato',Arial,Helvetica,sans-serif; font-weight:normal;
										font-size: 14px; line-height: 20px; text-align: left; }

.Normal, .NormalDisabled				{ color:#000; }
.BoldText								{ color:#112839; font-weight:bold;}
.NormalRed								{ color:#000; font-weight:bold; }
.SubHead								{ color:#000; }
.SkinObject								{ color:#9e1d1b; }

/* Link CSS */
/********************************************************************/
a, a:link, a:visited,
a.CommandButton, 
a.CommandButton:link, 
a.CommandButton:visited,
a.SkinObject, 
a.SkinObject:link,
a.SkinObject:visited					{ font-family: 'Lato',Arial,Helvetica,sans-serif;
										font-weight: normal; font-size: inherit; text-decoration: none;
										line-height: inherit; color: #fe0000; }
a:active, a:hover, a:focus,
a.CommandButton:active, 
a.CommandButton:hover, 
a.CommandButton:focus,
a.SkinObject:hover , 
a.SkinObject:focus,
a.SkinObject:active						{ color: #000; }
.paneOutline							{ outline: 1px dotted #000; border: none; }
.paneOutline center						{ text-align: center; }
.paneOutline .SubHead					{ color: #000; }

/* DNN Empty Pane CSS For IE */
/********************************************************************/
.DNNEmptyPane							{ font-size: 0px; line-height: 0px; display: none; }

/* Input CSS */
/********************************************************************/
input.NormalTextBox,
textarea.NormalTextBox,
select.NormalTextBox						{ font-family: 'Lato',Arial,Helvetica,sans-serif;
										font-weight:normal; font-size: 14px; line-height: 22px;
										height: 22px; background: #f6f6f6; border: 1px solid #acacac; 
										padding: 2px 8px; margin: 2px 0px; color:#222; }
select.NormalTextBox						{ padding: 2px 2px 2px 8px; }
input.NormalTextBox:focus, 
input.NormalTextBox:hover,
textarea.NormalTextBox:focus,
textarea.NormalTextBox:hover,
select.NormalTextBox:focus,
select.NormalTextBox:hover				{ border-color:#222; }
textarea.NormalTextBox, select.NormalTextBox
										{ height: auto; }

/* Button CSS */
/********************************************************************/
.StandardButton							{ background: #1763a2; color: #fff; display: inline-block; border: 1px solid #115592;
										font-size: 14px; line-height: 20px; margin: 12px 0; padding: 8px 12px; }
.StandardButton:hover, 
.StandardButton:focus					{ background: #b42120; border-color: #741413; outline: none; text-decoration: none; 
										color: #fff; }

/* Float CSS */
/********************************************************************/
.float-left								{ float:left; }
.float-right							{ float:right; }
.clear:after							{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.clear-both								{ clear:both; font-size: 0px; line-height: 0px; height: 0px; }

/* DNN Overwrite CSS */
/********************************************************************/
.textAlignRight							{ text-align: right; }
.textAlignCenter						{ text-align: center; }
.FileManager_FileList 					{ margin: 2px 0 0 0; }
.rgMasterTable							{ width: 100%; }
.rgCurrentPage span						{ line-height: 22px; }
input.rgPagerTextBox						{ width: 24px!important; }
.termsContainer, 
.privacyContainer						{ padding: 12px; }
.FileManager_FileList 					{ margin: 2px 0 0 0; }
.rgMasterTable							{ width: 100%; }
.rgCurrentPage span						{ line-height: 22px; }
input.rgPagerTextBox						{ width: 24px!important; }

/* DNN 6 Fix */
/********************************************************************/
#dnnCPWrap a,
#dnnCPWrap a:link,
#dnnCPWrap a:visited						{ text-decoration: none; }
#dnnCPWrap a:hover span, #dnnCPWrap a:active span,
#dnnCPWrap a:focus span, #dnnCommonTasks a:hover, 
#dnnCommonTasks a:active, #dnnCommonTasks a:focus, 
#dnnCurrentPage a:hover, #dnnCurrentPage a:active, 
#dnnCurrentPage a:focus, #dnnOtherTools a:hover, 
#dnnOtherTools a:active, #dnnOtherTools a:focus
										{ text-decoration: underline; }
/*Skin CSS */
/********************************************************************/
.skWidth								{ width: 974px; margin: auto; }
.skArea									{ background: #272727 url(images/skinbg.jpg) center top no-repeat; }
.skTopbar								{ background: #000; border-bottom: 6px solid #fe0000; padding: 30px 0 20px 0; 
										-webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; 
										box-shadow: 0 0 10px #000; position: relative; }
.skWrapper								{ background-color : #fff; padding: 0 17px; }
.skleague 								{ float: left;}
.skleague a.skButton,.skleague a.skButton:link,
.skleague a.skButton:visited				{ background: #fe0000 none repeat scroll 0 0;color: #ffffff;display: inline-block;
										font-family: "Oswald",Arial,Helvetica,sans-serif;font-size: 17px;line-height: 20px;
										margin: auto;padding: 8px 26px;text-transform: uppercase;}
.skLogo									{ display: table; margin: 0 0 0 -152px; padding: 20px; position: absolute; top: 20px; z-index: 1;
										left: 50%; background: transparent url(images/logo-wrapper.png) center center no-repeat; }
.skSocial								{ float: right;}
.skSocial a.link,
.skSocial a.link:link,
.skSocial a.link:visited					{ float: left; display: block; text-indent: -100px; height: 34px; width: 34px; overflow: hidden;
										margin: 0 0 0 10px; background: transparent url(images/icn-social.png) 0 0 no-repeat; }
.skSocial a.facebook,
.skSocial a.facebook:link,
.skSocial a.facebook:visited				{ background-position: 0 0; }
.skSocial a.facebook:hover,
.skSocial a.facebook:active,
.skSocial a.facebook:focus				{ background-position: 0 -35px; }
.skSocial a.instagram,
.skSocial a.instagram:link,
.skSocial a.instagram:visited			{ background-position: -35px 0; }
.skSocial a.instagram:hover,
.skSocial a.instagram:focus				{ background-position: -35px -35px; }
.skSocial a.twitter,
.skSocial a.twitter:link,
.skSocial a.twitter:visited				{ background-position: -70px 0; }
.skSocial a.twitter:hover,
.skSocial a.twitter:active,
.skSocial a.twitter:focus				{ background-position: -70px -35px; }
.skSocial a.google,
.skSocial a.google:link,
.skSocial a.google:visited				{ background-position: -105px 0; }
.skSocial a.google:hover,
.skSocial a.google:focus					{ background-position: -105px -35px; }
.skSocial a.youtube,
.skSocial a.youtube:link,
.skSocial a.youtube:visited				{ background-position: -140px 0; }
.skSocial a.youtube:hover,
.skSocial a.youtube:focus				{ background-position: -140px -35px; }
.skSocial a.snapchat,
.skSocial a.snapchat:link,
.skSocial a.snapchat:visited				{ float: left; display: block; text-indent: -100px; height: 34px; width: 34px; overflow: hidden;
										margin: 0 0 0 10px; background: transparent url(images/icn-snapchat.png) top left no-repeat;}
.skSocial a.snapchat:hover,
.skSocial a.snapchat:focus				{ background-position: bottom left; }

/* Inner Panes CSS */
/********************************************************************/
.innerSkin .skHeader						{ min-height: 110px; _height: 110px; }
.LeftPane								{ float: left; width: 600px; }
.RightPane								{ float: right; width: 315px; }
.inner-width							{ display: table; max-width: 100%; }
.inner-table							{ display: table; width: 100%; }
.inner-cell								{ display: table-cell; float: none; }

/* Inner Panes CSS */
/********************************************************************/
.video-container 						{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, 
.video-container object, 
.video-container embed 					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Setting Panel CSS */
/********************************************************************/
#sWebHome_ActionsBar a.sWebTheme_ActionsLinks:hover span, 
#sWebHome_ActionsBar a.sWebTheme_ActionsLinks:focus span, 
#sWebHome_ActionsBar a.sWebTheme_ActionsLinks:active span
										{ background-color: #fe0000; }

/* Panes CSS */
/********************************************************************/
.skSlider								{ padding: 0 0 25px 0; }

/* League CSS */
/********************************************************************/
.skLeague								{ padding: 0 0 25px 0; }
.skLeague ul.list						{ margin: 0; padding: 0; }
.skLeague li.item							{ margin: 0; padding: 0 12px 0 0; float: left; list-style: none; position: relative; width: 305px; }
.skLeague li.last							{ padding: 0; }
.skLeague a.link,
.skLeague a.link:link,
.skLeague a.link:visited					{ display: block; position: relative; font-family: 'Oswald',Arial,Helvetica,sans-serif; font-size: 25px; 
										line-height: 29px; color: #fff; text-align: center; text-transform: uppercase; }
.skLeague .head							{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; 
										-webkit-transition: all 0.5s; 
										-o-transition: all 0.5s; 
										transition: all 0.5s;
										-webkit-box-shadow: inset 0 0 0 transparent;
										-moz-box-shadow: inset 0 0 0 transparent;
										box-shadow: inset 0 0 0 transparent; }
.skLeague a.link:hover .head				{ -webkit-box-shadow: inset 0 0 0 10px #fe0000;
										-moz-box-shadow: inset 0 0 0 10px #fe0000;
										box-shadow: inset 0 0 0 10px #fe0000; }
.skLeague img							{ filter: grayscale(100%); -webkit-filter: grayscale(100%); 
										-webkit-transition: all 0.5s; 
										-o-transition: all 0.5s; 
										transition: all 0.5s; }
.skLeague a.link:hover img				{ filter: grayscale(0%); -webkit-filter: grayscale(0%) }
.skLeague .table							{ height: 100%; width: 100%; display: table; vertical-align: middle; }
.skLeague .cell							{ padding: 20px; display: table-cell; vertical-align: middle; text-shadow: 0 0 20px #000; }

/* Panes CSS */
/********************************************************************/
.skLeft									{ float: left;width: 621px; }
.skRight								{ float: right; width: 305px; }

/* Container CSS */
/********************************************************************/
.containerWrapper						{ padding: 0 0 25px 0; }
.borderedContainer						{ border: 6px solid #000; margin: 16px 0 0 0; }
.borderedContainer h2.head				{ margin: -20px 0 0 0; padding: 0; text-align: center; font-family: 'Oswald',Arial,Helvetica,sans-serif; 
										font-size: 30px; line-height: 34px; color: #fe0000; text-transform: uppercase; }
.borderedContainer h2.head span			{ background: #fff; text-transform: uppercase; padding: 0 16px; _display: inline; display: inline-block; }
.borderedContainer .content				{ padding: 15px; }

.defaultContainer h2.head				{ margin: 0; padding: 0; text-align: center; font-family: 'Oswald',Arial,Helvetica,sans-serif; 
										font-size: 30px; line-height: 34px; color: #fe0000; text-transform: uppercase; }
.defaultContainer .content				{ padding: 15px; }

.ftContainer  h2.head,
.ftContainer  h2.head a					{ margin: 0; padding: 0 0 18px 0; font-family: 'Oswald',Arial,Helvetica,sans-serif; 
										font-size: 20px; line-height: 32px; color: #fff; text-transform: uppercase; }
.ftContainer  h2.head a:hover,
.ftContainer  h2.head a:focus,
.ftContainer  h2.head a:active			{ color: #fe0000;}

a.skButton,
a.skButton:link,
a.skButton:visited						{ font-family: 'Oswald',Arial,Helvetica,sans-serif; font-size: 17px; line-height: 20px; color: #fff; text-transform: uppercase;
										padding: 8px 26px; background: #000; _display: inline; display: inline-block; margin: auto; }
a.skButton:hover						{ background: #fe0000; }

/* Sponsors */
/********************************************************************/
.skSponsor ul.list						{ margin: 0; padding: 0; }
.skSponsor ul.list li.item					{ margin: 0; padding: 0; list-style: none; float: left; }
.skSponsor ul.list a img					{ -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skSponsor ul.list a:hover img				{ -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95);
										-ms-transform: scale(0.95); transform: scale(0.95); }
.skSponsor .content						{ position: relative; padding: 20px 40px; }
.skSponsor .prev,
.skSponsor .next							{ top: 50%; height: 50px; width: 25px; position: absolute; margin: -25px 0;
										background: transparent url(images/sponser-arrow-img.png) left top no-repeat;
										z-index: 1; text-indent: -999px; overflow: hidden; }
.skSponsor .prev							{ left: 0; }
.skSponsor .next							{ right: 0; background-position: right top; }
.skSponsor .prev:hover					{ background-position: left bottom; }
.skSponsor .next:hover					{ background-position: right bottom; }

/* News */
/********************************************************************/
.skNews .skContent						{ padding: 8px 14px}
.skNews ul.list							{ padding: 0; margin: 0; }
.skNews li.item							{ list-style: none; margin: 0; padding: 7px 0; border-bottom: 1px solid #000; }
.skNews li.item:after						{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.skNews li.last							{ margin: 0 0 10px 0; }
.skNews a.link:after						{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.skNews a.link,
.skNews a.link:link,
.skNews a.link:visited					{ font-family: 'Oswald',Arial,Helvetica,sans-serif; font-size: 17px; line-height: 20px; color: #000; 
										text-transform: uppercase; display: block; padding: 0 42px 0 0;
										background: transparent url(images/icn-red-arrow.png) right center no-repeat; }
.skNews .title							{ display: block; padding: 6px 0 6px 50px; }
.skNews .date							{ float: left; }
.skNews .month							{ display: block; text-align: center; font-size: 18px; line-height: 22px; color: #fe0000; }
.skNews .day								{ display: block; text-align: center; font-size: 26px; line-height: 30px; color: #000; }
.skNews a.link:hover						{ background: transparent url(images/icn-black-arrow.png) right center no-repeat; color: #fe0000; }
.skNews a.skButton						{ display: table; margin: auto; }

/* Video */
/********************************************************************/
.skVideo .content						{ _height: 436px; min-height: 436px; }

/* Locker & Blog link */
/********************************************************************/
.skBlog,
.skLocker								{ padding: 0 0 25px 0; }
.skBlogMobileView						{ display: none; }
.skBlog a.link,
.skBlog a.link:link,
.skBlog a.link:visited,
.skLocker a.link,
.skLocker a.link:link,
.skLocker a.link:visited					{ display: block; position: relative; font-family: 'Oswald',Arial,Helvetica,sans-serif; font-size: 20px; 
										line-height: 26px; color: #fe0000; text-align: center; text-transform: uppercase; }
.skBlog .head,
.skLocker .head							{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; 
										-webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
										-webkit-box-shadow: inset 0 0 0 transparent;
										-moz-box-shadow: inset 0 0 0 transparent;
										box-shadow: inset 0 0 0 transparent; }
.skBlog a.link:hover .head,
.skLocker a.link:hover .head				{ -webkit-box-shadow: inset 0 0 0 10px #fe0000;
										-moz-box-shadow: inset 0 0 0 10px #fe0000;
										box-shadow: inset 0 0 0 10px #fe0000; }
.skBlog img,
.skLocker img							{ filter: grayscale(100%); -webkit-filter: grayscale(100%);
										-webkit-transition: all 0.5s; 
										-o-transition: all 0.5s; 
										transition: all 0.5s; }
.skBlog a.link:hover img,
.skLocker a.link:hover img				{ filter: grayscale(0%); -webkit-filter: grayscale(0%) }
.skBlog .table,
.skLocker .table							{ height: 100%; width: 100%; display: table; vertical-align: middle; }
.skBlog .cell,
.skLocker .cell							{ padding: 20px; display: table-cell; vertical-align: middle; text-shadow: 0 0 20px #000; }
.skBlog .title,
.skLocker .title							{ font-size: 42px; line-height: 60px; color: #fff; display: block; }
.skLocker .summary						{ display: block; }
.skBlog .summary							{ display: none; }

/* Footer css*/
/********************************************************************/
.skFooter								{ background: #000; border-top: 6px solid #fe0000;  }
.skFooterSpacing						{ padding: 48px 38px }
.skSiteLinks							{ width: 269px; float: left;  }
.skBanner								{ width: 296px; float: left; padding: 0 32px; }
.skContact								{ width: 269px; float: left; }

/* Site link css*/
/********************************************************************/
.skSiteLinks ul.list						{ margin: 0; padding: 0; }
.skSiteLinks li.item						{ margin: 0; padding: 8px 0; list-style: none; border-bottom: 1px solid #fe0000; }
.skSiteLinks li.last						{ border: none; }
.skSiteLinks a.link,
.skSiteLinks a.link:link,
.skSiteLinks a.link:visited				{ font-size: 16px; line-height: 20px; color: #fff; display: block; padding: 0 0 0 20px; 
										background: transparent url(images/icn-red-arrow.png) -14px center no-repeat; }
.skSiteLinks a.link:hover				{ background-image: url(images/icn-white-arrow.png); color: #fe0000; }

/* Banner css*/
/********************************************************************/
.skBanner a.link,
.skBanner a.link:link,
.skBanner a.link:visited					{ display: block; position: relative; font-family: 'Oswald',Arial,Helvetica,sans-serif; font-size: 20px; 
										line-height: 26px; color: #fe0000; text-align: center; text-transform: uppercase; 
										border: 5px solid #fff; -webkit-transition: all 0.5s; -o-transition: all 0.5s; 
										transition: all 0.5s; background: #fff; }
.skBanner a.link:hover					{ border-color: #fe0000; }

/* Contact Info css*/
/********************************************************************/
.skContact h3							{ color: #fe0000; font-size: 16px; line-height: 20px; padding: 0 0 6px 0; margin: 0; }
.skContact								{ color: #fe0000; }
.skContact a.link,
.skContact a.link:link,
.skContact a.link:visited				{ text-decoration: underline; color: #fff; }
.skContact a.link:hover					{ color: #fe0000; }

/* Skin Info css*/
/********************************************************************/
.skInfo									{ padding: 30px 0 0 0; color: #fff; line-height: 30px; }
.skInfo .SkinObject,
.skInfo .hiddenLink,
.skInfo a.SkinObject,
.skInfo a.SkinObject:link,
.skInfo a.SkinObject:visited				{ color: #fff; font-size: 12px; line-height: 30px; white-space: nowrap; }
.skInfo a.SkinObject:hover				{ color: #fe0000; }
.skInfo .hiddenLink						{ color: #000; }
.skInfo .hiddenLink:hover				{ color: #222; }
.skInfo .left							{ float: left; }
.skInfo .right							{ float: right; }