/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* WEBSITE COLOURS #DFBA69 = yellow #5A6B56 = green #3A7C99 = blue */ 
   
/* apply a natural box layout model to all elements */
*, *:before, *:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

html { overflow:-moz-scrollbars-vertical; overflow-y:scroll; overflow-x:auto; background: url(https://travelvirgins.com/resources/tvbg.jpg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}

body { color:#ffffff; font:300 16px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align:center; }

a { text-decoration:none; color:#ffffff; font-size:16px; outline:none;}
img { -ms-interpolation-mode:bicubic; border:0;}
ul { list-style:none; }
img, embed, object, video { width:auto; max-width:100%; height:auto; }


#wrapper { position:relative; width:100%; text-align:left;}
#mainpanel { position:fixed; top:0; left:0; width:250px; background:#131313; text-align:center;  border-right: 1px solid #3A7C99;  border-bottom: 1px solid #3A7C99;}
#mainpanel a{ padding:8px 15px; }
#content { position:relative; margin-left:275px; margin-right:525px; margin-bottom:25px; min-height:900px; color:#444444; }
#subpanel {  position:absolute; top:0; right:0;  width:500px; font-size:14px; text-align:center; }



#logo  { height:75px; vertical-align:middle; text-align:center; }
#logo  span { color:#DFBA69 }
#logo a { display:block; color:#3A7C99; font-size:40px; }


#header { padding:8px 20px 12px; }
h2{ color:#ffffff; font-size:60px; }
h2 em{ font-size:22px; }

#mainnav { margin:0; padding:0; width:100%; background:#131313; text-align:left; }
#mainnav li { margin:0; padding:0; width:100%; border-top:1px solid #333333; }		
#mainnav li#selected { background:#3A7C99; }	
#mainnav a{ display:block; margin:0; padding:7px 7px 7px 25px; color:#cccccc; font-size:22px; }
#mainnav a:hover{ background:transparent; }

#navdscr { margin:0; padding:20px 15px; font-size:14px; font-weight:100; letter-spacing:.4em; line-height:1.3em; color:#DFBA69; border-top:1px solid #333333; }

#footer { position;relative; background:#131313; min-height:350px;}
#footer-inner { position;relative; margin-left:275px; margin-right:525px; padding:10px 50px 25px; color:#cccccc; font-size:12px; text-align:center; }
#footer-inner a{ color:#ffffff; font-size:12px; }
#footer-inner a:hover{ color:#3A7C99; text-decoration:underline; }





.mnhov{ color:#3A7C99; background:#333333;}


.mmspecial a{ margin:0; padding:8px 8px 8px 25px; display:block; font-size:16px; background:#222222; }

#catnav { margin:0 auto; width:130px; background:#131313; text-align:center;}
#catnav a{ margin:0; padding:0; font-size:28px; font-weight:lighter;}
#catnav a:hover{ color:#DFBA69; }		

#visitors { padding:5px 12px; text-align:left; background:#131313; color:#3A7C99; font-size:10px; }

#posthead { position:relative; margin:0 auto 18px; background:#131313; text-align:center;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
#posthead  h1{ margin:0; padding:8px 10px; color:#DFBA69; font:lighter 24px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; letter-spacing:.3em; }

#navcontrols { position:relative; height:30px; line-height:30px; color:#444444; font-size:18px; border-top: 1px solid #666666; text-align:center; }
#navcontrols em { color:#3A7C99; }
#navcontrols a { color:#ffffff; font-size:18px; }
#navcontrols a:hover { color:#3A7C99; }
#prevbox { position:absolute; left:15px; bottom:0; }
#nextbox { position:absolute; right:15px; bottom:0; }

#pglyr { margin-top:30px; }


@media (max-width:1750px) {
	#subpanel  { width:250px; }
	#content { margin-right:275px; }	
	#footer-inner { margin-right:275px; }	
}
@media (max-width:1450px) {
	#mainpanel  { width:175px;}
	#logo { height:50px; }	
	#logo a { display:block; color:#3A7C99; font-size:28px; }
	
	#mainpanel  h3 { font-size:11px; }	
	#subpanel  { width:250px; }
	#content { margin-left:200px; margin-right:275px; }
	#footer-inner { margin-left:200px; margin-right:275px;}	
}
@media (max-width:1100px) {
	#content { margin-right:25px; }
	#footer-inner { margin-right:25px; }
	#subpanel  { position:relative; margin:25px; margin-left:200px;}		
}
@media (max-width:920px) {
	#mainpanel  { position:relative; width:100%; background:black; z-index:100;}
	#logo { height:50px; }	
	#logo a { display:block; color:#3A7C99; font-size:28px; }


	
	#mainnav { margin:0; padding:0;}
	#mainnav li{ display:inline; border:none; height:40px; line-height:40px; }
	#mainnav li span{ display:inline; padding:10px 5px; }	
	#mainnav li a{ display:inline; padding:10px 5px; }	
	
	
	#content { margin:0 25px; }
	#footer-inner { margin:0 25px; }
	#subpanel  { position:relative; margin:25px;}	
}

/*
@media (max-width:500px) {
	#mainpanel  { position:absolute; top:0; left:0;}
}

@media (max-width:350px) {
	#content { margin:0; }
}

*/
@media (max-height:481px) {
	#mainpanel  { position:absolute; top:0; left:0; }
	
.navslug { display:none; }	
	
	#navdscr { display:none; }	
}



.journalnav { position:relative; height:32px; text-align:center;}
.jnprev { position:absolute; top:0; left:0; padding:2px 15px; }
.jnnext { position:absolute; top:0; right:0; padding:2px 15px; }





.tagcloud { margin:0 auto; padding:10px; width:170px; text-align:left; border:1px solid #ffffff; text-align:left; }
.tagcloud a{ padding:2px 4px; }
.tagcloud a:hover{ color:#faf4d1; text-decoration:underline; }			
.tagline li{ display:inline; }
.tagline li a{ padding:2px 4px; }
.tagline a:hover{ color:#666666; text-decoration:underline; }



/* IMAGE REPLACEMENT */
h6#logo2 {
   width: 200px; // width of image
   height: 100px; // height of image
   background: url(../path/to/image.jpg); 
   text-indent: -9999px;
}	
	

/* Box Effexts */	
	

.box {
	padding: 50px;
	margin: 0 auto 45px;
	background-color: #fff;
}


/* COLUMN ALIGN THUMBNAILS*/

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 6;
   -webkit-column-gap:   8px;
   -moz-column-count:    6;
   -moz-column-gap:      8px;
   column-count:         6;
   column-gap:           8px;
   
}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}




/*

@media (max-width: 1600px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 1300px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 750px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}

*/



/* COOL TAPE LOOK FOR THUMBNAILS */	

.photo {
	float:left;
	background:#131313;
	height: 200px;  
	width: 200px;
	/* margin: 50px auto; */
	margin:8px; 
	position: relative;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
.photo1:before {
	content: "";
	height: 20px;
	width: 100px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: -15px;
	left: 50px;
   
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
			box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.feature{ width:100%; height:auto; }

#photoblock { background:#ffffff;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
#commentsection { background:#ccc; text-align:right; margin-top:25px; }
#commentsection a{ display:block; padding:2px 25px; color:#3A7C99;  font-size:16px; }
#commentsection a:hover{ text-decoration:underline; color:#333333; }

.featurephoto { position:relative; margin:0 auto; min-height:300px; background:#131313; text-align:center; }
.featurephoto h3{
	margin:0;
	padding:5px 0;
	font:lighter 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	
	color:#666666;
}

.prevoverlay {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background-image: url('https://travelvirgins.com/resources/previous-white.png');
	background-repeat: no-repeat;
	background-position: left center;
}
.prevoverlay a{
	display:block;
	width:100%;
	height:100%;
}

.nextoverlay {
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
	background-image: url('https://travelvirgins.com/resources/next-white.png');
	background-repeat: no-repeat;
	background-position: right center;
}
.nextoverlay a{
	display:block;
	width:100%;
	height:100%;
}

.closebutton {
	position:absolute;
	top:-15px;
	right:-16px;
	z-index:1000;
}



.post { position:relative; margin:10px auto 35px; padding:35px; background:#ffffff; color:#131313; font-size:20px; line-height:1.5em; font-family:Georgia, serif;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
.post:before { position: absolute; top: -15px; left: 42%; content:""; height:25px; width:16%; background:rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
			box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
.post h3{ margin:0; padding:0; }
.post h3 a{ display:block; color:#3A7C99; font-size:28px; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-weight:600;}
.post h3 a:hover{ color:#131313; }
.post span{ padding-left:5px; font-size:11px; line-height:1.0em; }
.post p{ color:#131313;  font-size:20px; line-height:1.5em; font-family:Georgia, serif; }
.post a{ color:#3A7C99;  font-size:20px; line-height:1.5em; font-family:Georgia, serif; }
.post a:hover{ color:#131313; text-decoration:underline; }


.postindx { position: relative; margin:10px auto 35px; padding:35px; background:#ffffff;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
.postindx:before { position: absolute; top: -15px; left: 42%; content:""; height:25px; width:16%; background:rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
			box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}


#video-container { position:relative; margin-top:0; padding-bottom:56.25%; padding-top:30px; height:0; background:#131313;
	/*overly complex but cool shadow*/
	-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
			box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);	
}
#video-container iframe,
#video-container object,
#video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

#vidframe { margin-top:25px; }
iframe { width:100%; margin:0 0 20px 0; }


.forumpic { margin:20px 0; padding:8px; background:black; color:#DFBA69; text-align:center; }
.postpic { margin:0; padding:8px; background:black; text-align:center; }
.postcap { margin:0; padding:0 0 15px; background:black; line-height:1; color:#DFBA69; font-size:14px; text-align:center; }

dl { margin:0; padding:0; width:250px; text-align:left;  background:#ffffff; }
dl dt{ margin:0; padding:0; background:#3A7C99; color:#ffffff; height:35px; line-height:35px; text-align:center; font-size:16px; }
dl dd{ position:relative; margin:0; padding:0; border-top:1px solid #cccccc; height:50px; text-align:right:}
dl a{ display:block; width:100%; color:#3A7C99; height:100%; font-weight:lighter; font-size:16px; }
dl p{ margin:0; padding:0; color:#3A7C99; margin:2px 5px 2px 60px; }
dl p:hover{ color:#333333; }

.hovertext { color:#3A7C99; }

.sociallinks { position:relative; margin:0; margin-top:15px; padding:0; height:75px; }
.sociallinks li{ display:inline;  }


/* Comments Section */
#commentsection { background:#3A7C99; text-align:right; margin-top:25px; }
#commentsection a{ display:block; padding:2px 25px; color:#ffffff;  font-size:18px; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; }
#commentsection a:hover{ text-decoration:underline; color:#333333; }

#commentsbox { background:#ffffff; }
.comment { position:relative;  margin:0 0 0 60px; padding:8px 0 12px 0; min-height:50px; border-top:1px dotted #cccccc; }
.comment p{ margin:4px 0 0 0; padding:0; margin-left:8px; color:#333333; font-size:14px; }
.comment a{ color:#3A7C99; font-size:14px; }
.comment a:hover{ text-decoration:underline; }
.comment em{ position:absolute; top:10px; right:8px; font-size:10px; color:#3A7C99; }
.comment h5 { margin:0; padding:0; color:#3A7C99; font-weight:lighter; font-size:16px; }
.comment h5  a{ margin:0; padding:0; color:#3A7C99; font-weight:lighter; font-size:16px; }
.comment h5  a:hover{ text-decoration:underline; }
.comment img { position:absolute; top:12px; left:-60px; }

#leavecomment { margin-top:60px; padding-bottom:25px; color:#333333; }
#leavecomment h3{ margin:0 0; padding:0; color:#333333; }
#leavecomment p { margin:0 0 25px; padding:0; color:#3A7C99; font-size:12px; }
#leavecomment span{ color:green; font-size:12px; }

#leavecomment input { padding:5px; color:#333333; font-size:18px; }
#leavecomment textarea { padding:5px; color:#333333; font-size:18px; }

.focusfield { background:red; }

.delbut { position:absolute; top:8px; right:15px; width:30px; height:30px; color:transparent; background-image: url(https://travelvirgins.com/resources/delete.png);
	background-repeat: no-repeat; border:0;}


	
	
	
	
/* Generic Styles -------------------------- */
	.hidecell { visibility:hidden; }
	.pointer {  cursor:pointer; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}