html {
 font-family: TELUS-Web,Helvetica Neue,Helvetica,Arial,sans-serif;
 background: #fff;
 width: 1200px;
 margin: auto;
}

button#button1 {
    height: 30px;
    background: #2b8000;
    border: solid 1px #555;
    color: #fff;
    border-radius: 2px;
    font-size: 17px;
}

button {
    border: solid 1px #555;
    border-radius: 2px;
    color: #666;
}

input#webURL, input#webURL2 {
    width: 300px;
    height: 25px;
    font-size: 17px;
}

input#generatedResult, input#generatedResult2 {
    width: 340px;
    height: 25px;
    font-size: 17px;
}

input#webURLExample, input#webURL2Example {
    width: 300px;
    background: #989898;
    color: #fff;
    border: 2px solid #909090;
    border-radius: 0px;
}

input#webContentText {
    width: 700px;
    height: 25px;
    font-size: 17px;
}

input#webContentTextExample {
    width: 700px;
    background: #989898;
    color: #fff;
    border: 2px solid #909090;
    border-radius: 0px;
}

input#webContentTextBegining, input#webContentTextEnd {
    width: 343px;
    height: 25px;
    font-size: 17px;
}

input#webContentTextBeginingExample, input#webContentTextEndExample {
    width: 343px;
    background: #989898;
    color: #fff;
    border: 2px solid #909090;
    border-radius: 0px;
}

#mainTitle {
	text-align: center;
	font-size: 32px;
}
#mainSubTitle {
	text-align: center;
	font-size: 15px;
}

#mainTitleNested {
	text-align: center;
	font-size: 18px;
}
#mainSubTitleNested {
	text-align: center;
	font-size: 15px;
}

.boxWrapper {
	margin-bottom: 20px;
	padding: 5px;
}

.boxWrapperNested  {
    margin: auto;
    padding: 5px;
    width: 430px;
    margin-top: 20px;
}

#defaultHidden1, #defaultHidden2 {
display: none;
}

.boxTitle {
	background: #4b286d;
	padding: 5px;
	color: white;
	border-radius: 5px 5px 0px 0px;
	border: solid 1px #000;
}
.boxSubTitle {
	background: #1c1c1e;
	padding: 5px;
	color: white;
}
.contentArea {
	min-height: 30px;
	background: #f2f2f7;
	border-radius: 0px 0px 5px 5px;
	border: solid 1px #2c2c2e;
	text-align: center;
        padding: 30px;
}

.contentAreaNested {
	min-height: 30px;
	background: #f2f2f7;
	border-radius: 0px 0px 5px 5px;
	border: solid 1px #2c2c2e;
	text-align: center;
        padding: 10px;
}

input[type=button] {
	background: #248700;
	padding: 10px;
	color: #fff;
	font-size: 18px;
	border: solid 1px #2c2c2e;
	margin: 10px 0px 10px 0px;
	border-radius: 5px;
}

input[type=text] {
text-align: center;
}



::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #444;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #444;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #444;
}


.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #353535;
	color: white;
	text-align: center;
	padding: 5px;
}


/*
Colors
Light Grey: #f2f2f7
Dark Grey: #2c2c2e
Darker Grey: #1c1c1e
Purple: #4b286d
Green: #248700
*/