/* - - - - - - - - - - - - - - - - - - - -
   SONY CUX GLOBAL CSS
- - - - - - - - - - - - - - - - - - - - - 

CONTENTS:
- font-face
- minimal reset
- native elements
- chunks
- columns
- buttons
- forms
- helpers

- - - - - - - - - - - - - - - - - -
FORMULAS:
- - - - - - - - - - - - - - - - - -
FF line-height fix: (container-height / font-size = line-height) (no need for margin-top)

*/


/* FONTS
- - - - - - - - - - - - - - - - - */
@font-face {
	font-family: 'Raleway-Thin';
	src: url('../fonts/Raleway-Thin.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-ExtraLight';
	src: url('../fonts/Raleway-ExtraLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Light';
	src: url('../fonts/Raleway-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Regular';
	src: url('../fonts/Raleway-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Medium';
	src: url('../fonts/Raleway-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Semibold';
	src: url('../fonts/Raleway-Semibold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Bold';
	src: url('../fonts/Raleway-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-ExtraBold';
	src: url('../fonts/Raleway-ExtraBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway-Heavy';
	src: url('../fonts/Raleway-Heavy.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/* NATIVE ELEMENTS
- - - - - - - - - - - - - - - - - */
* {
	margin: 0;
	padding: 0;
	font-family: 'Raleway-Regular';
}
html {
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	height: 100%;
}
body {
	color: #424849;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	min-height: 100%;
	position: relative;
	background-color: #FFF;
}

h1, h2, h3 { color: #1B3454; font-weight: normal; font-family: 'Raleway-Bold';}

h2 span.italics { font-style: italic;}
h2 span.soft { font-weight: 100; }
h2.top { color: white; font-weight: 100; }
h2.tRed { color: #df3800; }
h2.red { color: #DF3800; }

p {
	font-size: 13px;
	color: #424849;
	font-weight: 100;
	margin-bottom: 1em;
	margin-top: 0.5em;
}
ul, ol { font-size: 14px; }
p strong { font-family: 'Raleway-Bold'; }
p strong b { font-family: 'Raleway-Bold'; }
p.smaller { font-size: 14px; }
p.bigger { font-size: 20px; }
p.white { color: white; }
p.shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
p.large { font-size: 25px;  margin: 0;}

strong { font-family: 'Raleway-Bold', Arial, sans-serif; font-weight: normal; }
strong.turq {color: #19b5bf;}

hr {
	clear: both;
	height: 0;
	margin: 25px 0;
	border: 0;
	border-top: 2px solid #e3e3e3;
	border-bottom: 1px solid #ffffff;
}
hr.thin { margin: 5px 0; border-bottom: none; }


/* CHUNKS
- - - - - - - - - - - - - - - - - */
.chunk {
	-moz-box-sizing: border-box;
		 box-sizing: border-box;
}
/* chunk mods */
.chunk.left  { float:  left; padding-right: 3%; }
.chunk.right { float: right; padding-left:  2.5%; }
.chunk.no-padding { padding-left: 0; padding-right: 0; }
.chunk.border-left  {  border-left: 1px solid #dcdcdc; }
.chunk.border-right { border-right: 1px solid #dcdcdc; }


/* LINKS
- - - - - - - - - - - - - - - - - */
a, a:hover {color: #1B3454; text-decoration: underline;}
a:hover { color: #de3e26; }
a.link {
	text-decoration: underline;
	cursor: pointer;
}
a.link:hover { text-decoration: none; }
/* mods */
a.link.red  { color: #e74c3c; }
a.link.blue { color: #3498db; }
a.link.gray { color: #7f8c8d; }
a.link.center  { display: block; text-align: center; }
a.link.center2 { display: inline-block; text-align: center; }
a.link.right   { display: block; float: right; }
a.link.href:after   { content: attr(href); }
a.icon-link { text-decoration: none; }
a.icon-link:hover > h2 { color:#63564d; } 
a.no-hl { text-decoration: none; color: #8B9596; }
a.no-hl:hover { text-decoration: underline; }
a.bold 		{ font-family: 'Raleway-Bold';  text-decoration: none; }

/* BUTTONS
- - - - - - - - - - - - - - - - - */
a.button {
	font-family: 'Raleway-Bold';
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	text-transform: uppercase;
	color:#fff;
	width: 180px;  
	height: 40px; 
	line-height: 40px;
	display: block; 
}
a.button.twolines {
	height: 46px; 
	font-size: 21px;
	line-height: 16px;
	padding-top: 8px;
}
a.button.twolines span { 
	font-size: 13px; 
	font-family: 'Ubuntu-Regular';
}
/* primary buttons */
a.button.red 		{ background-color: #df3800; }
a.button.red:hover 	{ background-color: #be0f00; }
a.button.blue 		{ background-color: #1b3454; }
a.button.blue:hover { background-color: #294f7f; }

/* common button mods */
a.button.tiny { font-size: 13px; line-height: 28px; width: 108px; height: 30px; background-size: 231px 134px; }
a.button.tiny.red 			{ background-position:   -5px -8px;  }
a.button.tiny.red:hover 	{ background-position: -113px -8px;  }
a.button.tiny.blue 		{ background-position:   -5px -37px; }
a.button.tiny.blue:hover 	{ background-position: -114px -37px; }

a.button.mini {	font-size: 15px; width:125px; height:32px; line-height: 30px; }
a.button.large { width: 175px; }
a.button.full { width: 100%; }
a.button.flex { width: auto; display: inline-block; }
a.button.long { width: 250px; }
a.button.center { margin-left: auto; margin-right: auto; }

/* ICONS
- - - - - - - - - - - - - - - - - */
div.icon          		 { background-image: url('../images/icons/s.png'); }
a.icon         			 { background-image: url('../images/icons/s.png'); cursor: pointer; }
div.icon.usa      	     { width:  39px;  height:  25px; background-position: -525px -46px; margin-top: 4px; }
div.icon.cards     	     { width: 180px;  height: 111px; background-position: -212px  -0px; border: 8px solid #fff; }
div.icon.phone-blue	     { width:  35px;  height:  35px; background-position: -525px  -5px; }
div.icon.phone-red	     { width:  90px;  height:  90px; background-position: -395px  -5px; background-color: #de3e26; border: 10px solid #de3e26; }
a.icon.fb     	 	     { width:  55px;  height:  55px; background-position:    0px  -0px; }
a.icon.twitter           { width:  55px;  height:  55px; background-position:  -62px  -0px; }
a.icon.youtube   	     { width:  55px;  height:  55px; background-position:  -62px -68px; }
a.icon.rss     	         { width:  55px;  height:  55px; background-position:    0px -68px; }
a.icon.phone   	         { width:  23px;  height:  22px; background-position: -491px -24px; margin-right: 6px; margin-bottom: 5px; }
a.icon.mail   	         { width:  23px;  height:  22px; background-position: -491px -51px; margin-right: 6px; margin-bottom: 5px; }
a.icon.arr   	         { width:  23px;  height:  22px; background-position: -491px -68px; margin-right: 6px; margin-bottom: 5px; }
a.icon.arr-gray-left     { width:  36px;  height:  35px; background-position: -124px -44px; }
a.icon.arr-gray-right    { width:  36px;  height:  35px; background-position: -165px -44px; }
a.icon.arr-gray-left:hover  { background-position: -124px  -0px; opacity: 1; }
a.icon.arr-gray-right:hover { background-position: -165px  -0px; opacity: 1; }
a.icon.arr-blue-left     { width:  36px;  height:  35px; background-position: -125px -84px; }
a.icon.arr-blue-right    { width:  36px;  height:  35px; background-position: -166px -86px; }
a.icon.arr-red-left      { width:  36px;  height:  35px; background-position: -125px  -0px; }
a.icon.arr-red-right     { width:  36px;  height:  35px; background-position: -166px  -0px; }
div.icon.quotes   	     { width:  28px;  height:  25px; background-position: -447px -97px; margin-top: 3px; }
a.icon 				     { display: block; }
a.icon:hover 		     { opacity: .8; }
a.icon.arr-red-right:hover { opacity: 1.0;}

a.icon.blh:hover 		 { width:  36px;  height:  35px; background-position: -124px -87px; opacity: 1.0; }
a.icon.brh:hover 		 { width:  36px;  height:  35px; background-position: -165px -87px; opacity: 1.0; }
a.icon.rlh:hover  		 { width:  36px;  height:  35px; background-position: -124px  -0px; opacity: 1.0; }
a.icon.rrh:hover 		 { width:  37px;  height:  35px; background-position: -165px  -0px; opacity: 1.0; }
a.icon.fpt   { width:  250px;  height:  95px; background-position: 680px  -128px; }

/* FORMS
- - - - - - - - - - - - - - - - - */
label 		{ color: #1B3454;  font-size:16px; font-family: 'Raleway-Bold'; }
label.brown { color: #6b5f55; text-transform: none; font-weight: normal; }
label span 	{ color: #95a5a6; font-size: 10px; }
label.light { color: #bdc3c7; }
label.error { color: #e44c3e; }
label.red   { color: #e44c3e; }

.input, textarea, select {
	width: 100%;
	height: 30px;
	outline: none; /* removes crappy default webkit blue glow */
	border: 0;
	
}

select { padding:4px 2px; font-size:16px; }
input.fl{
	width:100%;
}
textarea.brown-border, input.brown-border { border: 1px solid #6b5f55; box-shadow: none; }
input.error, textarea.error, select.error { border: 2px solid #e44c3e; }
input, textarea {
	padding-left:  4px;
	padding-right: 4px;
	border-radius: 2px;
	border: 1px solid #dedede;
}
input:focus, textarea:focus {
	border: 1px solid #ff9b00;
}

input {
	color: #2c3e50;
	font-family: 'Raleway-Regular', Arial, sans-serif;
	font-size: 14px;
	line-height: 2;
	height:30px;
}
input.long { width: 250px; }

textarea.taller { height: 120px; }

input[type="checkbox"],
input[type="radio"],
input[type="file"] {
	box-shadow: none;
}
input[type="checkbox"] {
	width: auto;
}
input[type="file"] {
	line-height: 0;
	padding: 0;
	border: none;
}


/* HELPERS
- - - - - - - - - - - - - - - - - */
.fl { float: left; }
.fr { float: right; }
.cl { clear: left; }
.cr { clear: right; }
.clear { clear: both; }
.clearfix {	zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left  { text-align: right; }
.text-shadow { text-shadow: 1px 1px 1px #111;}
.block-center { margin-left: auto; margin-right: auto; }
.block-right { margin-right:auto; right:0; }
img.center { display: block; margin-left: auto; margin-right: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.inline { display:inline; }
.inline-block { display:inline-block; }
.no-padding { padding:0; }
.no-margin { margin: 0; }
.no-mb { margin-bottom: 0; }
.no-border { border: 0 !important;}
.mtp5 { margin-top: 5px; }
.mt0_3 { margin-top: 0.3em; }
.mt0_5 { margin-top: 0.5em; }
.mt1 { margin-top: 1em; }
.mt1_5 { margin-top: 1.5em; }
.mt2 { margin-top: 2em; }
.mt-2 { margin-top: -2em; }
.mt3 { margin-top: 3em; }
.mt4 { margin-top: 4em; }
.mt6 { margin-top: 6em; }
.mt9 { margin-top: 9em; }
.mb0_5 { margin-bottom: 0.5em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.pb1 { padding-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }
.ml1 { margin-left: 1em; }
.mr0_5 { margin-right: .5em; }
.ml2 { margin-left: 2em; }
.ml3 { margin-left: 3em; }
.ml4 { margin-left: 4em; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.pl0_5 { padding-left: 0.5em; }
.pl1 { padding-left: 1em; }
.pr1 { padding-right: 1em; }
.pt0_5 { padding-top: 0.5em; }
.pt1 { padding-top: 1em; }
.f65 { font-size: 65px;}
.onethird    { width:  33.3333%; }
.twothirds   { width:  66.6666%; }
.five        { width:   5%; }
.ten         { width:  10%; }
.fifteen     { width:  15%; }
.twenty      { width:  20%; }
.twentytwo   { width:  22%; }
.twentyfour  { width:  24%; }
.twentyfive  { width:  25%; }
.thirty      { width:  30%; }
.thirtythree { width:  33.3%; }
.thirtyfive  { width:  35%; }
.forty       { width:  40%; }
.fortyfive   { width:  45%; }
.fifty       { width:  50%; }
.fiftyfive   { width:  55%; }
.sixty       { width:  60%; }
.sixtyfive   { width:  65%; }
.seventy     { width:  70%; }
.seventyfive { width:  75%; }
.eighty      { width:  80%; }
.eightyfive  { width:  85%; }
.ninety      { width:  90%; }
.ninetyfive  { width:  95%; }
.onehundred  { width: 100%; }
.full        { width: 100%; }
.no-select {
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}

/* WIDGET DMV */
.widget-dmv { background-color: #E6E6E6; text-align: center; padding:10px; }
.widget-dmv .title-dmv { color: #1B3454; font-family: 'Raleway-Bold', sans-serif; font-size: 30px; }
.widget-dmv .subtitle-dmv { color: #DF3800; font-family: 'Raleway-Bold', sans-serif; font-size: 18px; }

/* PRACTICE TEST */
.state-approved span {
	font-family: 'Raleway-Bold';
	color: #df3800;
	margin: 8px 0 0 6px;
}

.button-taketest {
	display: block;
	position: relative;
	width: 260px;
	height: 100px;
}

.button-taketest .img-test {
	display: block;
	position: relative;
	width: 100px;
	height: 100px;
	background-image: url(../images/practice-test/sign.png);
	background-size: 100%;
}

.redtext, .bluetext {
	z-index: 10;
}

.button-taketest .redtext {
	position: absolute;
	color: #df3800;
	font-family: 'Raleway-Bold';
	font-size: 24px;
	top: 5px;
	left: 11px;
}

.button-taketest .bluetext {
	position: absolute;
	width: 200px;
	height: 40px;
	color: #FFF;
	background-color: #1b3454;
	font-family: 'Raleway-Bold';
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	top: 33px;
}

.free-dmv-exam {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #CCC;
	margin: 10px 0 20px 0;
}

.question { margin: 20px; }
.answers { margin: 20px; }
.answers ul { list-style: none; margin-left: 20px; }
.answers ul li { margin: 0 0 20px 0; font-size: 18px; }
.answers input { height: 14px; width: 14px; margin-right: 10px; }
.next { width: 100%; margin: 20px 0; }
.next a { margin: 0 auto; }

.gray { background-color: #DDD; }
.correct { background-color: #0B0; }
.fail { background-color: #B00; }

.big-number { font-size: 60px; text-align: center; }
.text-result { text-align: center; }
.bRight { border-right: 1px solid #AAA; }

.tGreen { color: #0B0; }
.tRed { color: #B00; }

.captcha .random1, .captcha .random2 { font-size: 20px; font-weight: 700; display: inline; color: #126FA7; margin: 0 10px; line-height: 30px; }
#captcha { width: 70px; }
.captcha .sign { line-height: 30px; padding: 0 10px; }

/* ERROR IN CONTACT FORM
 -------------------------------*/
.issues { background-color: #df3800; color: #ffffff; margin-bottom: 10px; padding: 10px; display: none; }
.sign-issue { float: left; width: 25px; height: 100%; font-size: 24px; font-weight: 700; text-align: center; }
.message-issue { float: left; width: auto; height: 100%; font-size: 13px; }

/* SENT SUCCESFULLY
 -------------------------------*/
.sent-msg { background-color: #00aa38; color: #ffffff; margin-bottom: 10px; padding: 10px; display: none; }
.sent-msg .sign-issue { float: left; width: 35px; height: 30px; margin-right: 10px; text-align: center; background-image: url(../images/sent-msg.png); background-size: cover; }
.sent-msg .message-issue { float: left; width: auto; height: 100%; font-size: 13px; line-height: 30px; }