/*** RESET **********************************************/
html, body, h1, h2, h3, a, img, input, ul
{
	padding: 0;
	margin: 0;
	border: 0;
}
/*** TAGS ***********************************************/
body
{
	background-color: #fff;
	/*font-family: Arial, Helvetica, Verdana;
	font-size: 14px;
	line-height: 22px;
	color: #666;
	position: relative;
	-webkit-text-size-adjust: none;*/

	font-family: 'Roboto Slab', serif;
}
/*h1, h2, h3, h4, h5, h6
{
	line-height: 1;
	font-weight: bold;
	margin: 20px 0 10px 0;
}
h1, h2, h3
{
	font-size: 18px;
}
h4, h5, h6
{
	font-size: 16px;
}
p
{
	margin: 0 0 10px 0;
}*/

a, a:link, a:active, a:visited, a:hover
{
	color: white;
	text-decoration: none;

	font-weight: initial;
}

.header,
.footer
{
	position: fixed;
	font-size: 16px;
	background-color: #263038;
	color: white;
	line-height: 40px;


	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 40px;
}

.header
{
	top: 0px;
	padding-left: 0;

	z-index: 99;
}

.header.fixed
{
	position: fixed;
	top: 0;
	left: 0;
}
.footer.fixed
{
	position: fixed;
	bottom: 0;
	left: 0;
}
.header a
{
	background: center center no-repeat transparent;
	background-image: url( "../images/menu.png" );

	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 270px;
}

/* ------------------------------ Slide Menu section -------------------------- */

.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited
{
	color: white;
}

li.sep
{ 
	margin-top: 7px; 
	padding-top: 14px; 
	border-top: 1px solid #556270;
}

li a
{
	display: block;

	height: 100%;
	width: 100%;

	margin: 0px;
}

nav.main-slide-menu {
	position: fixed;
	top: 0;
	top: -342px;
	bottom: 0;
	display: block;
	float: left;
	width: 100%;
	height: 356px;

	z-index: 98;

	background-color: #263038;
	text-align: center;

	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;

	> ul {
		display: block;
		margin: 40px;
		padding: 0;
		list-style: none;
		opacity: 0.5;

		-moz-transition: all 300ms;
		-webkit-transition: all 300ms;
		transition: all 300ms;

		li {
			color: white;
			padding: 6px 0;
			cursor: pointer;
			text-decoration: none;

			&:hover { color: #59e9df; }
		}

		li:before {
			font-family: "ico";
			font-style: normal;
			font-weight: normal;
			speak: none;
			display: inline-block;
			text-decoration: none;
			width: 1em;
			color: #59e9df;
			margin-right: 12px;
			text-align: center;
			font-variant: normal;
			font-size: 0.75em;
			text-transform: none;
			line-height: 1em;
		}
	}
}

nav#sub-slide-menu {
	position: fixed;
	top: 0;
	top: -342px;
	bottom: 0;
	display: block;
	float: left;
	width: 100%;
	height: 217px;

	z-index: 98;

	background-color: #263038;
	text-align: center;

	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;

	> ul {
		display: block;
		margin: 40px;
		padding: 0;
		list-style: none;
		opacity: 0.5;

		-moz-transition: all 300ms;
		-webkit-transition: all 300ms;
		transition: all 300ms;

		li {
			color: white;
			padding: 6px 0;
			cursor: pointer;
			text-decoration: none;

			&:hover { color: #59e9df; }
		}

		li:before {
			font-family: "ico";
			font-style: normal;
			font-weight: normal;
			speak: none;
			display: inline-block;
			text-decoration: none;
			width: 1em;
			color: #59e9df;
			margin-right: 12px;
			text-align: center;
			font-variant: normal;
			font-size: 0.75em;
			text-transform: none;
			line-height: 1em;
		}
	}
}

body.menu-active nav.main-slide-menu { top: 40px; }

body.sub-menu-active nav#sub-slide-menu { top: 40px; }

/*
  Content
*/

[data-role="content"]
{
    position: fixed;
	top: 40px;
	left: 0;
	width: 100%;
	height: 100%;
	/*overflow: scroll;*/
	background: #fcfeff;
	border-radius: 0;
	padding: 0;
	margin: 0;
	border: 0;

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	-moz-box-shadow: -3px 0 6px darken(#556270, 5%);
	-webkit-box-shadow: -3px 0 6px darken(#556270, 5%);
	box-shadow: -3px 0 6px darken(#556270, 5%);

	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;

	div.menu-trigger {
		position: fixed;
		top: 10px;
		left: 10px;
		width: 36px;
		height: 36px;
		background: #dfe5eb;
		cursor: pointer;
		border-radius: 5px;

		-moz-transition: all 300ms;
		-webkit-transition: all 300ms;
		transition: all 300ms;

		&:before { 
			content: '\e801';
			display: inline-block;
			width: 36px;
			height: 36px;
			color: black;
			font-family: "ico";
			font-style: normal;
			font-size: 1.2em;
			font-weight: normal;
			font-variant: normal;
			text-align: center;
			text-transform: none;
			line-height: 36px;
		}
	}
}

body.menu-active [data-role="content"] { top: 396px; border-radius: 7px 0 0 7px; }
body.menu-active .menu-icon { content:url("../images/X.svg"); }

body.sub-menu-active [data-role="content"] { top: 258px; border-radius: 7px 0 0 7px; }

/*** SLIDING-BOTTOM-MENU ****************************************/
nav.sliding-bottom-menu
{
	position: fixed;
	/*top: 736px;*/
	top: 1200px;
	bottom: 0;
	display: block;
	float: left;
	width: 100%;
	height: 100%;

	z-index: 98;

	background-color: #263038;
	text-align: center;

	color: white;

	overflow: auto;

	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
}

.sliding-bottom-menu-header
{
	height: 40px;
	width: 100%;
}

.sliding-bottom-menu-title-wrapper
{
	display: inline-block;

	height: 100%;
	width: 80%;

	vertical-align: top;
}

.sliding-bottom-menu-subtitle-wrapper
{
	display: inline-block;

	height: 100%;
	width: 80%;

	vertical-align: top;
}

.sliding-bottom-menu-title
{
	text-align: left;

	margin-left: 20px;

	line-height: 40px;
}

.sliding-bottom-menu-icon-wrapper
{
	display: inline-block;

	position: relative;

	height: 100%;
	width: 20%;
}

.sliding-bottom-menu-title-icon
{
	position: absolute;

	right: 23px;

	height: 100%;
	width: 26px;
}

/*** SETTINGS MENU **********************************************/

body.settings-active nav#slide-settings { top: 40px; }

/*** EXAMPLES MENU **********************************************/

body.examples-active nav#slide-examples { top: 160px; }

/* ------------------------------ Header section ------------------------------ */

.title-wrapper
{
    position: relative;

    height: 40px;
    width: 270px;

    font-family: 'Sancreek', cursive;
    font-size: 20px;

    margin-left: auto;
	margin-right: auto;
}

.title
{
	position: relative;
	
	height: 40px;
	width: 270px;

	margin-left: auto;
	margin-right: auto;
}

.zizigougou-left
{
    position: absolute;

    top: 10px;
    left: 10px;

    height: 17px;
}

.zizigougou-right
{
    position: absolute;

    top: 10px;
    left: 218px;

    height: 17px;
}

.title-logo-inverted
{
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.title-line1
{
	position: relative;

    width: 186px;

    margin: auto;

    line-height: 40px;
    text-align: center;
    text-shadow: initial;

    font-weight: normal;
}

.menu-touch-area
{
	top: 0px;
	right: 0px;

	height: 50px;
	width: 50px;
}

.menu-icon
{
	position: relative;

	top: 6px;
	right: -18px;

	width: 25px;
}

.menu-trigger
{
	display: inline-block;
	position: absolute;

	z-index: 100;
}

/*** HOMEPAGE CONTENT ***********************************/
#template
{
	display: inline-block;

	height: 120px;
	width: 100%;

	background-color: #2FC9C7;
}

.rules-dropdown
{
	position: relative;
	width: 294px;
	margin-left: auto;
	margin-right: auto;
}

#template-line1
{
    position: relative;

    height: 60px;
}

#template-line2
{
    position: relative;

    height: 60px;
}

#template-input
{
	text-transform: uppercase;
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
}

#ckeditor-wrapper
{
	width: 294px;

	margin-left: auto;
	margin-right: auto;
}

#legend
{
	display: none;

	height: 100px;

	background-color: #f3f3f3;
}

.legend-bullet
{
	display: inline-block;

	height: 50%;
	width: 33%;

	min-width: 106px;

	vertical-align: top;
}

.inner-bullet
{
	position: relative;

	top: 50%;

	height: 42px;

	margin: -21px auto 0px auto;

	min-width: 106px;
	max-width: 200px;
}

.bullet-box
{
	display: inline-block;

	position: relative;

	top: 50%;

	height: 34px;
	width: 34px;

	margin-top: -17px;

	vertical-align: top;
	border-radius: 6px;
	text-align: center;
	font-size: 23px;
	background-color: #e7e7e7;
}

#bullet-text-asterisk
{
	display: inline-block;

	width: 72px;

	margin-top: 2px;

	font-size: 10px;
}

#bullet-text-dot
{
	display: inline-block;

	width: 72px;

	margin-top: 8px;

	font-size: 10px;
}

#bullet-text-question
{
	display: inline-block;

	width: 72px;

	margin-top: 8px;

	font-size: 10px;
}

#bullet-text-sharp
{
	display: inline-block;

	width: 72px;

	margin-top: 14px;

	font-size: 10px;
}

#bullet-text-at
{
	display: inline-block;

	width: 72px;

	margin-top: 14px;

	font-size: 10px;
}

#bullet-text-and
{
	display: inline-block;

	width: 72px;

	margin-top: 8px;

	font-size: 10px;
}

#wrapper-result
{
	/*height: 478px;*/
	height: 258px;

	overflow: auto;
}

.result-column
{
	display: inline-block;
	/*height: 230px;*/
	width: 50%;
	/*min-width: 154px;

	margin-left: 4px;*/
    
    vertical-align: top;
}

.result-item
{
    display: inline-block;

    height: 28px;
    width: 100%;
    
    font-size: 17px;

    margin-top: 5px;
    margin-bottom: 5px;
}

.result-prefix
{
    display: inline-block;

    width: 14px;

    margin-left: 4px;
}

.result-label
{
    margin-left: 6px;

    cursor: pointer;
}

.heart-img
{
    height: 14px;
}

.rightFavoriteBar
{
	width: 38px;
	bottom: 50px;
	background-image: url("../images/HeartWhite.svg");
	background-size: 30px;
	background-position: 5px center;
	position: fixed;
	right:-38px;
	top: 40px;
	background-repeat : no-repeat;
	background-color: #263038;
}

.movableName
{	
	position: fixed;
	font-size : 20px;
	z-index: 2;
}

#navigation-results
{
	width: 100%;
}

#prevPage, #nextPage
{
    display: none;
    float: left;
}

#nextPage
{
    float: right;
}

    #prevPage > *, #nextPage > *
    {
        vertical-align: middle;
    }

    #prevPage div, #nextPage div
    {
        display: inline-block;
        width: 0;
        height: 0;
        border: 10px solid #263038;
        border-color: transparent #000 transparent transparent;
        margin: 0 10px;
    }

    #nextPage div
    {
        border-color: transparent transparent transparent #263038;
    }

.main-settings
{
	display: none;
    position: fixed;
    
    height: 358px;
    width: 100%;
    
    color: white;
    background-color: #263038;
    
    -moz-transition: all 400ms;
	-webkit-transition: all 400ms;
	transition: all 400ms;

    overflow: scroll;
}

/*** FAVORITES CONTENT **********************************/
#favorites
{
	min-height: 478px;

	margin: auto;

	background-color: #e7e7e7;
}

#fav-template-line1,
#fav-template-line2
{
	display: inline-block;

	height: 50%;
	width: 100%;

	vertical-align: top;
}

#fav-template-line1 span
{
	position: absolute;

	top: 5px;
	left: 39px;
	
	color: white;

	font-size: 17pt;
}

#fav-title-wrapper
{
	position: relative;

	width: 206px;

	margin: 5px auto 5px auto;
}

#fav-panel-img
{
	display: block;

	height: 40px;
	width: 206px;

	margin: 5px auto 5px auto;
}

#heart-left
{
	position: absolute;
	top: 13px;
	left: 13px;

	height: 13px;
}

#heart-right
{
	position: absolute;
	top: 13px;
	left: 180px;
	
	height: 13px;
}

#fav-list
{
	display: inline-block;

	height: 100%;
	width: 260px;
}

.select_fav
{
	position: relative;

	width: 220px;

	padding-left: 5%;
}

#fav-share-icon
{
	position: relative;

	top: 50%;

	height: 28px;

	margin-top: -14px;

	vertical-align: top;
}

#fav-domain-name
{
	background-color: #f3f3f3;
}

#fav-domain-header
{
	height: 40px;
	width: 100%;

	margin-left: 5%;

	line-height: 40px;

	color: #757d83;
}

#fav-domain-footer
{
	position: fixed;

	bottom: 60px;

	height: 50px;
	width: 100%;
}

.domain-extension-box
{
    display: inline-block;

    position: relative;
    height: 30px;
    width: 95px;

    margin: 5px 0px 5px 9px;

    background-color: white;
    border-radius: 6px;

    vertical-align: top;
}

#domain-extension-section
{
	width: 320px;

	margin-left: auto;
	margin-right: auto;
}

.domain-extension
{
    display: inline-block;
    position: relative;
    left: 10px;
    width: 69px;
    top: 4px;
    font-size: 12pt;
}

.domain-extension-availability
{
    display: inline-block;
}

.domain-extension-availability-icon
{
    height: 16px;
    top: 8px;
    position: relative;
}

#add-domain-extension
{
	background-color: #2FC9C7;
}

#add-domain-extension-img
{
    height: 100%;

    position: absolute;
    top: 0px;
    left: 31px;
}

#test
{
    height: 50px;
    width: 50px;
    line-height: 50px;

    margin: 5px auto 5px auto;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: #9A9A9A;
    text-align: center;
    font-size: 26px;
}

#fav-domain-delete-icon
{
	height: 20px;
}

#favorites-animation
{
	display: none;

	position: absolute;
	top: 120px;

	height: 435px;
	width: 100%;

	background-color: white;
	opacity: 0.4;
}

#loading-animation-favorites
{
    position: relative;

    top: 34px;
    left: 50%;

    height: 346px;
    width: 346px;

	margin-left: -173px;
}




#favorites-inner
{
	position: relative;
	top: 10px;
}

 .extension-loading-animation
{
    display: none;

    height: 88px;
    position: absolute;
    top: -26px;
    left: 31px;
}


/*** FAVORITES SETTINGS **********************************/

#domain-extensions
{
    position: fixed;
    
    height: 358px;
    width: 100%;
    
    color: white;
    background-color: #263038;
    
    -moz-transition: all 400ms;
	-webkit-transition: all 400ms;
	transition: all 400ms;

    overflow: scroll;
}

.pronounceable-wrapper
{
	width: 320px;
    
    margin: 20px auto;
}

#pronouncable-label
{
	display: inline-block;

	height: 40px;

	line-height: 40px;
	text-align: left;
	margin-left: 20px;
	margin-top: 10px;
}

#pronouncable-names
{
	display: inline-block;

	height: 40px;
	width: 100px;

	vertical-align: top;
	margin-top: 18px;
	text-align: right;
}

#extension-wrapper
{
	width: 320px;
    
    margin: 0px auto;
}

.extension-item
{
	display: inline-block;

	height: 30px;
	width: 50%;

	margin: 5px 0px;
}

.extension-item-inner
{
    position: relative;
    
    margin: 0px 11px;
}

.extension-label
{
	display: inline-block;

	height: 30px;
	width: 70px;

	line-height: 30px;
	text-align: left;
}

.extension-input
{
	display: inline-block;

	height: 30px;
	width: 50px;

	text-align: right;
	vertical-align: top;
}

/*** EXAMPLES PAGE *********************************/
.ex-li
{
	width: 278px;

	margin: 10px auto 0px auto;

    color: #263038;
}

    .ex-li li
    {
        border-radius: 6px;
        background: white;
        float: left;
        margin-bottom: 10px;

        width: 278px;
        height: 106px;
    }

    .ex-li p
    {
        font-size: 14px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

.ex-icon
{
    float: left;
    margin-left: 3px;
    margin-top: 4px;
    width: 28px;
}

.try-btn
{
    float: right;
    height: 32px;
    margin-right: 8px;
    width: 60px;
    color: #FFF;
    background: #263038;
    margin-top: 2.5px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/*** OTHER PAGE CONTENT *********************************/
#other-page-content
{
	padding: 0px 14px 50px 14px;

	background-color: #e7e7e7;
}

#other-page-content h1
{
    color: #2fc9c7;

    font-weight: normal;
}

#other-page-content h3
{
    font-size: 20px;
    font-weight: normal;

    color: #2fc9c7;
}

#other-page-content p
{
    display: inline-block;
    color: #757d93;
}

#other-page-content ul{

    columns: 2;

    -webkit-columns: 2;
    -moz-columns: 2;
}

#other-page-content li
{
    color: #757d93;

    list-style: none;
}

#hyperlink
{
    color:#2fc9c7;
}

#ad-space
{
	position: fixed;
	bottom:0;
	left:0;
	z-index: 99; 
	width:100%; 
	height:50px
}

#ad-inner
{
	position: absolute;
	right: 0px;
}

div#pronouncable-names ui-btn-active
{
	background-color: #2FC9C7;
}

div#pronouncable-names ui-btn-active
{
	background-color: #2FC9C7;
}

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    display: block;
    padding: 0.9em 75px 0.9em 15px;
}
div.ui-slider-switch {
    position: absolute;
    right: 0;
}

div.ui-slider-switch.ui-mini
{
    top: -11px;
}

.ui-page-theme-a .ui-slider-track .ui-btn-active
{
	background-color: #2FC9C7;
	border-color: #2FC9C7;
}


#toSharePopup
{
    display: none;

    position: absolute;
    top: 122px;
    left:49px;

    width: 257px;

    background: none repeat scroll 0 0 #263038;
    border: 1px solid #263038;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: normal;
    z-index: 2;
}

.share-heding {
    display: inline-block;
    width: 100%;
}

    .share-heding span {
        float: left;
        margin-left: 10px;
    }

.share-heding2 {

    width: 196px;

    background: #263038;
    margin: 10px auto;
    min-height: 70px;
    border-bottom: 1px solid #263038;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#arrow-setting
{
    top: -10px;
    left: 217px;
}

.arrow-up {
	position: absolute;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #263038;
}

.addthis_toolbox
{
    position: relative;
}