/**
 * General styles for the GSD Shortcodes plugin. More complex shortcodes have
 * their own style sheets.
 */

/* # Table of Contents


- Clear It
- FAQ
- Icons (Font Awesome)
- Box
	- Defaults
	- Colors
		- Box Colors
		- Text Color Adjustments
	- Titles
	- Types
- Button
*/

/* # Clear It
------------------------------------------------------------------------------------------------------------------- */

.clear {
	clear: both;
	overflow: hidden;
}

/* FAQ
------------------------------------------------------------------------------------------------------------------- */

div.faq-question,
p.faq-question,
span.faq-question {
	font-weight: 700;
}

.faq-question + br {
	display: none;
}

.faq-question i {
	margin-right: 10px;
}

/* Icons (Font Awesome)
------------------------------------------------------------------------------------------------------------------- */

/* Individual Shortcode Icons
------------------------------------------------------------ */

.icon i {
	width: 22px;
}

.icon + .icon {
	margin-left: 22px;
}


/* Box
------------------------------------------------------------------------------------------------------------------- */

/*
 * Defaults
------------------------------------------------------------ */

.box {
	background-color: #eee;
	border-radius: 3px;
	display: block;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 20px;
}

.box-icon {
	display: none;
}

.box-content {
	display: inline-block;
	vertical-align: top;
}

.box-icon ~ .box-content {
	max-width: 94%;
}

.box-content > p:last-child {
	margin-bottom: 0;
}

.box-content a {
	border: none;
	text-decoration: underline;
}

/*
 * Colors
------------------------------------------------------------ */

/* Box Colors
--------------------------------------- */

/* black */
.box.black,
.box.black.alert,
.box.black.announce,
.box.black.asterisk,
.box.black.bolt,
.box.black.book,
.box.black.bus,
.box.black.calculator,
.box.black.calendar,
.box.black.car,
.box.black.card,
.box.black.check,
.box.black.child,
.box.black.clock,
.box.black.comment,
.box.black.cutlery,
.box.black.download,
.box.black.email,
.box.black.error,
.box.black.favorite,
.box.black.female,
.box.black.file,
.box.black.flag,
.box.black.graduate,
.box.black.heart,
.box.black.idea,
.box.black.info,
.box.black.laptop,
.box.black.location,
.box.black.magic,
.box.black.male,
.box.black.money,
.box.black.music,
.box.black.pencil,
.box.black.phone,
.box.black.plus,
.box.black.question,
.box.black.recycle,
.box.black.reminder,
.box.black.send,
.box.black.settings,
.box.black.smile,
.box.black.soccer,
.box.black.tack,
.box.black.thumbsup,
.box.black.umbrella,
.box.black.user,
.box.black.users,
.box.black.wheelchair,
.box.tack
{
	background-color: #555;
	color: #fff;
}

/* blue */
.box.blue,
.box.blue.alert,
.box.blue.announce,
.box.blue.asterisk,
.box.blue.bolt,
.box.blue.book,
.box.blue.bus,
.box.blue.calculator,
.box.blue.calendar,
.box.blue.car,
.box.blue.card,
.box.blue.check,
.box.blue.child,
.box.blue.clock,
.box.blue.comment,
.box.blue.cutlery,
.box.blue.download,
.box.blue.email,
.box.blue.error,
.box.blue.favorite,
.box.blue.female,
.box.blue.file,
.box.blue.flag,
.box.blue.graduate,
.box.blue.heart,
.box.blue.idea,
.box.blue.info,
.box.blue.laptop,
.box.blue.location,
.box.blue.magic,
.box.blue.male,
.box.blue.money,
.box.blue.music,
.box.blue.pencil,
.box.blue.phone,
.box.blue.plus,
.box.blue.question,
.box.blue.recycle,
.box.blue.reminder,
.box.blue.send,
.box.blue.settings,
.box.blue.smile,
.box.blue.soccer,
.box.blue.tack,
.box.blue.thumbsup,
.box.blue.umbrella,
.box.blue.user,
.box.blue.users,
.box.blue.wheelchair,
.box.graduate,
.box.info,
.box.question,
.box.umbrella,
.box.wheelchair
{
	background-color: #d2e2e9;
}

/* brown */
.box.book,
.box.brown,
.box.brown.alert,
.box.brown.announce,
.box.brown.asterisk,
.box.brown.bolt,
.box.brown.book,
.box.brown.bus,
.box.brown.calculator,
.box.brown.calendar,
.box.brown.car,
.box.brown.card,
.box.brown.check,
.box.brown.child,
.box.brown.clock,
.box.brown.comment,
.box.brown.cutlery,
.box.brown.download,
.box.brown.email,
.box.brown.error,
.box.brown.favorite,
.box.brown.female,
.box.brown.file,
.box.brown.flag,
.box.brown.graduate,
.box.brown.heart,
.box.brown.idea,
.box.brown.info,
.box.brown.laptop,
.box.brown.location,
.box.brown.magic,
.box.brown.male,
.box.brown.money,
.box.brown.music,
.box.brown.pencil,
.box.brown.phone,
.box.brown.plus,
.box.brown.question,
.box.brown.recycle,
.box.brown.reminder,
.box.brown.send,
.box.brown.settings,
.box.brown.smile,
.box.brown.soccer,
.box.brown.tack,
.box.brown.thumbsup,
.box.brown.umbrella,
.box.brown.user,
.box.brown.users,
.box.brown.wheelchair,
.box.email,
.box.location,
.box.pencil,
.box.send
{
	background-color: #e3d4c0;
}

/* gray */
.box.calculator,
.box.calendar,
.box.car,
.box.clock,
.box.cutlery,
.box.female,
.box.gray,
.box.gray.alert,
.box.gray.announce,
.box.gray.asterisk,
.box.gray.bolt,
.box.gray.book,
.box.gray.bus,
.box.gray.calculator,
.box.gray.calendar,
.box.gray.car,
.box.gray.card,
.box.gray.check,
.box.gray.child,
.box.gray.clock,
.box.gray.comment,
.box.gray.cutlery,
.box.gray.download,
.box.gray.email,
.box.gray.error,
.box.gray.favorite,
.box.gray.female,
.box.gray.file,
.box.gray.flag,
.box.gray.graduate,
.box.gray.heart,
.box.gray.idea,
.box.gray.info,
.box.gray.laptop,
.box.gray.location,
.box.gray.magic,
.box.gray.male,
.box.gray.money,
.box.gray.music,
.box.gray.pencil,
.box.gray.phone,
.box.gray.plus,
.box.gray.question,
.box.gray.recycle,
.box.gray.reminder,
.box.gray.send,
.box.gray.settings,
.box.gray.smile,
.box.gray.soccer,
.box.gray.tack,
.box.gray.thumbsup,
.box.gray.umbrella,
.box.gray.user,
.box.gray.users,
.box.gray.wheelchair,
.box.laptop,
.box.male,
.box.phone,
.box.user,
.box.users
{
	background-color: #eee;
}

/* green */
.box.card,
.box.check,
.box.file,
.box.green,
.box.green.alert,
.box.green.announce,
.box.green.asterisk,
.box.green.bolt,
.box.green.book,
.box.green.bus,
.box.green.calculator,
.box.green.calendar,
.box.green.car,
.box.green.card,
.box.green.check,
.box.green.child,
.box.green.clock,
.box.green.comment,
.box.green.cutlery,
.box.green.download,
.box.green.email,
.box.green.error,
.box.green.favorite,
.box.green.female,
.box.green.file,
.box.green.flag,
.box.green.graduate,
.box.green.heart,
.box.green.idea,
.box.green.info,
.box.green.laptop,
.box.green.location,
.box.green.magic,
.box.green.male,
.box.green.money,
.box.green.music,
.box.green.pencil,
.box.green.phone,
.box.green.plus,
.box.green.question,
.box.green.recycle,
.box.green.reminder,
.box.green.send,
.box.green.settings,
.box.green.smile,
.box.green.soccer,
.box.green.tack,
.box.green.thumbsup,
.box.green.umbrella,
.box.green.user,
.box.green.users,
.box.green.wheelchair
.box.money,
.box.recycle,
.box.soccer
{
	background-color: #d2e9d6;
}

/* orange */
.box.alert,
.box.announce,
.box.bus,
.box.magic,
.box.orange,
.box.orange.alert,
.box.orange.announce,
.box.orange.asterisk,
.box.orange.bolt,
.box.orange.book,
.box.orange.bus,
.box.orange.calculator,
.box.orange.calendar,
.box.orange.car,
.box.orange.card,
.box.orange.check,
.box.orange.child,
.box.orange.clock,
.box.orange.comment,
.box.orange.cutlery,
.box.orange.download,
.box.orange.email,
.box.orange.error,
.box.orange.favorite,
.box.orange.female,
.box.orange.file,
.box.orange.flag,
.box.orange.graduate,
.box.orange.heart,
.box.orange.idea,
.box.orange.info,
.box.orange.laptop,
.box.orange.location,
.box.orange.magic,
.box.orange.male,
.box.orange.money,
.box.orange.music,
.box.orange.pencil,
.box.orange.phone,
.box.orange.plus,
.box.orange.question,
.box.orange.recycle,
.box.orange.reminder,
.box.orange.send,
.box.orange.settings,
.box.orange.smile,
.box.orange.soccer,
.box.orange.tack,
.box.orange.thumbsup,
.box.orange.umbrella,
.box.orange.user,
.box.orange.users,
.box.orange.wheelchair,
.box.thumbsup
{
	background-color: #f7e2c1;
}

/* purple */
.box.child,
.box.comment,
.box.music,
.box.purple,
.box.purple.alert,
.box.purple.announce,
.box.purple.asterisk,
.box.purple.bolt,
.box.purple.book,
.box.purple.bus,
.box.purple.calculator,
.box.purple.calendar,
.box.purple.car,
.box.purple.card,
.box.purple.check,
.box.purple.child,
.box.purple.clock,
.box.purple.comment,
.box.purple.cutlery,
.box.purple.download,
.box.purple.email,
.box.purple.error,
.box.purple.favorite,
.box.purple.female,
.box.purple.file,
.box.purple.flag,
.box.purple.graduate,
.box.purple.heart,
.box.purple.idea,
.box.purple.info,
.box.purple.laptop,
.box.purple.location,
.box.purple.magic,
.box.purple.male,
.box.purple.money,
.box.purple.music,
.box.purple.pencil,
.box.purple.phone,
.box.purple.plus,
.box.purple.question,
.box.purple.recycle,
.box.purple.reminder,
.box.purple.send,
.box.purple.settings,
.box.purple.smile,
.box.purple.soccer,
.box.purple.tack,
.box.purple.thumbsup,
.box.purple.umbrella,
.box.purple.user,
.box.purple.users,
.box.purple.wheelchair,
.box.reminder
{
	background-color: #d8d2e9;
}

/* red */
.box.error,
.box.flag,
.box.heart,
.box.plus,
.box.red,
.box.red.alert,
.box.red.announce,
.box.red.asterisk,
.box.red.bolt,
.box.red.book,
.box.red.bus,
.box.red.calculator,
.box.red.calendar,
.box.red.car,
.box.red.card,
.box.red.check,
.box.red.child,
.box.red.clock,
.box.red.comment,
.box.red.cutlery,
.box.red.download,
.box.red.email,
.box.red.error,
.box.red.favorite,
.box.red.female,
.box.red.file,
.box.red.flag,
.box.red.graduate,
.box.red.heart,
.box.red.idea,
.box.red.info,
.box.red.laptop,
.box.red.location,
.box.red.magic,
.box.red.male,
.box.red.money,
.box.red.music,
.box.red.pencil,
.box.red.phone,
.box.red.plus,
.box.red.question,
.box.red.recycle,
.box.red.reminder,
.box.red.send,
.box.red.settings,
.box.red.smile,
.box.red.soccer,
.box.red.tack,
.box.red.thumbsup,
.box.red.umbrella,
.box.red.user,
.box.red.users,
.box.red.wheelchair
{
	background-color: #eed8d6;
}

/* yellow */
.box.asterisk,
.box.bolt,
.box.favorite,
.box.idea,
.box.smile,
.box.yellow,
.box.yellow.alert,
.box.yellow.announce,
.box.yellow.asterisk,
.box.yellow.bolt,
.box.yellow.book,
.box.yellow.bus,
.box.yellow.calculator,
.box.yellow.calendar,
.box.yellow.car,
.box.yellow.card,
.box.yellow.check,
.box.yellow.child,
.box.yellow.clock,
.box.yellow.comment,
.box.yellow.cutlery,
.box.yellow.download,
.box.yellow.email,
.box.yellow.error,
.box.yellow.favorite,
.box.yellow.female,
.box.yellow.file,
.box.yellow.flag,
.box.yellow.graduate,
.box.yellow.heart,
.box.yellow.idea,
.box.yellow.info,
.box.yellow.laptop,
.box.yellow.location,
.box.yellow.magic,
.box.yellow.male,
.box.yellow.money,
.box.yellow.music,
.box.yellow.pencil,
.box.yellow.phone,
.box.yellow.plus,
.box.yellow.question,
.box.yellow.recycle,
.box.yellow.reminder,
.box.yellow.send,
.box.yellow.settings,
.box.yellow.smile,
.box.yellow.soccer,
.box.yellow.tack,
.box.yellow.thumbsup,
.box.yellow.umbrella,
.box.yellow.user,
.box.yellow.users,
.box.yellow.wheelchair
{
	background-color: #fff4be;
}

/* Text Color Adjustments
--------------------------------------- */

.box.black a {
	color: #ccc;
}

.box.black a:hover {
	color: #fff;
}


/*
 * Titles
------------------------------------------------------------ */

.box .box-title {
	display: block;
}

/*
 * Types
------------------------------------------------------------ */

.box .far {
	vertical-align: top;
}

.box.alert .box-icon,
.box.announce .box-icon,
.box.asterisk .box-icon,
.box.bolt .box-icon,
.box.book .box-icon,
.box.bus .box-icon,
.box.calculator .box-icon,
.box.calendar .box-icon,
.box.car .box-icon,
.box.card .box-icon,
.box.check .box-icon,
.box.child .box-icon,
.box.clock .box-icon,
.box.comment .box-icon,
.box.cutlery .box-icon,
.box.download .box-icon,
.box.email .box-icon,
.box.error .box-icon,
.box.favorite .box-icon,
.box.female .box-icon,
.box.file .box-icon,
.box.flag .box-icon,
.box.graduate .box-icon,
.box.heart .box-icon,
.box.idea .box-icon,
.box.info .box-icon,
.box.laptop .box-icon,
.box.location .box-icon,
.box.magic .box-icon,
.box.male .box-icon,
.box.money .box-icon,
.box.music .box-icon,
.box.pencil .box-icon,
.box.phone .box-icon,
.box.plus .box-icon,
.box.question .box-icon,
.box.recycle .box-icon,
.box.reminder .box-icon,
.box.send .box-icon,
.box.settings .box-icon,
.box.smile .box-icon,
.box.soccer .box-icon,
.box.tack .box-icon,
.box.thumbsup .box-icon,
.box.umbrella .box-icon,
.box.user .box-icon,
.box.users .box-icon,
.box.wheelchair .box-icon
{
	display: inline-block;
	margin-right: 20px;
}

/* Button
------------------------------------------------------------------------------------------------------------------- */

/* .button defined in style-themes.css */

.button .button-icon {
	display: inline-block;
	margin-right: 10px;
}

.button ~ .button {
	margin-left: 10px;
}

/* Granite Directory
------------------------------------------------------------------------------------------------------------------- */

.directory {
	display: block;
	margin-bottom: 28px;
}

.directory + .directory {
	margin-top: 25px;
}

.directory .picture {
	display: inline-block;
	margin-right: 20px;
}

.directory .picture a {
	border: none;
}

.directory .picture img {
	border-radius: 50%;
  min-width: 100px;
}

.directory .info {
	display: block;
	vertical-align: top;
	word-wrap: break-word;
}

.directory span {
	display: block;
}

.directory .dname {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 5px;
}

.directory .dtitle,
.directory .dtitle2 {
	color: #767676;
	display: block;
	font-style: italic;
}

.directory i {
	width: 20px;
}

.directory .daddress + .daddress {
	margin-left: 20px;
}

.directory + br {
	display: none;
}

@media only screen and (min-width: 600px) {
	.directory .info {
		display: inline-block;
		width: auto;
	}
}

@media only screen and (min-width: 960px) {
	.directory .info {
		width: 148px;
	}
}

@media only screen and (min-width: 1068px) {
	.directory .info {
		width: 189px;
	}
}

@media only screen and (min-width: 1176px) {
	.directory .info {
		width: 230px;
	}
}