/*----------------------------------------------------------------------------------*/
/* Base Styles											                            */
/*----------------------------------------------------------------------------------*/

.wrapper .left .content .page, .wrapper .left .content .contentpage
{	
	width: calc(100% - 20px);
	float: left;	
	margin: 20px 10px 30px 10px;
	padding: 0px 0px 10px 0px;	
}


.wrapper .left .content .page .main, .wrapper .left .content .contentpage .main
{
	width: 100%;
	float: left;
	/*border-bottom: 5px solid #cccccc;*/
}


.wrapper .left .content .page .main h1, .wrapper .left .content .contentpage .main h1
{
	width: calc(100% - 10px);
	float: left;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 0px 5px;
	font-size: 22px;
	color: #000000;
	font-weight: 500;
	border-left: 5px solid #000000;
}


.wrapper .left .content .page .main p, .wrapper .left .content .contentpage .main p
{
	width: 100%;
	float: left;
	font-size: 18px;
	font-weight: 500;
	color: #5a5d60;
}


.wrapper .left .content .page section, .wrapper .left .content .contentpage section
{
	width: 100%;
	float: left;
}




/*----------------------------------------------------------------------------------*/
/* Content Section Styles											                */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .contentpage section,  .wrapper .left .content .page .main section, .exercise .top section
{
	width: 100%;
	float: left;
	font-size: 18px;
	font-weight: 500;
	color: #5a5d60;
	margin: 0px 0px 50px 0px;
	padding: 5px 0px 10px 0px;
	border-bottom: 5px solid #e3e3e3;
}

.exercise .top section
{
	border-bottom: 0px;
}

.wrapper .left .content .contentpage section h1, .wrapper .left .content .page .main section h1, .exercise .top section h1
{	
    width: calc(100% - 15px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 4px 0px 4px 10px;	
	font-size: 30px;
	font-weight: normal;
	line-height: 30px;
	color: #414e54;
	border-left: 5px solid #f21764;
}

.wrapper .left .content .page .main section h1, .exercise .top section h1
{
	margin-top: 25px;
}


.wrapper .left .content .contentpage section h2, .wrapper .left .content .page .main section h2, .exercise .top section h2
{	
    width: calc(100% - 0px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 4px 0px 4px 0px;	
	font-size: 27px;
	font-weight: normal;
	line-height: 27px;
	color: #414e54;	
}




.wrapper .left .content .contentpage section p, .wrapper .left .content .page .main section p, .exercise .top section p
{	
    width: 100%;
	float: left;
	margin: 5px 0px 7px 0px;
	padding: 4px 0px 4px 0px;	
	font-size: 22px;
	color: #5a5d60;
}


.wrapper .left .content .contentpage section ul, .wrapper .left .content .page .main section ul, .exercise .top section ul
{	
    width: calc(100% - 20px);
	float: left;
	margin: 7px 0px 7px 20px;
	padding: 4px 0px 4px 0px;	
	font-size: 22px;
	color: #5a5d60;
}


.wrapper .left .content .contentpage section ul li, .wrapper .left .content .page .main section ul li, .exercise .top section ul li
{	
    width: calc(100% - 20px);
	float: left;
	margin: 4px 0px 4px 20px;
	padding: 4px 0px 4px 0px;	
	font-size: 20px;
	color: #5a5d60;
}




.wrapper .left .content .contentpage section ul p, .wrapper .left .content .page .main section ul p, .exercise .top section ul p
{	
     width: calc(100% - 20px);
	float: left;
	margin: 0px 0px 15px 20px;
	padding: 4px 0px 4px 0px;	
	font-size: 20px;
	color: #5a5d60;
	line-height: 24px;
}



/*----------------------------------------------------------------------------------*/
/* Structure Styles											                        */
/*----------------------------------------------------------------------------------*/

.wrapper .left .content .contentpage section .structure, .wrapper .left .content .page section .structure
{
	width: 100%;
	float: left;
	text-align: center;
	margin: 25px 0px 25px 0px;
}



.wrapper .left .content .contentpage section .structure h1, .wrapper .left .content .page section .structure h1
{
	width: 100%;
	float: left;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 48px;
	color: #f21764;
	font-weight: 500;
	border-left: 0px;
	line-height: 48px;
}


.wrapper .left .content .contentpage section .structure h2, .wrapper .left .content .page section .structure h2
{
	width: 100%;
	float: left;
	text-align: center;
	margin: 3px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 26px;
	color: #414e54;
	font-weight: 500;
	border-left: 0px;
	line-height: 28px;
}


.wrapper .left .content .contentpage section .structure .hlist-large ruby rb, .wrapper .left .content .page section .structure .hlist-large ruby rb
{
	font-size: 48px;
	color: #f21764;
	margin: 0px 5px 0px 5px;
}

.wrapper .left .content .contentpage section .structure .hlist-large ruby rt, .wrapper .left .content .page section .structure .hlist-large ruby rt
{
	font-size: 22px;
	margin: 0px 5px 0px 5px;
}


/*----------------------------------------------------------------------------------*/
/* Example Styles											                        */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .contentpage section .example, .wrapper .left .content .page .main .example, .exercise .top section .example
{
    width: calc(100% - 40px);
	float: left;
	margin: 20px 20px 20px 20px;
	padding: 5px 0px 5px 0px;
	background-color: #ffffff;
	border: 1px solid #cccccc;
}


.wrapper .left .content .contentpage section .example p, .wrapper .left .content .page .main .example p, .exercise .top section .example p
{
    width: calc(100% - 10px);
	float: left;
	margin: 5px 5px 5px 5px;
	padding: 0px;
	text-align: center;
	
	font-size: 18px;
	line-height: 30px;
}


.wrapper .left .content .contentpage section .example .highlight, .wrapper .left .content .page .main .example .highlight, .exercise .top section .example .highlight
{
	color: #f21764;
	font-size: 26px;
	margin: 5px 5px 0px 5px;
}

.wrapper .left .content .contentpage section .example .normal, .wrapper .left .content .page .main .example .normal, .exercise .top section .example .normal
{
	color: #000000;
	font-size: 20px;
	margin: 0px 5px 5px 5px;
}


/*----------------------------------------------------------------------------------*/
/* Alphabet Character Styles								                        */
/*----------------------------------------------------------------------------------*/
.wrapper .left .content .contentpage section .alphabet_character
{
    width: 193px;
	float: left;
	margin-top: 20px;
	margin-left: calc(50% - 100px);
	margin-bottom: 20px;
	padding: 0px 0px 0px 0px;	
	border-left: 7px solid #000000;
}


.wrapper .left .content .contentpage section .alphabet_character h1
{
    width: calc(100% - 10px);
	float: left;
	margin: 0px 5px 5px 5px;
	padding: 0px;
	color: #f21764;
	text-align: center;	
	font-size: 65px;
	font-weight: 500;
	line-height: normal;
	border: 0px;
}

.wrapper .left .content .contentpage section .alphabet_character h2
{
    width: calc(100% - 10px);
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 0px 0px;
	color: #000000;
	text-align: right;	
	font-size: 25px;
	line-height: normal;
	border: 0px;
	background-color: #ffffff;
	border-top-right-radius: 5px;
}



/*----------------------------------------------------------------------------------*/
/* Split Layout Breakpoints For Large Screens										*/
/* 48em = 768px, 62em = 992px                                                       */
/* Breaking mobile after common vertical tablets ~62em                              */
/*----------------------------------------------------------------------------------*/

@media (min-width: 62em) 
{

	.wrapper .left .content .page .main h1, .wrapper .left .content .contentpage .main h1
	{		
		font-size: 38px;		
	}
	
	.wrapper .left .content .page .main p, .wrapper .left .content .contentpage .main p
	{		
		font-size: 22px;		
	}
	
	
	
}